@internetarchive/ia-topnav 2.1.0-alpha-webdev8170.0 → 2.1.0

package/dist/src/styles/media-slider.js

@@ -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;
-    }
-  }
+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;
+    }
+  }
 `;
 //# sourceMappingURL=media-slider.js.map

package/dist/src/styles/media-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-slider.js","sourceRoot":"","sources":["../../../src/styles/media-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAwCK,wBAAwB,GAAG,CAAC;;;;;;;;;uBAS5B,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B9C,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\n\nexport default css`\n  .media-slider-container {\n    position: relative;\n  }\n\n  .overflow-clip {\n    display: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0;\n    height: 0;\n    overflow: hidden;\n    transition: height 0.2s ease;\n  }\n\n  .information-menu {\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0;\n    padding: 0;\n    height: 31.9rem;\n    overflow-x: hidden;\n    font-size: 1.4rem;\n    background: var(--mediaSliderBg);\n  }\n\n  .open {\n    display: block;\n  }\n\n  .hidden {\n    display: none;\n  }\n\n  .info-box {\n    padding: 1rem;\n  }\n\n  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {\n    .overflow-clip.open {\n      display: block;\n      height: 35.8rem;\n      left: 4rem;\n      top: 0;\n    }\n  }\n\n  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n    .overflow-clip {\n      display: block;\n    }\n\n    .information-menu {\n      left: 0;\n      z-index: 3;\n      height: auto;\n      min-height: 21rem;\n      background: var(--mediaSliderDesktopBg);\n      transform: translate(0, -100%);\n      transition: transform 0.2s ease;\n    }\n\n    .overflow-clip.open {\n      height: 22rem;\n    }\n\n    .information-menu.open {\n      transform: translate(0, 0);\n    }\n\n    .info-box {\n      max-width: 100rem;\n      padding: 1.5rem 0;\n      margin: 0 auto;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"media-slider.js","sourceRoot":"","sources":["../../../src/styles/media-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAwCK,wBAAwB,GAAG,CAAC;;;;;;;;;uBAS5B,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B9C,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\r\n\r\nexport default css`\r\n  .media-slider-container {\r\n    position: relative;\r\n  }\r\n\r\n  .overflow-clip {\r\n    display: none;\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    left: 0;\r\n    height: 0;\r\n    overflow: hidden;\r\n    transition: height 0.2s ease;\r\n  }\r\n\r\n  .information-menu {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    left: 0;\r\n    padding: 0;\r\n    height: 31.9rem;\r\n    overflow-x: hidden;\r\n    font-size: 1.4rem;\r\n    background: var(--mediaSliderBg);\r\n  }\r\n\r\n  .open {\r\n    display: block;\r\n  }\r\n\r\n  .hidden {\r\n    display: none;\r\n  }\r\n\r\n  .info-box {\r\n    padding: 1rem;\r\n  }\r\n\r\n  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {\r\n    .overflow-clip.open {\r\n      display: block;\r\n      height: 35.8rem;\r\n      left: 4rem;\r\n      top: 0;\r\n    }\r\n  }\r\n\r\n  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\r\n    .overflow-clip {\r\n      display: block;\r\n    }\r\n\r\n    .information-menu {\r\n      left: 0;\r\n      z-index: 3;\r\n      height: auto;\r\n      min-height: 21rem;\r\n      background: var(--mediaSliderDesktopBg);\r\n      transform: translate(0, -100%);\r\n      transition: transform 0.2s ease;\r\n    }\r\n\r\n    .overflow-clip.open {\r\n      height: 22rem;\r\n    }\r\n\r\n    .information-menu.open {\r\n      transform: translate(0, 0);\r\n    }\r\n\r\n    .info-box {\r\n      max-width: 100rem;\r\n      padding: 1.5rem 0;\r\n      margin: 0 auto;\r\n    }\r\n  }\r\n`;\r\n"]}

package/dist/src/styles/media-subnav.js

