From 28321e62597f1c6c25104206d13ff438d866bbe8 Mon Sep 17 00:00:00 2001
From: Josh-Dev-Quest <naruto.hiuga.hinata@proton.me>
Date: Sun, 29 Mar 2026 15:02:05 +0200
Subject: [PATCH] Add responsive design, not perfect but working

---
 blog-list.html     |   4 +-
 blog-post.html     |   4 +-
 css/responsive.css | 193 +++++++++++++++++++++++++++++++++++++++++++++
 journey-edit.html  |   5 +-
 login.html         |   4 +-
 map-page.html      |  61 ++++++--------
 6 files changed, 229 insertions(+), 42 deletions(-)
 create mode 100644 css/responsive.css

diff --git a/blog-list.html b/blog-list.html
index 4629644..cbd2412 100644
--- a/blog-list.html
+++ b/blog-list.html
@@ -14,7 +14,9 @@
 
     <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-
+        
+    <!-- Responsive Design -->
+    <link rel="stylesheet" href="css/responsive.css">
     <style>
         * { box-sizing: border-box; }
         body {
diff --git a/blog-post.html b/blog-post.html
index 1605fec..dc4f0b0 100644
--- a/blog-post.html
+++ b/blog-post.html
@@ -9,7 +9,9 @@
     <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-
+    
+    <!-- Responsive Design -->
+    <link rel="stylesheet" href="css/responsive.css">
     <style>
         * { box-sizing: border-box; }
         body {
diff --git a/css/responsive.css b/css/responsive.css
new file mode 100644
index 0000000..389d43f
--- /dev/null
+++ b/css/responsive.css
@@ -0,0 +1,193 @@
+/* ===== RESPONSIVE DESIGN ===== */
+
+/* Large desktop screens (≥ 1400px) */
+@media (min-width: 1400px) {
+    .blog-container,
+    .editor-container,
+    .post-container {
+        max-width: 1400px;
+    }
+    .post-card {
+        transition: transform 0.2s;
+    }
+    .post-card:hover {
+        transform: translateY(-6px);
+    }
+}
+
+/* Tablet landscape and small desktops (768px – 1399px) */
+@media (max-width: 1399px) and (min-width: 768px) {
+    .sidebar {
+        width: 280px;
+    }
+    .blog-container,
+    .editor-container,
+    .post-container {
+        padding: 0 var(--size-4);
+    }
+    .posts-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--size-5);
+    }
+}
+
+/* Tablet portrait (≤ 768px) */
+@media (max-width: 768px) {
+    /* General spacing */
+    .blog-container,
+    .editor-container,
+    .post-container {
+        margin: var(--size-4) auto;
+        padding: 0 var(--size-3);
+    }
+    .post-card,
+    .editor-form,
+    .post-form {
+        padding: var(--size-4);
+    }
+    .post-title {
+        font-size: var(--font-size-5);
+    }
+    
+    /* Blog list – single column */
+    .posts-grid {
+        grid-template-columns: 1fr;
+        gap: var(--size-4);
+    }
+    .post-card-image {
+        height: 180px;
+    }
+    
+    /* Header stacking */
+    .site-header .container {
+        flex-direction: column;
+        gap: var(--size-3);
+    }
+    .site-header .container > div {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+    .filter-tabs {
+        order: 2;
+        margin-top: var(--size-2);
+    }
+    .site-nav {
+        order: 1;
+    }
+    .user-menu {
+        order: 3;
+        margin-left: 0;
+    }
+    
+    /* Journey edit page – markers stack */
+    .marker-card {
+        padding: var(--size-3);
+    }
+    .marker-header h4 {
+        font-size: var(--font-size-2);
+    }
+    
+    /* Buttons – full width on mobile for better touch */
+    .button-group {
+        flex-direction: column;
+    }
+    .button-group .btn,
+    .button-group a.btn {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    /* Map page adjustments */
+    .sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100dvh;
+        width: 85%;
+        max-width: 300px;
+        transform: translateX(-100%);
+        transition: transform 0.3s;
+        box-shadow: var(--shadow-5);
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        z-index: 10;
+    }
+    .sidebar:not(.collapsed) {
+        transform: translateX(0);
+    }
+    /* Map controls */
+    .map-controls {
+        position: absolute;
+        top: var(--size-4);
+        right: var(--size-4);
+        display: flex;
+        flex-direction: column;
+        gap: var(--size-2);
+        z-index: 400;
+    }
+    .mode-indicator {
+        top: var(--size-4);
+        left: var(--size-4);
+        font-size: var(--font-size-0);
+        padding: var(--size-1) var(--size-2);
+    }
+    
+    /* Blog post – chapters */
+    .chapter {
+        padding-left: var(--size-3);
+        margin-bottom: var(--size-4);
+    }
+    .chapter-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--size-1);
+    }
+    .chapter-header h3 {
+        font-size: var(--font-size-3);
+    }
+    
+    /* Comments */
+    .comment-meta {
+        font-size: var(--font-size-0);
+        flex-wrap: wrap;
+    }
+    .delete-comment {
+        margin-left: 0;
+        margin-top: var(--size-1);
+        display: inline-block;
+    }
+    
+    /* Login page */
+    .login-container {
+        width: 90%;
+        padding: var(--size-4);
+        margin: var(--size-4);
+    }
+}
+
+/* Extra small devices (≤ 480px) */
+@media (max-width: 480px) {
+    .post-title {
+        font-size: var(--font-size-4);
+    }
+    .post-meta {
+        font-size: var(--font-size-0);
+    }
+    .chapter-header h3 {
+        font-size: var(--font-size-3);
+    }
+    .marker-card .form-group label {
+        font-size: var(--font-size-0);
+    }
+    .btn {
+        padding: var(--size-2) var(--size-3);
+        font-size: var(--font-size-1);
+    }
+    .toast {
+        bottom: var(--size-2);
+        right: var(--size-2);
+        left: var(--size-2);
+        width: auto;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/journey-edit.html b/journey-edit.html
index f699c57..c4f8ce3 100644
--- a/journey-edit.html
+++ b/journey-edit.html
@@ -14,7 +14,10 @@
 
     <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-
+        
+    <!-- Responsive Design -->
+    <link rel="stylesheet" href="css/responsive.css">
+        
     <style>
         * { box-sizing: border-box; }
         body {
diff --git a/login.html b/login.html
index c1a2f3e..b10e306 100644
--- a/login.html
+++ b/login.html
@@ -14,7 +14,9 @@
 
     <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-
+        
+    <!-- Responsive Design -->
+    <link rel="stylesheet" href="css/responsive.css">
     <style>
         * { box-sizing: border-box; }
         body {
diff --git a/map-page.html b/map-page.html
index 13453bc..42849b4 100644
--- a/map-page.html
+++ b/map-page.html
@@ -30,7 +30,9 @@
             href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
             rel="stylesheet"
         />
-
+        
+        <!-- Responsive Design -->
+        <link rel="stylesheet" href="css/responsive.css">
         <style>
             /* Use Open Props design tokens */
             * {
@@ -71,6 +73,7 @@
                 flex: 1;
                 min-width: 0;
                 position: relative;
+                isolation: isolate;
             }
 
             #map {
@@ -296,16 +299,7 @@
                 padding: var(--size-4);
             }
 
-            /* Map controls */
-            .map-controls {
-                position: absolute;
-                top: var(--size-4);
-                right: var(--size-4);
-                display: flex;
-                flex-direction: column;
-                gap: var(--size-2);
-                z-index: 10;
-            }
+
             .control-btn {
                 width: 40px;
                 height: 40px;
@@ -481,27 +475,6 @@
                 margin: 0;
             }
 
-            /* Responsive */
-            @media (max-width: 768px) {
-                .sidebar {
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    height: 100%;
-                    transform: translateX(-100%);
-                }
-                .sidebar.active {
-                    transform: translateX(0);
-                }
-                .app-container {
-                    flex-direction: column;
-                }
-                .map-controls {
-                    top: auto;
-                    bottom: var(--size-4);
-                    flex-direction: row;
-                }
-            }
             .site-header {
                 background: var(--gray-9);
                 padding: var(--size-4) var(--size-6);
@@ -1398,16 +1371,14 @@
                 window.updateJourneyPath = updateJourneyPath;
                 window.clearAllMarkers = clearAllMarkers;
                 window.setMode = setMode;
-
+                
                 // ==================== START ====================
-                // This function is called after auth check
                 function startMap() {
                     initMap();
                     // Check for journey parameter
                     const urlParams = new URLSearchParams(window.location.search);
                     const journeyToLoad = urlParams.get('journey');
                     if (journeyToLoad) {
-                        // Fetch the journey and load its markers
                         fetch(`${API_BASE}/journeys/${journeyToLoad}`, { credentials: 'include' })
                             .then(res => res.json())
                             .then(journey => {
@@ -1422,14 +1393,28 @@
                     bindEventListeners();
                 }
                 window.startMap = startMap;
-            })();
-
+            })();  // end of IIFE
+    
+            // ==================== SIDEBAR HELPER (outside IIFE) ====================
+            function initSidebar() {
+                const sidebar = document.querySelector('.sidebar');
+                if (!sidebar) return;
+                const isMobile = window.innerWidth <= 768;
+                if (isMobile) {
+                    sidebar.classList.add('collapsed');
+                } else {
+                    sidebar.classList.remove('collapsed');
+                }
+            }
+            
             // ==================== AUTHENTICATION CHECK ====================
             document.addEventListener("DOMContentLoaded", async () => {
                 const authenticated = await checkAuthAndRedirect();
                 if (authenticated) {
                     updateUserMenu();
-                    window.startMap(); // call the map initializer from the IIFE
+                    window.addEventListener('resize', initSidebar);
+                    initSidebar();
+                    window.startMap();
                 }
             });
         </script>