From b04068da4e2953f3bcc86c75d9823068494f0a00 Mon Sep 17 00:00:00 2001
From: Verox001 <altergeist987@gmail.com>
Date: Wed, 6 Mar 2024 10:52:47 +0100
Subject: [PATCH] Improved layouting

---
 templates/components/habit_lists.html |  2 +-
 templates/components/heatmap.html     |  2 +-
 templates/index.html                  | 46 +++++++++++++++++++++++++++
 templates/layouts/main.html           |  2 +-
 4 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/templates/components/habit_lists.html b/templates/components/habit_lists.html
index 86b2653..8f14324 100644
--- a/templates/components/habit_lists.html
+++ b/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">
diff --git a/templates/components/heatmap.html b/templates/components/heatmap.html
index 6391f6b..00f159b 100644
--- a/templates/components/heatmap.html
+++ b/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>
diff --git a/templates/index.html b/templates/index.html
index bd71b39..2c203cf 100644
--- a/templates/index.html
+++ b/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>
 
 
diff --git a/templates/layouts/main.html b/templates/layouts/main.html
index 55661d1..7129d89 100644
--- a/templates/layouts/main.html
+++ b/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">