feat: add mobile responsive styles (breakpoint 930px)

Add _mobile.scss with responsive overrides for all sections: - Header nav wraps, hero auto-height, grids to single column - Handles path full-width, system/author/buy stacked vertically - Footer contact and legal full-width - Typography scaled down for mobile viewports Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-23 17:29:30 +01:00 · 2026-02-23 17:29:30 +01:00 · f62ba6fbd7
commit f62ba6fbd7
parent 53183a2445
4 changed files with 437 additions and 1 deletions
--- a/assets/css/src/_mobile.scss
+++ b/assets/css/src/_mobile.scss
@ -0,0 +1,246 @@
+@media (max-width: 930px) {
+  // ---- HEADER ----
+  body > header {
+    padding: 1rem var(--padding-body);
+
+    ul {
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 0.25rem 0.5rem;
+
+      li:first-child {
+        width: 100%;
+        text-align: center;
+        font-size: 1.25rem;
+        margin-bottom: 0.5rem;
+      }
+
+      li:not(:first-child) {
+        font-size: 0.75rem;
+      }
+    }
+  }
+
+  // ---- HERO ----
+  section#hero {
+    height: auto;
+    min-height: 60vh;
+    text-align: center;
+    align-items: center;
+    padding: 4rem var(--padding-body) 3rem;
+
+    .title {
+      font-size: 4rem;
+    }
+
+    .subtitle {
+      margin-bottom: 2rem;
+    }
+
+    #preorder-button {
+      position: static;
+    }
+  }
+
+  // ---- QUOTES ----
+  section#quote-full,
+  section#quote {
+    padding: 4rem var(--padding-body);
+
+    blockquote {
+      font-size: 1.5rem;
+    }
+  }
+
+  // ---- THE BOOK ----
+  section#the-book {
+    padding: 4rem var(--padding-body);
+
+    .summary-wrapper {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+
+      .title-wrapper .title {
+        font-size: 2.5rem;
+      }
+    }
+
+    .data-wrapper {
+      flex-wrap: wrap;
+      gap: 1.5rem;
+      justify-content: center;
+
+      .data {
+        width: 40%;
+      }
+    }
+
+    .claim-wrapper {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+
+      img {
+        border-radius: var(--radius-section);
+      }
+
+      .text .big {
+        font-size: 1.75rem;
+      }
+    }
+  }
+
+  // ---- EXCERPTS ----
+  section#excerpts {
+    padding: 4rem var(--padding-body);
+
+    header .title {
+      font-size: 2.5rem;
+    }
+
+    .swiper-slide .item {
+      width: 100%;
+      max-width: 20rem;
+      text-align: center;
+    }
+  }
+
+  // ---- HANDLES ----
+  section#handles {
+    margin: 3rem var(--padding-body);
+
+    header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1rem;
+
+      .title-wrapper .title {
+        font-size: 2.5rem;
+      }
+
+      .subtitle {
+        margin-right: 0;
+      }
+    }
+
+    .path {
+      width: 100%;
+      margin-top: 3rem;
+
+      .step {
+        width: 100%;
+      }
+
+      .step:nth-child(even) {
+        margin-left: 0;
+      }
+    }
+  }
+
+  // ---- SYSTEM ----
+  section#system {
+    flex-direction: column;
+    margin: 3rem var(--padding-body);
+    gap: 3rem;
+
+    .text {
+      max-width: 100%;
+      height: auto;
+
+      .title {
+        font-size: 2.5rem;
+      }
+
+      .bottom {
+        margin-top: 2rem;
+      }
+    }
+
+    figure {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  // ---- EXCERPT (single) ----
+  section#excerpt {
+    padding: 4rem var(--padding-body);
+
+    .wrapper {
+      width: 100%;
+
+      .chapter-title {
+        font-size: 2rem;
+      }
+    }
+  }
+
+  // ---- AUTHOR ----
+  section#author {
+    flex-direction: column;
+    padding: 4rem var(--padding-body);
+    align-items: center;
+
+    img {
+      width: 100%;
+      height: auto;
+      margin-right: 0;
+      margin-bottom: 3rem;
+    }
+
+    .text {
+      width: 100%;
+
+      .author-name {
+        font-size: 2.5rem;
+        margin-bottom: 2rem;
+      }
+    }
+  }
+
+  // ---- BUY ----
+  section#buy {
+    flex-direction: column;
+    padding: 4rem var(--padding-body);
+    align-items: center;
+    gap: 3rem;
+
+    .text {
+      width: 100%;
+      margin-left: 0;
+
+      .title {
+        font-size: 2.5rem;
+      }
+
+      .buy-links {
+        margin-top: 2.5rem;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  // ---- FOOTER ----
+  body > footer {
+    padding: 3rem var(--padding-body);
+
+    header .title {
+      font-size: 2.5rem;
+    }
+
+    .contact {
+      width: 100%;
+      flex-direction: column;
+      gap: 2rem;
+      margin-top: 3rem;
+    }
+
+    .legal {
+      width: 100%;
+      margin-top: 3rem;
+    }
+  }
+}