@internetarchive/ia-topnav 2.1.0 → 2.1.1-webdev-8723.0

package/src/styles/media-menu.ts

@@ -1,67 +1,67 @@
-import { css } from 'lit';
-import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
-
-export default css`
-  :host {
-    outline: none;
-  }
-
-  .media-menu-inner {
-    z-index: -1;
-    top: -40rem;
-    background-color: var(--mediaMenuBg);
-    margin: 0;
-    overflow: hidden;
-    transition-duration: 0.2s;
-    transition-property: top;
-    transition-timing-function: ease;
-  }
-
-  .menu-group {
-    position: relative;
-    line-height: normal;
-  }
-
-  /* Mobile view styles */
-  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
-    .media-menu-inner {
-      position: absolute;
-      width: 100%;
-    }
-
-    .open .media-menu-inner {
-      top: 0;
-    }
-
-    .overflow-clip {
-      position: absolute;
-      z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */
-      top: 4rem;
-      left: 0;
-      height: 0;
-      width: 100%;
-      overflow: hidden;
-      transition-duration: 0.2s;
-      transition-property: height;
-    }
-
-    .open .overflow-clip {
-      height: 40rem;
-    }
-  }
-
-  /* Desktop view styles */
-  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
-    .media-menu-inner {
-      display: block;
-      position: static;
-      width: auto;
-      height: 5rem;
-      transition-property: none;
-    }
-
-    .menu-group {
-      font-size: 0;
-    }
-  }
-`;
+import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
+
+export default css`
+  :host {
+    outline: none;
+  }
+
+  .media-menu-inner {
+    z-index: -1;
+    top: -40rem;
+    background-color: var(--mediaMenuBg);
+    margin: 0;
+    overflow: hidden;
+    transition-duration: 0.2s;
+    transition-property: top;
+    transition-timing-function: ease;
+  }
+
+  .menu-group {
+    position: relative;
+    line-height: normal;
+  }
+
+  /* Mobile view styles */
+  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
+    .media-menu-inner {
+      position: absolute;
+      width: 100%;
+    }
+
+    .open .media-menu-inner {
+      top: 0;
+    }
+
+    .overflow-clip {
+      position: absolute;
+      z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */
+      top: 4rem;
+      left: 0;
+      height: 0;
+      width: 100%;
+      overflow: hidden;
+      transition-duration: 0.2s;
+      transition-property: height;
+    }
+
+    .open .overflow-clip {
+      height: 40rem;
+    }
+  }
+
+  /* Desktop view styles */
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+    .media-menu-inner {
+      display: block;
+      position: static;
+      width: auto;
+      height: 5rem;
+      transition-property: none;
+    }
+
+    .menu-group {
+      font-size: 0;
+    }
+  }
+`;

package/src/styles/media-slider.ts

@@ -1,82 +1,82 @@
-import { css } from 'lit';
-import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
-
-export default css`
-  .media-slider-container {
-    position: relative;
-  }
-
-  .overflow-clip {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: 0;
-    overflow: hidden;
-    transition: height 0.2s ease;
-  }
-
-  .information-menu {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    padding: 0;
-    height: 31.9rem;
-    overflow-x: hidden;
-    font-size: 1.4rem;
-    background: var(--mediaSliderBg);
-  }
-
-  .open {
-    display: block;
-  }
-
-  .hidden {
-    display: none;
-  }
-
-  .info-box {
-    padding: 1rem;
-  }
-
-  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
-    .overflow-clip.open {
-      display: block;
-      height: 35.8rem;
-      left: 4rem;
-      top: 0;
-    }
-  }
-
-  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
-    .overflow-clip {
-      display: block;
-    }
-
-    .information-menu {
-      left: 0;
-      z-index: 3;
-      height: auto;
-      min-height: 21rem;
-      background: var(--mediaSliderDesktopBg);
-      transform: translate(0, -100%);
-      transition: transform 0.2s ease;
-    }
-
-    .overflow-clip.open {
-      height: 22rem;
-    }
-
-    .information-menu.open {
-      transform: translate(0, 0);
-    }
-
-    .info-box {
-      max-width: 100rem;
-      padding: 1.5rem 0;
-      margin: 0 auto;
-    }
-  }
-`;
+import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
+
+export default css`
+  .media-slider-container {
+    position: relative;
+  }
+
+  .overflow-clip {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.2s ease;
+  }
+
+  .information-menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    padding: 0;
+    height: 31.9rem;
+    overflow-x: hidden;
+    font-size: 1.4rem;
+    background: var(--mediaSliderBg);
+  }
+
+  .open {
+    display: block;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .info-box {
+    padding: 1rem;
+  }
+
+  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
+    .overflow-clip.open {
+      display: block;
+      height: 35.8rem;
+      left: 4rem;
+      top: 0;
+    }
+  }
+
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+    .overflow-clip {
+      display: block;
+    }
+
+    .information-menu {
+      left: 0;
+      z-index: 3;
+      height: auto;
+      min-height: 21rem;
+      background: var(--mediaSliderDesktopBg);
+      transform: translate(0, -100%);
+      transition: transform 0.2s ease;
+    }
+
+    .overflow-clip.open {
+      height: 22rem;
+    }
+
+    .information-menu.open {
+      transform: translate(0, 0);
+    }
+
+    .info-box {
+      max-width: 100rem;
+      padding: 1.5rem 0;
+      margin: 0 auto;
+    }
+  }
+`;