@@ -3,158 +3,158 @@ 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;
-      }
-    }
+    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;
+      }
+    }
   `,
 ];
 //# sourceMappingURL=media-subnav.js.map

package/dist/src/styles/media-subnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-subnav.js","sourceRoot":"","sources":["../../../src/styles/media-subnav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEvC,eAAe;IACb,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA0CoB,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8G9C;CACF,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\nimport { subnavListCSS } from './base';\n\nexport default [\n  subnavListCSS,\n  css`\n    img {\n      display: block;\n      width: 90px;\n      height: 90px;\n      margin: 0 auto 1rem auto;\n      border-radius: 45px;\n    }\n\n    h3 {\n      margin-top: 0;\n      font-size: 1.8rem;\n    }\n\n    .icon-links {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: space-evenly;\n      -ms-flex-pack: space-evenly;\n      justify-content: space-evenly;\n      text-align: center;\n    }\n\n    .icon-links a {\n      display: inline-block;\n      width: 12rem;\n      margin-bottom: 1.5rem;\n      overflow: hidden;\n      white-space: nowrap;\n      text-align: center;\n      text-overflow: ellipsis;\n    }\n\n    .icon-links a + a {\n      margin-left: 2rem;\n    }\n\n    .featured h4 {\n      display: none;\n    }\n\n    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n      :host {\n        display: -ms-grid;\n        display: grid;\n        -ms-grid-columns: 40% 20% 40%;\n        grid-template-columns: 40% 20% 40%;\n      }\n\n      .wayback-search {\n        -ms-grid-column: 1;\n        -ms-grid-column-span: 3;\n        grid-column: 1 / 4;\n      }\n\n      h3 {\n        display: none;\n      }\n\n      .icon-links {\n        -ms-grid-column: 1;\n      }\n\n      .icon-links a {\n        padding-top: 3.5rem;\n        max-width: 16rem;\n      }\n\n      .links {\n        padding: 0 1.5rem;\n      }\n\n      .featured {\n        -ms-grid-column: 2;\n      }\n\n      .featured h4 {\n        display: block;\n      }\n\n      .top {\n        -ms-grid-column: 3;\n      }\n\n      .top ul {\n        display: -ms-grid;\n        display: grid;\n        -ms-grid-columns: 50% 3rem 50%;\n        grid-template-columns: 50% 50%;\n        -ms-grid-rows: (auto) [7];\n        grid-template-rows: repeat(7, auto);\n        grid-column-gap: 3rem;\n        grid-auto-flow: column;\n      }\n      .top ul > *:nth-child(1) {\n        -ms-grid-row: 1;\n        -ms-grid-column: 1;\n      }\n      .top ul > *:nth-child(2) {\n        -ms-grid-row: 2;\n        -ms-grid-column: 1;\n      }\n      .top ul > *:nth-child(3) {\n        -ms-grid-row: 3;\n        -ms-grid-column: 1;\n      }\n      .top ul > *:nth-child(4) {\n        -ms-grid-row: 4;\n        -ms-grid-column: 1;\n      }\n      .top ul > *:nth-child(5) {\n        -ms-grid-row: 5;\n        -ms-grid-column: 1;\n      }\n      .top ul > *:nth-child(6) {\n        -ms-grid-row: 6;\n        -ms-grid-column: 1;\n      }\n      .top ul > *:nth-child(7) {\n        -ms-grid-row: 7;\n        -ms-grid-column: 1;\n      }\n      .top ul > *:nth-child(8) {\n        -ms-grid-row: 1;\n        -ms-grid-column: 3;\n      }\n      .top ul > *:nth-child(9) {\n        -ms-grid-row: 2;\n        -ms-grid-column: 3;\n      }\n      .top ul > *:nth-child(10) {\n        -ms-grid-row: 3;\n        -ms-grid-column: 3;\n      }\n      .top ul > *:nth-child(11) {\n        -ms-grid-row: 4;\n        -ms-grid-column: 3;\n      }\n      .top ul > *:nth-child(12) {\n        -ms-grid-row: 5;\n        -ms-grid-column: 3;\n      }\n      .top ul > *:nth-child(13) {\n        -ms-grid-row: 6;\n        -ms-grid-column: 3;\n      }\n      .top ul > *:nth-child(14) {\n        -ms-grid-row: 7;\n        -ms-grid-column: 3;\n      }\n    }\n  `,\n];\n"]}
+{"version":3,"file":"media-subnav.js","sourceRoot":"","sources":["../../../src/styles/media-subnav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEvC,eAAe;IACb,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA0CoB,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8G9C;CACF,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\r\nimport { subnavListCSS } from './base';\r\n\r\nexport default [\r\n  subnavListCSS,\r\n  css`\r\n    img {\r\n      display: block;\r\n      width: 90px;\r\n      height: 90px;\r\n      margin: 0 auto 1rem auto;\r\n      border-radius: 45px;\r\n    }\r\n\r\n    h3 {\r\n      margin-top: 0;\r\n      font-size: 1.8rem;\r\n    }\r\n\r\n    .icon-links {\r\n      display: -webkit-box;\r\n      display: -ms-flexbox;\r\n      display: flex;\r\n      -webkit-box-pack: space-evenly;\r\n      -ms-flex-pack: space-evenly;\r\n      justify-content: space-evenly;\r\n      text-align: center;\r\n    }\r\n\r\n    .icon-links a {\r\n      display: inline-block;\r\n      width: 12rem;\r\n      margin-bottom: 1.5rem;\r\n      overflow: hidden;\r\n      white-space: nowrap;\r\n      text-align: center;\r\n      text-overflow: ellipsis;\r\n    }\r\n\r\n    .icon-links a + a {\r\n      margin-left: 2rem;\r\n    }\r\n\r\n    .featured h4 {\r\n      display: none;\r\n    }\r\n\r\n    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\r\n      :host {\r\n        display: -ms-grid;\r\n        display: grid;\r\n        -ms-grid-columns: 40% 20% 40%;\r\n        grid-template-columns: 40% 20% 40%;\r\n      }\r\n\r\n      .wayback-search {\r\n        -ms-grid-column: 1;\r\n        -ms-grid-column-span: 3;\r\n        grid-column: 1 / 4;\r\n      }\r\n\r\n      h3 {\r\n        display: none;\r\n      }\r\n\r\n      .icon-links {\r\n        -ms-grid-column: 1;\r\n      }\r\n\r\n      .icon-links a {\r\n        padding-top: 3.5rem;\r\n        max-width: 16rem;\r\n      }\r\n\r\n      .links {\r\n        padding: 0 1.5rem;\r\n      }\r\n\r\n      .featured {\r\n        -ms-grid-column: 2;\r\n      }\r\n\r\n      .featured h4 {\r\n        display: block;\r\n      }\r\n\r\n      .top {\r\n        -ms-grid-column: 3;\r\n      }\r\n\r\n      .top ul {\r\n        display: -ms-grid;\r\n        display: grid;\r\n        -ms-grid-columns: 50% 3rem 50%;\r\n        grid-template-columns: 50% 50%;\r\n        -ms-grid-rows: (auto) [7];\r\n        grid-template-rows: repeat(7, auto);\r\n        grid-column-gap: 3rem;\r\n        grid-auto-flow: column;\r\n      }\r\n      .top ul > *:nth-child(1) {\r\n        -ms-grid-row: 1;\r\n        -ms-grid-column: 1;\r\n      }\r\n      .top ul > *:nth-child(2) {\r\n        -ms-grid-row: 2;\r\n        -ms-grid-column: 1;\r\n      }\r\n      .top ul > *:nth-child(3) {\r\n        -ms-grid-row: 3;\r\n        -ms-grid-column: 1;\r\n      }\r\n      .top ul > *:nth-child(4) {\r\n        -ms-grid-row: 4;\r\n        -ms-grid-column: 1;\r\n      }\r\n      .top ul > *:nth-child(5) {\r\n        -ms-grid-row: 5;\r\n        -ms-grid-column: 1;\r\n      }\r\n      .top ul > *:nth-child(6) {\r\n        -ms-grid-row: 6;\r\n        -ms-grid-column: 1;\r\n      }\r\n      .top ul > *:nth-child(7) {\r\n        -ms-grid-row: 7;\r\n        -ms-grid-column: 1;\r\n      }\r\n      .top ul > *:nth-child(8) {\r\n        -ms-grid-row: 1;\r\n        -ms-grid-column: 3;\r\n      }\r\n      .top ul > *:nth-child(9) {\r\n        -ms-grid-row: 2;\r\n        -ms-grid-column: 3;\r\n      }\r\n      .top ul > *:nth-child(10) {\r\n        -ms-grid-row: 3;\r\n        -ms-grid-column: 3;\r\n      }\r\n      .top ul > *:nth-child(11) {\r\n        -ms-grid-row: 4;\r\n        -ms-grid-column: 3;\r\n      }\r\n      .top ul > *:nth-child(12) {\r\n        -ms-grid-row: 5;\r\n        -ms-grid-column: 3;\r\n      }\r\n      .top ul > *:nth-child(13) {\r\n        -ms-grid-row: 6;\r\n        -ms-grid-column: 3;\r\n      }\r\n      .top ul > *:nth-child(14) {\r\n        -ms-grid-row: 7;\r\n        -ms-grid-column: 3;\r\n      }\r\n    }\r\n  `,\r\n];\r\n"]}