From ba5a1f8812f8695d834997f4f2e46783496b20a9 Mon Sep 17 00:00:00 2001
From: 0nyr <rascoussier.florian@gmail.com>
Date: Mon, 12 Aug 2024 21:26:48 +0200
Subject: [PATCH] Made theme responsive for small screens.

---
 _layouts/default.html |  2 +-
 assets/css/styles.css | 47 +++++++++++++++++++++++++++++++++++--------
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 616bb7b..714fa25 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -20,7 +20,7 @@
       {% include navigation.html %}
     </header>
 
-    <div class="spacer" id="navbar_spacer"></div>
+    <div id="navbar_spacer"></div>
     
     <main class="content-container">
       {{ content }}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 266e3e6..882f2fa 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -176,6 +176,8 @@ a.current {
 }
 .logo-frontpage {
     /* align center */
+    width: 70vw;
+    max-width: 800px;
     margin: 0 auto;
 }
 
@@ -220,6 +222,40 @@ footer {
     padding: 0;
 }
 
+/* responsive nav, change flex to column */
+/* Change the layout when the viewport width is below 768px */
+@media (max-width: 770px) {
+    /* Navbar */
+    .nav-container {
+        flex-direction: column;
+    }
+
+    .nav-element {
+        margin-top: 1em;
+    }
+
+    #navbar_spacer {
+        height: 300px;
+    }
+
+    footer {
+        flex-direction: column;
+        align-content: flex-start;
+        justify-content: center;
+    }
+}
+
+@media (min-width: 770px) {
+    #navbar_spacer {
+        height: 60px;
+    }
+
+    footer {
+        flex-direction: row;
+        justify-content: space-evenly;
+    }
+}
+
 .nav-element {
     display: flex;
     justify-content: center;
@@ -241,12 +277,9 @@ footer {
     background-color: var(--background-color);
 }
 
-/* Spacers */
-.spacer {
-    height: 60px;
-    width: 100%;
-}
+/* Top Spacer */
 #navbar_spacer {
+    width: 100%;
     grid-area: navspacer;
 }
 
@@ -277,11 +310,9 @@ p {
 /* ########## Footer ########## */
 footer {
     display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
     background: var(--background);
     border-radius: 2em;
-    width: 100%;
+    width: 95%;
     padding: 1em;
 }