mobile-first now

src/css/shared.scss

@@ -17,14 +17,14 @@ body {
   background: var(--bg);
   color: var(--ink);
   font-family: var(--font-body);
-  font-size: 26px;
+  font-size: 18px;
   line-height: 1.7;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   overflow-x: clip;
 
-  @include m.bp(m.$bp-laptop) {
-    font-size: 18px;
+  @include m.bp(m.$bp-laptop, min) {
+    font-size: 26px;
   }
 }
 
@@ -722,76 +722,147 @@ body {
 }
 
 // ===== Responsive =====
-@include m.bp(m.$bp-laptop) {
+
+// Base: mobile — single column, compact padding
+.menu-close {
+  top: 18px;
+  right: 20px;
+}
+
+.menu-inner {
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas: "head" "list" "side";
+  padding: 70px 20px 24px;
+  gap: 16px;
+}
+
+.menu-list {
+  min-height: 55vh;
+  padding-right: 8px;
+}
+
+.menu-side {
+  border-left: none;
+  border-top: 1px solid var(--rule);
+  padding-left: 0;
+  padding-top: 16px;
+  gap: 12px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  .menu-section-label {
+    display: none;
+  }
+}
+
+.menu-about {
+  display: none;
+}
+
+.menu-progress {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+  flex: 1;
+  min-width: 200px;
+}
+
+.menu-chapters {
+  grid-template-columns: 1fr;
+
+  a {
+    font-size: 19px;
+    padding: 12px 0 12px 10px;
+  }
+
+  .current::after {
+    display: none;
+  }
+}
+
+.menu-head {
+  gap: 16px;
+}
+
+// Tablet and up ($bp-mobile = 600px)
+@include m.bp(m.$bp-mobile, min) {
+  .menu-close {
+    top: 28px;
+    right: 40px;
+  }
+
   .menu-inner {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr auto;
-    grid-template-areas: "head" "list" "side";
     padding: 80px 32px 24px;
-    gap: 16px;
   }
 
   .menu-list {
     min-height: 50vh;
-    padding-right: 8px;
+  }
+
+  .menu-head {
+    gap: 32px;
+  }
+}
+
+// Desktop and up ($bp-laptop = 1100px)
+@include m.bp(m.$bp-laptop, min) {
+  .menu-inner {
+    grid-template-columns: 1fr 360px;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "head head" "list side";
+    padding: 90px 64px 48px;
+    gap: 0 64px;
+  }
+
+  .menu-list {
+    padding-right: 24px;
   }
 
   .menu-side {
-    border-left: none;
-    border-top: 1px solid var(--rule);
-    padding-left: 0;
-    padding-top: 16px;
-    gap: 12px;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
+    border-left: 1px solid var(--rule);
+    border-top: none;
+    padding-left: 40px;
+    padding-top: 0;
+    gap: 24px;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
 
     .menu-section-label {
-      display: none;
+      display: flex;
     }
   }
 
   .menu-about {
-    display: none;
+    display: block;
   }
 
   .menu-progress {
-    margin-top: 0;
-    padding-top: 0;
-    border-top: none;
-    flex: 1;
-    min-width: 200px;
+    margin-top: auto;
+    padding-top: 24px;
+    border-top: 1px solid var(--rule);
+    flex: unset;
+    min-width: unset;
   }
 
   .menu-chapters {
-    grid-template-columns: 1fr;
-  }
-}
-
-@include m.bp(m.$bp-mobile) {
-  .menu-close {
-    top: 18px;
-    right: 20px;
-  }
-  .menu-inner {
-    padding: 70px 20px 24px;
-  }
-  .menu-list {
-    min-height: 55vh;
-  }
+    grid-template-columns: 1fr 1fr;
 
-  .menu-chapters {
     a {
-      font-size: 19px;
-      padding: 12px 0 12px 10px;
+      font-size: inherit;
+      padding: 14px 0 14px 14px;
     }
+
     .current::after {
-      display: none;
+      display: block;
     }
   }
 
   .menu-head {
-    gap: 16px;
+    gap: 32px;
   }
 }

src/css/templates/home.scss

@@ -47,7 +47,11 @@
   flex: 1;
   display: grid;
   grid-template-rows: 1fr auto;
-  padding: 140px 80px 60px;
+  padding: 120px 32px 40px;
+
+  @include m.bp(m.$bp-tablet, min) {
+    padding: 140px 80px 60px;
+  }
 }
 
 .cover-titleblock {
@@ -110,11 +114,16 @@
 .cover-bottom {
   align-self: end;
   display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 60px;
+  grid-template-columns: 1fr;
+  gap: 32px;
   align-items: end;
   padding-top: 60px;
   border-top: 1px solid var(--rule);
+
+  @include m.bp(m.$bp-tablet, min) {
+    grid-template-columns: auto 1fr auto;
+    gap: 60px;
+  }
 }
 
 .cover-cta {
@@ -143,7 +152,11 @@
   color: var(--ink-faint);
   line-height: 1.8;
   max-width: 280px;
-  text-align: right;
+  text-align: left;
+
+  @include m.bp(m.$bp-tablet, min) {
+    text-align: right;
+  }
 
   .label {
     color: var(--accent);
@@ -161,20 +174,30 @@
 // ===== Chapter index =====
 .index-section {
   position: relative;
-  padding: 160px 80px 120px;
+  padding: 100px 32px;
   background: var(--bg-2);
   border-top: 1px solid var(--rule);
+
+  @include m.bp(m.$bp-tablet, min) {
+    padding: 160px 80px 120px;
+  }
 }
 
 .index-header {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 80px;
-  margin-bottom: 100px;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  margin-bottom: 60px;
   max-width: 1400px;
   margin-left: auto;
   margin-right: auto;
 
+  @include m.bp(m.$bp-tablet, min) {
+    grid-template-columns: 1fr 1fr;
+    gap: 80px;
+    margin-bottom: 100px;
+  }
+
   h2 {
     font-family: var(--font-display);
     font-size: clamp(56px, 7vw, 96px);
@@ -207,9 +230,9 @@
 
   a {
     display: grid;
-    grid-template-columns: 100px 1fr 200px 80px;
+    grid-template-columns: 60px 1fr 60px;
     align-items: center;
-    gap: 40px;
+    gap: 20px;
     padding: 36px 24px;
     text-decoration: none;
     color: var(--ink);
@@ -236,6 +259,11 @@
       background: var(--accent);
       transition: width 0.4s;
     }
+
+    @include m.bp(m.$bp-tablet, min) {
+      grid-template-columns: 100px 1fr 200px 80px;
+      gap: 40px;
+    }
   }
 }
 
@@ -256,6 +284,11 @@
 .index-meta {
   @include m.mono-label(11px, 0.2em);
   color: var(--ink-faint);
+  display: none;
+
+  @include m.bp(m.$bp-tablet, min) {
+    display: block;
+  }
 }
 
 .index-arrow {
@@ -269,17 +302,25 @@
 
 // ===== Footer =====
 .cover-footer {
-  padding: 80px 80px 60px;
+  padding: 80px 32px 60px;
   border-top: 1px solid var(--rule);
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: 1fr;
   gap: 40px;
   align-items: center;
   @include m.mono-label(10px, 0.25em);
   color: var(--ink-faint);
 
-  .center { color: var(--accent); text-align: center; }
-  .right { text-align: right; }
+  .center { color: var(--accent); text-align: left; }
+  .right { text-align: left; }
+
+  @include m.bp(m.$bp-tablet, min) {
+    padding: 80px 80px 60px;
+    grid-template-columns: 1fr auto 1fr;
+
+    .center { text-align: center; }
+    .right { text-align: right; }
+  }
 }
 
 // Floating numerals in cover bg
@@ -302,21 +343,3 @@
     &:nth-child(2) { font-size: 200px; top: 60%; right: 6%; color: rgba(232, 226, 214, 0.025); }
   }
 }
-
-// ===== Responsive =====
-@include m.bp(m.$bp-tablet) {
-  .cover-content { padding: 120px 32px 40px; }
-  .cover-bottom { grid-template-columns: 1fr; gap: 32px; }
-  .cover-warning { text-align: left; }
-
-  .index-section { padding: 100px 32px; }
-  .index-list a { grid-template-columns: 60px 1fr 60px; gap: 20px; }
-  .index-meta { display: none; }
-  .index-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 60px; }
-
-  .cover-footer {
-    grid-template-columns: 1fr;
-
-    .center, .right { text-align: left; }
-  }
-}

www/assets/css/templates/home.css.map

-{"version":3,"sources":["../../../../src/css/templates/home.scss","../../../../src/css/_mixins.scss"],"names":[],"mappings":"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","file":"home.css"}
\ No newline at end of file
+{"version":3,"sources":["../../../../src/css/templates/home.scss","../../../../src/css/_mixins.scss"],"names":[],"mappings":"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","file":"home.css"}
\ No newline at end of file