From 7a8efa372bd30c1c89296a4d690eee7bb122d4bf Mon Sep 17 00:00:00 2001
From: Goostaf <gasplund2@gmail.com>
Date: Sat, 29 Jun 2024 12:08:46 +0200
Subject: [PATCH 1/7] Use entire element width

---
 src/components/Banner/Banner.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Banner/Banner.module.scss b/src/components/Banner/Banner.module.scss
index 179b7cdd..00eaa268 100644
--- a/src/components/Banner/Banner.module.scss
+++ b/src/components/Banner/Banner.module.scss
@@ -37,6 +37,7 @@
   text-align: center;
   color: white;
   z-index: 1;
+  width: 100%;
 }
 
 .title h1 {

From 5ff28c3e4929a3cd93c706a1674f776d39172cfb Mon Sep 17 00:00:00 2001
From: Goostaf <gasplund2@gmail.com>
Date: Sat, 29 Jun 2024 12:24:13 +0200
Subject: [PATCH 2/7] Scale according to viewport width

---
 src/components/Banner/Banner.module.scss          |  4 ++--
 .../Header/EscapeHatch/EscapeHatch.module.scss    | 15 ++++++++++++++-
 .../Header/NavDrawer/NavDrawer.module.scss        |  3 ++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/Banner/Banner.module.scss b/src/components/Banner/Banner.module.scss
index 00eaa268..cacf36d4 100644
--- a/src/components/Banner/Banner.module.scss
+++ b/src/components/Banner/Banner.module.scss
@@ -62,10 +62,10 @@
   }
 
   .title h1 {
-    font-size: 2rem;
+    font-size: calc(0.5rem + 4vw);
   }
 
   .title h2 {
-    font-size: 1rem;
+    font-size: calc(0.5rem + 1.5vw);
   }
 }
diff --git a/src/components/Header/EscapeHatch/EscapeHatch.module.scss b/src/components/Header/EscapeHatch/EscapeHatch.module.scss
index 8264b16a..60de0880 100644
--- a/src/components/Header/EscapeHatch/EscapeHatch.module.scss
+++ b/src/components/Header/EscapeHatch/EscapeHatch.module.scss
@@ -27,6 +27,19 @@
 
 @media (max-width: 768px) {
   .escapeHatch {
-    padding-left: 1.25rem;
+    padding-left: calc(0.25rem + 2vw);
+  }
+
+  .itlogo {
+    height: calc(1rem + 4vw);
+    width: calc(1rem + 4vw);
+  }
+
+  .title {
+    font-size: calc(0.5rem + 2vw);
+  }
+
+  .subtitle {
+    font-size: calc(0.5rem + 1vw);
   }
 }
diff --git a/src/components/Header/NavDrawer/NavDrawer.module.scss b/src/components/Header/NavDrawer/NavDrawer.module.scss
index 8105b7f2..e6ab983a 100644
--- a/src/components/Header/NavDrawer/NavDrawer.module.scss
+++ b/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: calc(1.5rem + 2.5vw);
+  width: calc(1.5rem + 2.5vw);
 }
 
 .drawer {

From 23fb2cbf0df6a020b66e52af9aa39971664cb950 Mon Sep 17 00:00:00 2001
From: Goostaf <gasplund2@gmail.com>
Date: Sat, 29 Jun 2024 13:43:45 +0200
Subject: [PATCH 3/7] Adjust size more dynamically

---
 src/components/Banner/Banner.module.scss               |  4 ++--
 .../Header/EscapeHatch/EscapeHatch.module.scss         | 10 +++++-----
 src/components/Header/NavDrawer/NavDrawer.module.scss  |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Banner/Banner.module.scss b/src/components/Banner/Banner.module.scss
index cacf36d4..6a1fc529 100644
--- a/src/components/Banner/Banner.module.scss
+++ b/src/components/Banner/Banner.module.scss
@@ -62,10 +62,10 @@
   }
 
   .title h1 {
-    font-size: calc(0.5rem + 4vw);
+    font-size: min(calc(0.25rem + 6vw), 3rem);
   }
 
   .title h2 {
-    font-size: calc(0.5rem + 1.5vw);
+    font-size: min(calc(0.125rem + 3vw), 1.5rem);
   }
 }