package/src/styles/media-subnav.ts

@@ -1,160 +1,160 @@
-import { css } from 'lit';
-import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
-import { subnavListCSS } from './base';
-
-export default [
-  subnavListCSS,
-  css`
-    img {
-      display: block;
-      width: 90px;
-      height: 90px;
-      margin: 0 auto 1rem auto;
-      border-radius: 45px;
-    }
-
-    h3 {
-      margin-top: 0;
-      font-size: 1.8rem;
-    }
-
-    .icon-links {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-      justify-content: space-evenly;
-      text-align: center;
-    }
-
-    .icon-links a {
-      display: inline-block;
-      width: 12rem;
-      margin-bottom: 1.5rem;
-      overflow: hidden;
-      white-space: nowrap;
-      text-align: center;
-      text-overflow: ellipsis;
-    }
-
-    .icon-links a + a {
-      margin-left: 2rem;
-    }
-
-    .featured h4 {
-      display: none;
-    }
-
-    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
-      :host {
-        display: -ms-grid;
-        display: grid;
-        -ms-grid-columns: 40% 20% 40%;
-        grid-template-columns: 40% 20% 40%;
-      }
-
-      .wayback-search {
-        -ms-grid-column: 1;
-        -ms-grid-column-span: 3;
-        grid-column: 1 / 4;
-      }
-
-      h3 {
-        display: none;
-      }
-
-      .icon-links {
-        -ms-grid-column: 1;
-      }
-
-      .icon-links a {
-        padding-top: 3.5rem;
-        max-width: 16rem;
-      }
-
-      .links {
-        padding: 0 1.5rem;
-      }
-
-      .featured {
-        -ms-grid-column: 2;
-      }
-
-      .featured h4 {
-        display: block;
-      }
-
-      .top {
-        -ms-grid-column: 3;
-      }
-
-      .top ul {
-        display: -ms-grid;
-        display: grid;
-        -ms-grid-columns: 50% 3rem 50%;
-        grid-template-columns: 50% 50%;
-        -ms-grid-rows: (auto) [7];
-        grid-template-rows: repeat(7, auto);
-        grid-column-gap: 3rem;
-        grid-auto-flow: column;
-      }
-      .top ul > *:nth-child(1) {
-        -ms-grid-row: 1;
-        -ms-grid-column: 1;
-      }
-      .top ul > *:nth-child(2) {
-        -ms-grid-row: 2;
-        -ms-grid-column: 1;
-      }
-      .top ul > *:nth-child(3) {
-        -ms-grid-row: 3;
-        -ms-grid-column: 1;
-      }
-      .top ul > *:nth-child(4) {
-        -ms-grid-row: 4;
-        -ms-grid-column: 1;
-      }
-      .top ul > *:nth-child(5) {
-        -ms-grid-row: 5;
-        -ms-grid-column: 1;
-      }
-      .top ul > *:nth-child(6) {
-        -ms-grid-row: 6;
-        -ms-grid-column: 1;
-      }
-      .top ul > *:nth-child(7) {
-        -ms-grid-row: 7;
-        -ms-grid-column: 1;
-      }
-      .top ul > *:nth-child(8) {
-        -ms-grid-row: 1;
-        -ms-grid-column: 3;
-      }
-      .top ul > *:nth-child(9) {
-        -ms-grid-row: 2;
-        -ms-grid-column: 3;
-      }
-      .top ul > *:nth-child(10) {
-        -ms-grid-row: 3;
-        -ms-grid-column: 3;
-      }
-      .top ul > *:nth-child(11) {
-        -ms-grid-row: 4;
-        -ms-grid-column: 3;
-      }
-      .top ul > *:nth-child(12) {
-        -ms-grid-row: 5;
-        -ms-grid-column: 3;
-      }
-      .top ul > *:nth-child(13) {
-        -ms-grid-row: 6;
-        -ms-grid-column: 3;
-      }
-      .top ul > *:nth-child(14) {
-        -ms-grid-row: 7;
-        -ms-grid-column: 3;
-      }
-    }
-  `,
-];
+import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
+import { subnavListCSS } from './base';
+
+export default [
+  subnavListCSS,
+  css`
+    img {
+      display: block;
+      width: 90px;
+      height: 90px;
+      margin: 0 auto 1rem auto;
+      border-radius: 45px;
+    }
+
+    h3 {
+      margin-top: 0;
+      font-size: 1.8rem;
+    }
+
+    .icon-links {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+      justify-content: space-evenly;
+      text-align: center;
+    }
+
+    .icon-links a {
+      display: inline-block;
+      width: 12rem;
+      margin-bottom: 1.5rem;
+      overflow: hidden;
+      white-space: nowrap;
+      text-align: center;
+      text-overflow: ellipsis;
+    }
+
+    .icon-links a + a {
+      margin-left: 2rem;
+    }
+
+    .featured h4 {
+      display: none;
+    }
+
+    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+      :host {
+        display: -ms-grid;
+        display: grid;
+        -ms-grid-columns: 40% 20% 40%;
+        grid-template-columns: 40% 20% 40%;
+      }
+
+      .wayback-search {
+        -ms-grid-column: 1;
+        -ms-grid-column-span: 3;
+        grid-column: 1 / 4;
+      }
+
+      h3 {
+        display: none;
+      }
+
+      .icon-links {
+        -ms-grid-column: 1;
+      }
+
+      .icon-links a {
+        padding-top: 3.5rem;
+        max-width: 16rem;
+      }
+
+      .links {
+        padding: 0 1.5rem;
+      }
+
+      .featured {
+        -ms-grid-column: 2;
+      }
+
+      .featured h4 {
+        display: block;
+      }
+
+      .top {
+        -ms-grid-column: 3;
+      }
+
+      .top ul {
+        display: -ms-grid;
+        display: grid;
+        -ms-grid-columns: 50% 3rem 50%;
+        grid-template-columns: 50% 50%;
+        -ms-grid-rows: (auto) [7];
+        grid-template-rows: repeat(7, auto);
+        grid-column-gap: 3rem;
+        grid-auto-flow: column;
+      }
+      .top ul > *:nth-child(1) {
+        -ms-grid-row: 1;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(2) {
+        -ms-grid-row: 2;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(3) {
+        -ms-grid-row: 3;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(4) {
+        -ms-grid-row: 4;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(5) {
+        -ms-grid-row: 5;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(6) {
+        -ms-grid-row: 6;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(7) {
+        -ms-grid-row: 7;
+        -ms-grid-column: 1;
+      }
+      .top ul > *:nth-child(8) {
+        -ms-grid-row: 1;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(9) {
+        -ms-grid-row: 2;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(10) {
+        -ms-grid-row: 3;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(11) {
+        -ms-grid-row: 4;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(12) {
+        -ms-grid-row: 5;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(13) {
+        -ms-grid-row: 6;
+        -ms-grid-column: 3;
+      }
+      .top ul > *:nth-child(14) {
+        -ms-grid-row: 7;
+        -ms-grid-column: 3;
+      }
+    }
+  `,
+];