mobile menu text styles

Author: outofambit

src/components/Nav/JumpToLinks.tsx

@@ -26,7 +26,7 @@ export const JumpToLinks = ({
         tabIndex={-1}
       >
         <span>{heading}</span>
-        <div class="pt-xs">
+        <div class="pt-[6px]">
           <Icon kind={isOpen ? "chevron-up" : "chevron-down"} />
         </div>
       </button>
@@ -35,10 +35,7 @@ export const JumpToLinks = ({
           {links?.map((link) => (
             <li
               key={link.label}
-              class={`
-              ${link.size === "small" ? "text-body-caption" : "text-body capitalize"}
-                ${link.current ? "underline" : ""}
-                `}
+              class={`${styles.linklabel} ${link.size ?? ""} ${link.current ? "current" : ""}`}
             >
               <a href={link.url}>{link.label}</a>
             </li>

src/components/Nav/MainNavLinks.tsx

@@ -42,12 +42,7 @@ export const MainNavLinks = ({
         <Logo />
       </a>
 
-      <button
-        class={styles.toggle}
-        onClick={handleToggle}
-        aria-hidden="true"
-        tabIndex={-1}
-      >
+      <button onClick={handleToggle} aria-hidden="true" tabIndex={-1}>
         <div class={styles.mobileMenuLabel}>
           {isOpen ? (
             <Icon kind="close" />

src/components/Nav/styles.module.scss

@@ -1,4 +1,5 @@
 @import "/styles/variables.scss";
+@import "/styles/global.scss";
 
 .container {
   height: fit-content;
@@ -39,6 +40,13 @@
     height: unset;
   }
 
+  ul {
+    font-size: 1.5rem;
+    line-height: 1.167;
+    -webkit-text-stroke-width: 0.15px;
+    margin-bottom: var(--spacing-xs);
+  }
+
   @media (min-width: $breakpoint-tablet) {
     display: grid;
     grid-auto-flow: column;
@@ -58,11 +66,14 @@
       display: flex;
       gap: var(--spacing-xs);
       padding: 0;
-      margin-bottom: var(--spacing-xs);
+      margin-bottom: 10px;
     }
 
     ul {
       grid-column: 1 / 2;
+      font-size: 1.25rem;
+      line-height: 1.2;
+      -webkit-text-stroke-width: 0.15px;
     }
 
     &:global(.open),
@@ -81,13 +92,14 @@
     top: -0.25rem;
 
     svg {
-      height: 1.25rem;
-      width: 1.25rem;
+      height: 1rem;
+      width: 1rem;
     }
     @media (min-width: $breakpoint-tablet) {
       display: none !important;
     }
   }
+
   .desktopMenuLabel {
     display: none;
     @media (min-width: $breakpoint-tablet) {
@@ -130,6 +142,10 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     padding: var(--spacing-sm) 1.25rem;
+    font-size: 1.5rem;
+    line-height: 1.167;
+    -webkit-text-stroke-width: 0.15px;
+    max-height: 300px;
 
     /* Hide scrollbar */
     // Chrome, Safari, Edge, Opera
@@ -165,10 +181,17 @@
     ul {
       padding-bottom: var(--spacing-md);
       display: inline-block;
+      font-size: 1rem;
+      line-height: 1.25;
+      -webkit-text-stroke-width: 0.05px;
     }
   }
 }
 
+:global(.reference-item) .jumpto ul {
+  grid-template-columns: 1fr;
+}
+
 .buttonlink {
   display: flex;
   width: 100%;
@@ -182,6 +205,38 @@
     color: var(--sidebar-bg-color);
     text-decoration: none;
   }
+  font-size: 1.5rem;
+  line-height: 1.167;
+  -webkit-text-stroke-width: 0.15px;
+
+  @media (min-width: $breakpoint-tablet) {
+    font-size: 1.25rem;
+    line-height: 1.2;
+    -webkit-text-stroke-width: 0.15px;
+  }
+}
+
+.linklabel {
+  &:global(.current) {
+    text-decoration-line: underline;
+  }
+
+  &:not(:global(.small)) {
+    font-size: 1.5rem;
+    line-height: 1.167;
+    -webkit-text-stroke-width: 0.15px;
+  }
+  &:global(.small) {
+    @extend .text-body;
+  }
+
+  @media (min-width: $breakpoint-tablet) {
+    &:not(&:global(.small)) {
+      font-size: 1.25rem;
+      line-height: 1.2;
+      -webkit-text-stroke-width: 0.15px;
+    }
+  }
 }
 
 /* Interaction */