diff --git a/src/components/Header/EscapeHatch/EscapeHatch.module.scss b/src/components/Header/EscapeHatch/EscapeHatch.module.scss
index 60de0880..d5ae9c04 100644
--- a/src/components/Header/EscapeHatch/EscapeHatch.module.scss
+++ b/src/components/Header/EscapeHatch/EscapeHatch.module.scss
@@ -27,19 +27,19 @@
 
 @media (max-width: 768px) {
   .escapeHatch {
-    padding-left: calc(0.25rem + 2vw);
+    padding-left: min(calc(0.25rem + 2vw), 1.25rem);
   }
 
   .itlogo {
-    height: calc(1rem + 4vw);
-    width: calc(1rem + 4vw);
+    height: min(calc(8vw + 1rem), 3.125rem);
+    width: min(calc(8vw + 1rem), 3.125rem);
   }
 
   .title {
-    font-size: calc(0.5rem + 2vw);
+    font-size: min(4.5vw, 1.5rem);
   }
 
   .subtitle {
-    font-size: calc(0.5rem + 1vw);
+    font-size: min(3vw, 1rem);
   }
 }
diff --git a/src/components/Header/NavDrawer/NavDrawer.module.scss b/src/components/Header/NavDrawer/NavDrawer.module.scss
index e6ab983a..2ef53011 100644
--- a/src/components/Header/NavDrawer/NavDrawer.module.scss
+++ b/src/components/Header/NavDrawer/NavDrawer.module.scss
@@ -3,8 +3,8 @@
   padding: 0.2rem;
   margin-left: 1rem;
   color: var(--text-color);
-  height: calc(1.5rem + 2.5vw);
-  width: calc(1.5rem + 2.5vw);
+  height: min(calc(1.5rem + 2.5vw), 2.5rem);
+  width: min(calc(1.5rem + 2.5vw), 2.5rem);
 }
 
 .drawer {

From 493a7d6298d073f50115caa7a2f30212d01c5722 Mon Sep 17 00:00:00 2001
From: Goostaf <gasplund2@gmail.com>
Date: Sat, 29 Jun 2024 16:38:26 +0200
Subject: [PATCH 4/7] Sliding open and close

---
 .../Calendar/CalendarTiles.module.scss        |  1 +
 .../Navigation/Dropdown/Dropdown.module.scss  | 31 ++++++++++++++-----
 .../Header/Navigation/Dropdown/Dropdown.tsx   | 10 +++---
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/Calendar/CalendarTiles.module.scss b/src/components/Calendar/CalendarTiles.module.scss
index d22a6ce9..a17953b0 100644
--- a/src/components/Calendar/CalendarTiles.module.scss
+++ b/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;
 }
diff --git a/src/components/Header/Navigation/Dropdown/Dropdown.module.scss b/src/components/Header/Navigation/Dropdown/Dropdown.module.scss
index 425849ed..de67d40a 100644
--- a/src/components/Header/Navigation/Dropdown/Dropdown.module.scss
+++ b/src/components/Header/Navigation/Dropdown/Dropdown.module.scss
@@ -6,23 +6,39 @@
 }
 
 .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: 768px)) {
+  .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: 768px) {
+  .dropdownContainer {
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  .dropdownContent {
+    overflow-y: hidden;
+  }
+  .dropdownInput:checked
+    + .dropdownLabel
+    + .dropdownHitbox
+    + .dropdownContainer {
+    grid-template-rows: 1fr;
   }
   .dropdownHitbox {
     display: none;
@@ -30,8 +46,9 @@
 }
 
 @media (max-width: 768px) {
-  .dropdownContent {
+  .dropdownContainer {
     position: relative;
+    transition: grid-template-rows 0.5s;
   }
 }
 
diff --git a/src/components/Header/Navigation/Dropdown/Dropdown.tsx b/src/components/Header/Navigation/Dropdown/Dropdown.tsx
index c4f8d783..d592e673 100644
--- a/src/components/Header/Navigation/Dropdown/Dropdown.tsx
+++ b/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>
   );

From d904738ce7db0236d585eeb00ae03572d3260aab Mon Sep 17 00:00:00 2001
From: Goostaf <gasplund2@gmail.com>
Date: Sat, 29 Jun 2024 16:47:59 +0200
Subject: [PATCH 5/7] Align drawer items to the left

---
 src/components/Header/Navigation/Navigation.module.scss | 6 ++++++
 src/components/Header/Navigation/Navigation.tsx         | 3 ++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Header/Navigation/Navigation.module.scss b/src/components/Header/Navigation/Navigation.module.scss
index 755034a5..42ccc4e0 100644
--- a/src/components/Header/Navigation/Navigation.module.scss
+++ b/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);
diff --git a/src/components/Header/Navigation/Navigation.tsx b/src/components/Header/Navigation/Navigation.tsx
index f4906ad7..2c2ecfd1 100644
--- a/src/components/Header/Navigation/Navigation.tsx
+++ b/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}

From dca9ac10328b526af19842e4f89ce4e74e122e1e Mon Sep 17 00:00:00 2001
From: Goostaf <gasplund2@gmail.com>
Date: Sat, 29 Jun 2024 16:59:49 +0200
Subject: [PATCH 6/7] Adjust height to dynamic viewport dimensions

