Improved layouting

templates/components/habit_lists.html

@@ -1,4 +1,4 @@
-<div class="flex-fill col-md-8 col-12 card bg-light p-6 mb-6">
+<div class="flex-fill col-md-7 col-lg-8 col-12 card bg-light p-6 mb-6">
 
     <!-- Listen erstellen -->
     <div class="row mb-3">

templates/components/heatmap.html

@@ -1,5 +1,5 @@
 
-<div class="flex-fill col-md-4 col-12 card bg-light mb-6">
+<div class="flex-fill col-md-5 col-lg-4 col-12 card bg-light mb-6">
     <div class="card-body">
         <h5 class="card-title">📅 Heatmap</h5>
         <div id="heatmap"></div>

templates/index.html

@@ -27,8 +27,54 @@
         table-layout: fixed;
     }
 
+    @media (max-width: 1400px) {
+        .day {
+            width: 40px;
+            height: 40px;
+        }
+    }
 
+    @media (max-width: 1200px) {
+        .day {
+            width: 35px;
+            height: 35px;
+        }
+    }
 
+    @media (max-width: 992px) {
+        .day {
+            width: 30px;
+            height: 30px;
+        }
+    }
+
+    @media (max-width: 770px) {
+        .day {
+            width: 50px;
+            height: 50px;
+        }
+    }
+
+    @media (max-width: 450px) {
+        .day {
+            width: 40px;
+            height: 40px;
+        }
+    }
+
+    @media (max-width: 400px) {
+        .day {
+            width: 35px;
+            height: 35px;
+        }
+    }
+
+    @media (max-width: 350px) {
+        .day {
+            width: 30px;
+            height: 30px;
+        }
+    }
 </style>
 
 

templates/layouts/main.html

@@ -44,7 +44,7 @@
                     <a class="btn btn-outline-secondary" aria-current="page" href="{{ url_for('signup') }}">Signup</a>
                 </li>
                 {% else %}
-                <li class="nav-item me-2">
+                <li class="nav-item me-2 mb-2 mb-lg-0">
                     <a class="btn text-white btn-primary" aria-current="page" href="{{ url_for('profile') }}">Profil</a>
                 </li>
                 <li class="nav-item me-2">