From bf050186fadf48cd971f851747efc983e6561144 Mon Sep 17 00:00:00 2001
From: Filip Rojek <filip@filiprojek.cz>
Date: Fri, 24 Nov 2023 00:46:26 +0100
Subject: [PATCH] responsive design

---
 sass/header.scss    | 32 +++++++++++++++++++++++++++
 sass/main.scss      | 53 +++++++++++++++++++++++++++++++++++++++++++++
 static/svg/menu.svg |  1 +
 templates/base.html | 25 +++++++++++++++++----
 4 files changed, 107 insertions(+), 4 deletions(-)
 create mode 100644 static/svg/menu.svg

diff --git a/sass/header.scss b/sass/header.scss
index 2dc3055..df40e25 100644
--- a/sass/header.scss
+++ b/sass/header.scss
@@ -9,9 +9,15 @@ nav {
         align-items: center;
         gap: 2rem;
     }
+
     .nav-right > a {
         display: flex;
     }
+
+    .nav-btn {
+        display: none;
+    }
+
     a {
         text-decoration: none;
         font-size: 1.5rem;
@@ -26,4 +32,30 @@ nav {
     .nav-left img {
         height: 4rem;
     }
+}
+
+@media only screen and (max-width: 768px) {
+    nav {
+        flex-wrap: wrap;
+    }
+    .nav-right {
+        display: none !important;
+    }
+    .mobile-visible {
+        display: flex !important;
+        flex-direction: column;
+        justify-content: center;
+        width: 100%;
+        margin-top: 2rem;
+    }
+
+    .nav-btn {
+        display: flex !important;
+        align-items: center;
+
+        img {
+            height: 3rem;
+            cursor: pointer;
+        }
+    }
 }
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index d943400..9e9845c 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -16,6 +16,8 @@ main {
         padding: 2rem;
         background-color: var(--clr-cards);
         border-radius: 15px;
+        position: sticky;
+        top: 0;
 
         section#vstupenky-wrapper {
             display: flex;
@@ -75,3 +77,54 @@ main {
         }
     }
 }
+
+@media only screen and (max-width: 500px) {
+    #vstupenky-wrapper {
+        width: 100vw !important;
+    }
+    .vstupenky {
+        font-size: 1.5rem !important;
+    }
+}
+ /* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+    aside, main section#news {
+        width: 95vw !important;
+    }
+    body {
+        background-color: red;
+    }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) and (max-width: 768px) {
+    aside, main section#news {
+        width: 90vw !important;
+    }
+}
+
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+    
+    aside, main section#news {
+        width: 60vw !important;
+    } 
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (max-width: 992px) {
+main {
+        flex-direction: column;
+        align-items: center;
+    }
+    .aside-wrapper {
+        order: -1;
+    }
+
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (max-width: 1200px) {
+
+}
diff --git a/static/svg/menu.svg b/static/svg/menu.svg
new file mode 100644
index 0000000..2f427e9
--- /dev/null
+++ b/static/svg/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 45b9044..92ffe89 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -19,10 +19,13 @@
         <div class="nav-left">
             <a href="/"><img src="/img/pkmples_logo.png" alt="pkmples logo"></a>
         </div>
-        <div class="nav-right">
-            <a href="https://www.facebook.com/events/823114292589147" target="_blank"><img src="/svg/facebook.svg" alt="facebook logo"></img></a>
-            <a href="https://www.instagram.com/pkm.hub" target="_blank"><img src="/svg/instagram.svg" alt="instagram logo"></img></a>
-            <a href="https://www.youtube.com/@pkmhub" target="_blank"><img src="/svg/youtube.svg" alt="youtube logo"></img></a>
+        <div class="nav-btn">
+            <img src="/svg/menu.svg" alt="menu icon">
+        </div>
+        <div class="nav-right mobile-visible">
+            <a href="https://www.facebook.com/events/823114292589147" target="_blank"><img src="/svg/facebook.svg" alt="facebook logo"></a>
+            <a href="https://www.instagram.com/pkm.hub" target="_blank"><img src="/svg/instagram.svg" alt="instagram logo"></a>
+            <a href="https://www.youtube.com/@pkmhub" target="_blank"><img src="/svg/youtube.svg" alt="youtube logo"></a>
             <a href="/galerie">galerie</a>
             <a href="/archiv">archiv</a>
         </div>
@@ -31,6 +34,20 @@
     <main>
         {% block main %} {% endblock main %}
     </main>
+
+    <script>
+        const navBtn = document.querySelector(".nav-btn img")
+        let navVisible = false
+        navBtn.addEventListener("click", () => {
+            if(navVisible) {
+                document.querySelector(".nav-right").classList.add("mobile-visible")
+            } else {
+                document.querySelector(".nav-right").classList.remove("mobile-visible")
+            }
+
+            navVisible = !navVisible
+        })
+    </script>
 </body>
 
 </html>
\ No newline at end of file