---
 src/components/Header/NavDrawer/NavDrawer.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Header/NavDrawer/NavDrawer.module.scss b/src/components/Header/NavDrawer/NavDrawer.module.scss
index 2ef53011..883ba549 100644
--- a/src/components/Header/NavDrawer/NavDrawer.module.scss
+++ b/src/components/Header/NavDrawer/NavDrawer.module.scss
@@ -15,6 +15,7 @@
   left: 0;
   width: 100vw;
   height: 100vh;
+  height: 100dvh;
 }
 
 .content > * {

From 4e296ca7eff7964a60fa27b90135e946f10a43c5 Mon Sep 17 00:00:00 2001
From: Goostaf <gasplund2@gmail.com>
Date: Sat, 29 Jun 2024 17:25:48 +0200
Subject: [PATCH 7/7] Use global variables for media width queries

---
 next.config.mjs                                             | 3 ++-
 src/components/Banner/Banner.module.scss                    | 2 +-
 src/components/Header/EscapeHatch/EscapeHatch.module.scss   | 2 +-
 src/components/Header/Header.module.scss                    | 2 +-
 .../Header/Navigation/Dropdown/Dropdown.module.scss         | 6 +++---
 src/components/NewsList/InfiniteScroller.module.scss        | 2 +-
 src/components/ThreePaneLayout/ThreePaneLayout.module.scss  | 2 +-
 src/styles/variables.scss                                   | 2 ++
 8 files changed, 12 insertions(+), 9 deletions(-)
 create mode 100644 src/styles/variables.scss

diff --git a/next.config.mjs b/next.config.mjs
index 0ce0998f..a8febca6 100644
--- a/next.config.mjs
+++ b/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: {
diff --git a/src/components/Banner/Banner.module.scss b/src/components/Banner/Banner.module.scss
index 6a1fc529..9426018c 100644
--- a/src/components/Banner/Banner.module.scss
+++ b/src/components/Banner/Banner.module.scss
@@ -50,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);
diff --git a/src/components/Header/EscapeHatch/EscapeHatch.module.scss b/src/components/Header/EscapeHatch/EscapeHatch.module.scss
index d5ae9c04..e5dc72bf 100644
--- a/src/components/Header/EscapeHatch/EscapeHatch.module.scss
+++ b/src/components/Header/EscapeHatch/EscapeHatch.module.scss
@@ -25,7 +25,7 @@
   color: var(--text-color);
 }
 
-@media (max-width: 768px) {
+@media (max-width: #{$header-breakpoint}) {
   .escapeHatch {
     padding-left: min(calc(0.25rem + 2vw), 1.25rem);
   }
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index c3efe896..f4fb6ec8 100644
--- a/src/components/Header/Header.module.scss
+++ b/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;
   }
diff --git a/src/components/Header/Navigation/Dropdown/Dropdown.module.scss b/src/components/Header/Navigation/Dropdown/Dropdown.module.scss
index de67d40a..fc6e284e 100644
--- a/src/components/Header/Navigation/Dropdown/Dropdown.module.scss
+++ b/src/components/Header/Navigation/Dropdown/Dropdown.module.scss
@@ -16,7 +16,7 @@
   position: absolute;
 }
 
-@media (hover: hover) and (not (max-width: 768px)) {
+@media (hover: hover) and (not (max-width: #{$header-breakpoint})) {
   .dropdownContent {
     display: none;
   }
@@ -26,7 +26,7 @@
   }
 }
 
-@media (hover: none) or (max-width: 768px) {
+@media (hover: none) or (max-width: #{$header-breakpoint}) {
   .dropdownContainer {
     display: grid;
     grid-template-rows: 0fr;
@@ -45,7 +45,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: #{$header-breakpoint}) {
   .dropdownContainer {
     position: relative;
     transition: grid-template-rows 0.5s;
diff --git a/src/components/NewsList/InfiniteScroller.module.scss b/src/components/NewsList/InfiniteScroller.module.scss
index 95cfd306..273cfa3e 100644
--- a/src/components/NewsList/InfiniteScroller.module.scss
+++ b/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;
   }
diff --git a/src/components/ThreePaneLayout/ThreePaneLayout.module.scss b/src/components/ThreePaneLayout/ThreePaneLayout.module.scss
index 6fa4bf99..9cea6b98 100644
--- a/src/components/ThreePaneLayout/ThreePaneLayout.module.scss
+++ b/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;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 00000000..be48f9ea
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,2 @@
+$header-breakpoint: 1200px;
+$mobile-layout-breakpoint: 1024px;