@sofidevo/astro-dynamic-header 3.1.0 → 4.0.0

package/src/MobileNav.astro

@@ -18,7 +18,7 @@ export interface Props {
 }
 
 const {
-  type,
+  type = "floating",
   mobileNav__class,
   menuItems = [],
   showHomeLink = true,
@@ -144,134 +144,142 @@ const pagePathname = Astro.url.pathname;
 </nav>
 
 <style>
-  .mobile-header__menu {
-    display: none;
+  /*
+   * base (resets) < components (ours) < utilities (consumer classNames).
+   * Order statement keeps it deterministic regardless of bundling order.
+   */
+  @layer theme, base, components, utilities;
 
-    @media (width < 768px) {
+  @layer components {
+    .mobile-header__menu {
+      display: none;
+
+      @media (width < 768px) {
+        display: flex;
+        flex-direction: column;
+        width: 104vw;
+        height: 100dvh;
+        position: fixed;
+        top: -11px;
+        left: 0;
+        background: var(--bg-color-opaque, #151515);
+        z-index: 20;
+        transition:
+          transform 0.3s ease-in-out,
+          background-color 0.3s ease;
+        transform: translateX(100%);
+        padding: 10rem 2rem 2rem;
+        color: var(--text-color, #fff);
+      }
+
+      a {
+        color: color-mix(
+          in srgb,
+          var(--accent-color, #00ffff) 30%,
+          var(--text-color, #ffffff) 70%
+        );
+      }
+
+      .active {
+        color: var(--accent-color, #00ffff);
+      }
+    }
+
+    .mobile-menu {
       display: flex;
       flex-direction: column;
-      width: 104vw;
-      height: 100dvh;
-      position: fixed;
-      top: -11px;
-      left: 0;
-      background: var(--bg-color-opaque, #151515);
-      z-index: 20;
-      transition:
-        transform 0.3s ease-in-out,
-        background-color 0.3s ease;
-      transform: translateX(100%);
-      padding: 10rem 2rem 2rem;
-      color: var(--text-color, #fff);
+      gap: 1rem;
+      max-height: 76dvh;
+      overflow-y: auto;
+      list-style: none;
+      padding: 0;
+      margin: 0;
     }
 
-    a {
-      color: color-mix(
-        in srgb,
-        var(--accent-color, #00ffff) 30%,
-        var(--text-color, #ffffff) 70%
-      );
+    .mobile-menu li a {
+      border: solid 1px
+        color-mix(in srgb, var(--accent-color, #00ffff) 15%, transparent);
+      border-radius: 4px;
+      width: 100%;
+      height: 4rem;
+      font-size: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 1rem;
+      text-decoration: none;
     }
 
-    .active {
-      color: var(--accent-color, #00ffff) !important;
+    .mobile-details {
+      width: 100%;
+      interpolate-size: allow-keywords;
     }
-  }
 
-  .mobile-menu {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    max-height: 76dvh;
-    overflow-y: auto;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .mobile-menu li a {
-    border: solid 1px
-      color-mix(in srgb, var(--accent-color, #00ffff) 15%, transparent);
-    border-radius: 4px;
-    width: 100%;
-    height: 4rem;
-    font-size: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 1rem;
-    text-decoration: none;
-  }
-
-  .mobile-details {
-    width: 100%;
-    interpolate-size: allow-keywords;
-  }
-
-  .mobile-details summary {
-    background: linear-gradient(
-      to right,
-      color-mix(in srgb, var(--accent-color, #00ffff) 20%, transparent),
-      transparent
-    );
-    border-radius: 4px;
-    width: 100%;
-    height: 4rem;
-    font-size: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 1rem;
-    cursor: pointer;
-    list-style: none;
-  }
+    .mobile-details summary {
+      background: linear-gradient(
+        to right,
+        color-mix(in srgb, var(--accent-color, #00ffff) 20%, transparent),
+        transparent
+      );
+      border-radius: 4px;
+      width: 100%;
+      height: 4rem;
+      font-size: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 1rem;
+      cursor: pointer;
+      list-style: none;
+    }
 
-  .mobile-details::details-content {
-    transition:
-      height 0.5s ease,
-      opacity 0.5s ease,
-      content-visibility 0.5s allow-discrete;
-    opacity: 0;
-    height: 0;
-    overflow: clip;
-  }
+    .mobile-details::details-content {
+      transition:
+        height 0.5s ease,
+        opacity 0.5s ease,
+        content-visibility 0.5s allow-discrete;
+      opacity: 0;
+      height: 0;
+      overflow: clip;
+    }
 
-  .mobile-details:open svg.iconify-arrow {
-    transform: rotate(180deg);
-  }
+    .mobile-details:open svg.iconify-arrow {
+      transform: rotate(180deg);
+    }
 
-  .mobile-details:open::details-content {
-    height: auto;
-    opacity: 1;
-  }
+    .mobile-details:open::details-content {
+      height: auto;
+      opacity: 1;
+    }
 
-  .mobile-submenu,
-  .mobile-subsubmenu {
-    border-left: dashed 1px var(--accent-color, #00ffff);
-    padding-left: 2rem;
-    margin-left: 1rem;
-    margin-top: 1rem;
-    list-style: none;
-    gap: 1rem;
-    display: flex;
-    flex-direction: column;
-  }
+    .mobile-submenu,
+    .mobile-subsubmenu {
+      border-left: dashed 1px var(--accent-color, #00ffff);
+      padding-left: 2rem;
+      margin-left: 1rem;
+      margin-top: 1rem;
+      list-style: none;
+      gap: 1rem;
+      display: flex;
+      flex-direction: column;
+    }
 
-  .mobile-header__menu.is-active {
-    transform: translateX(-7%);
-  }
+    .mobile-header__menu.is-active {
+      transform: translateX(-7%);
+    }
 
-  /* Adjust transform for fullscreen header */
-  .mobile-header__menu--fullscreen.is-active {
-    transform: translate(0%);
-  }
+    /* Adjust transform for fullscreen header */
+    .mobile-header__menu--fullscreen.is-active {
+      transform: translate(0%);
+    }
 
-  .menu__summary {
-    width: 100%;
-    font-size: 1.7rem;
-    height: 5rem;
-    color: inherit;
-    display: flex;
-    align-items: center;
+    .menu__summary {
+      width: 100%;
+      font-size: 1.7rem;
+      height: 5rem;
+      color: inherit;
+      display: flex;
+      align-items: center;
+    }
   }
 </style>

package/src/MoonIcon.astro

@@ -46,61 +46,69 @@ const content = replaceIDs(
 />
 
 <style is:inline>
-  .n1mjuz {
-    fill: var(--svg-color--fff, #fff);
-  }
-  .smogax {
-    fill: none;
-    stroke: white;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: var(--svg-stroke-width--2px, 2px);
-    d: path(
-      "M12 21v1M21 12h1M12 3v-1M3 12h-1M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5"
-    );
-  }
-  .t_ev7s {
-    d: path("M0 0h24v24H0z");
-  }
-  .izfmla {
-    stroke: white;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    stroke-width: var(--svg-stroke-width--2px, 2px);
-    d: path(
-      "M7 6c0 6.08 4.92 11 11 11c0.53 0 1.05 -0.04 1.56 -0.11c-1.61 2.47 -4.39 4.11 -7.56 4.11c-4.97 0 -9 -4.03 -9 -9c0 -3.17 1.64 -5.95 4.11 -7.56c-0.07 0.51 -0.11 1.03 -0.11 1.56Z"
-    );
-  }
-  .abf34n {
-    fill: none;
-    stroke: white;
-    stroke-dasharray: 4;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-  .k7_l3l {
-    d: path("M12 5h1.5M12 5h-1.5M12 5v1.5M12 5v-1.5");
-  }
-  .hhuniw {
-    d: path("M17 11h1.5M17 11h-1.5M17 11v1.5M17 11v-1.5");
-  }
+  /*
+   * base (resets) < components (ours) < utilities (consumer classNames).
+   * Order statement keeps it deterministic regardless of bundling order.
+   */
+  @layer theme, base, components, utilities;
 
-  .z8cgtd {
-    d: path("M20 5h1.5M20 5h-1.5M20 5v1.5M20 5v-1.5");
-  }
-  .drcfta {
-    d: path("M12 4h1.5M12 4h-1.5M12 4v1.5M12 4v-1.5");
-  }
-  .yij7vx {
-    d: path("M18 12h1.5M18 12h-1.5M18 12v1.5M18 12v-1.5");
-  }
-  .emoajy {
-    d: path("M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5");
-  }
-  .f1to6s {
-    d: path("M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5");
-  }
-  .niixso {
-    d: path("M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5");
+  @layer components {
+    .n1mjuz {
+      fill: var(--svg-color--fff, #fff);
+    }
+    .smogax {
+      fill: none;
+      stroke: white;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: var(--svg-stroke-width--2px, 2px);
+      d: path(
+        "M12 21v1M21 12h1M12 3v-1M3 12h-1M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5"
+      );
+    }
+    .t_ev7s {
+      d: path("M0 0h24v24H0z");
+    }
+    .izfmla {
+      stroke: white;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: var(--svg-stroke-width--2px, 2px);
+      d: path(
+        "M7 6c0 6.08 4.92 11 11 11c0.53 0 1.05 -0.04 1.56 -0.11c-1.61 2.47 -4.39 4.11 -7.56 4.11c-4.97 0 -9 -4.03 -9 -9c0 -3.17 1.64 -5.95 4.11 -7.56c-0.07 0.51 -0.11 1.03 -0.11 1.56Z"
+      );
+    }
+    .abf34n {
+      fill: none;
+      stroke: white;
+      stroke-dasharray: 4;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    .k7_l3l {
+      d: path("M12 5h1.5M12 5h-1.5M12 5v1.5M12 5v-1.5");
+    }
+    .hhuniw {
+      d: path("M17 11h1.5M17 11h-1.5M17 11v1.5M17 11v-1.5");
+    }
+
+    .z8cgtd {
+      d: path("M20 5h1.5M20 5h-1.5M20 5v1.5M20 5v-1.5");
+    }
+    .drcfta {
+      d: path("M12 4h1.5M12 4h-1.5M12 4v1.5M12 4v-1.5");
+    }
+    .yij7vx {
+      d: path("M18 12h1.5M18 12h-1.5M18 12v1.5M18 12v-1.5");
+    }
+    .emoajy {
+      d: path("M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5");
+    }
+    .f1to6s {
+      d: path("M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5");
+    }
+    .niixso {
+      d: path("M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5");
+    }
   }
 </style>