Mobile layout tweaks

next.config.mjs

@@ -7,7 +7,8 @@ const __dirname = path.dirname(__filename);
 /** @type {import('next').NextConfig} */
 export default {
   sassOptions: {
-    includePaths: [path.join(__dirname, 'styles')]
+    includePaths: [path.join(__dirname, 'styles')],
+    prependData: `@import "@/styles/variables.scss";`
   },
   output: 'standalone',
   experimental: {

src/components/Banner/Banner.module.scss

@@ -37,6 +37,7 @@
   text-align: center;
   color: white;
   z-index: 1;
+  width: 100%;
 }
 
 .title h1 {
@@ -49,7 +50,7 @@
   margin-bottom: -0.25rem;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: #{$mobile-layout-breakpoint}) {
   .banner,
   .banner img {
     height: calc(6rem + 20vw);
@@ -61,10 +62,10 @@
   }
 
   .title h1 {
-    font-size: 2rem;
+    font-size: min(calc(0.25rem + 6vw), 3rem);
   }
 
   .title h2 {
-    font-size: 1rem;
+    font-size: min(calc(0.125rem + 3vw), 1.5rem);
   }
 }

src/components/Calendar/CalendarTiles.module.scss

@@ -3,6 +3,7 @@
   border-radius: 0.375rem;
   border: solid 0.125rem var(--content-background-color);
   aspect-ratio: 1 / 1;
+  min-width: 0;
   overflow: visible !important;
   position: relative;
 }

src/components/Header/EscapeHatch/EscapeHatch.module.scss

@@ -25,8 +25,21 @@
   color: var(--text-color);
 }
 
-@media (max-width: 768px) {
+@media (max-width: #{$header-breakpoint}) {
   .escapeHatch {
-    padding-left: 1.25rem;
+    padding-left: min(calc(0.25rem + 2vw), 1.25rem);
+  }
+
+  .itlogo {
+    height: min(calc(8vw + 1rem), 3.125rem);
+    width: min(calc(8vw + 1rem), 3.125rem);
+  }
+
+  .title {
+    font-size: min(4.5vw, 1.5rem);
+  }
+
+  .subtitle {
+    font-size: min(3vw, 1rem);
   }
 }

src/components/Header/Header.module.scss

@@ -32,7 +32,7 @@
   display: none;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: #{$header-breakpoint}) {
   .desktop {
     display: none;
   }

src/components/Header/NavDrawer/NavDrawer.module.scss

@@ -3,7 +3,8 @@
   padding: 0.2rem;
   margin-left: 1rem;
   color: var(--text-color);
-  line-height: 1.2rem;
+  height: min(calc(1.5rem + 2.5vw), 2.5rem);
+  width: min(calc(1.5rem + 2.5vw), 2.5rem);
 }
 
 .drawer {
@@ -14,6 +15,7 @@
   left: 0;
   width: 100vw;
   height: 100vh;
+  height: 100dvh;
 }
 
 .content > * {

src/components/Header/Navigation/Dropdown/Dropdown.module.scss

@@ -6,32 +6,49 @@
 }
 
 .dropdownContent {
-  display: none;
-  position: absolute;
+  position: relative;
   min-width: 10rem;
   max-width: 15rem;
   z-index: 3;
 }
 
-@media (hover: hover) {
+.dropdownContainer {
+  position: absolute;
+}
+
+@media (hover: hover) and (not (max-width: #{$header-breakpoint})) {
+  .dropdownContent {
+    display: none;
+  }
   .dropdown:hover .dropdownContent,
   .dropdown:hover .dropdownHitbox {
     display: block;
   }
 }
 
-@media (hover: none) {
-  .dropdownInput:checked + .dropdownLabel + .dropdownHitbox + .dropdownContent {
-    display: block;
+@media (hover: none) or (max-width: #{$header-breakpoint}) {
+  .dropdownContainer {
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  .dropdownContent {
+    overflow-y: hidden;
+  }
+  .dropdownInput:checked
+    + .dropdownLabel
+    + .dropdownHitbox
+    + .dropdownContainer {
+    grid-template-rows: 1fr;
   }
   .dropdownHitbox {
     display: none;
   }
 }
 
-@media (max-width: 768px) {
-  .dropdownContent {
+@media (max-width: #{$header-breakpoint}) {
+  .dropdownContainer {
     position: relative;
+    transition: grid-template-rows 0.5s;
   }
 }
 

src/components/Header/Navigation/Dropdown/Dropdown.tsx

@@ -31,12 +31,12 @@ const Dropdown = ({
       <label htmlFor={id} className={styles.dropdownLabel}>
         {parent}
       </label>
-      <div className={styles.dropdownHitbox} />
+      <div className={`${styles.dropdownHitbox}`} />
 
-      <div
-        className={`${styles.dropdownContent} ${playfair.className} ${contentClassName}`}
-      >
-        {children}
+      <div className={`${styles.dropdownContainer} ${contentClassName}`}>
+        <div className={`${styles.dropdownContent} ${playfair.className}`}>
+          {children}
+        </div>
       </div>
     </div>
   );

src/components/Header/Navigation/Navigation.module.scss

@@ -9,6 +9,12 @@
   margin: 0 1rem;
 }
 
+.navMobile {
+  flex-direction: column !important;
+  align-items: start;
+  justify-content: left;
+}
+
 .navLink {
   font-size: 16px;
   color: var(--text-color);

src/components/Header/Navigation/Navigation.tsx

@@ -14,9 +14,10 @@ type Props = {
 const Navigation = ({ locale, desktop }: Props) => {
   const l = i18nService.getLocale(locale);
   const c = desktop ? styles.desktopDropdown : undefined;
+  const navStyle = desktop ? styles.nav : `${styles.nav} ${styles.navMobile}`;
 
   return (
-    <nav className={styles.nav}>
+    <nav className={navStyle}>
       <DropdownLink
         contentClassName={c}
         text={l.nav.division}

src/components/NewsList/InfiniteScroller.module.scss

@@ -10,7 +10,7 @@
   display: none;
 }
 
-@media (max-width: 768px) {
+@media (max-width: #{$mobile-layout-breakpoint}) {
   .loadButton {
     display: block;
   }

src/components/ThreePaneLayout/ThreePaneLayout.module.scss

@@ -17,7 +17,7 @@
   flex: 3 0 0;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: #{$mobile-layout-breakpoint}) {
   .main {
     flex-direction: column;
     padding: 1rem;

src/styles/variables.scss

@@ -0,0 +1,2 @@
+$header-breakpoint: 1200px;
+$mobile-layout-breakpoint: 1024px;