From 3c57aa8ece5cec3da9631788a3ffc8539a55060b Mon Sep 17 00:00:00 2001
From: Sage The DM <luca.burger@grischuni.net>
Date: Wed, 18 Sep 2024 12:52:36 +0200
Subject: [PATCH] Tried to make the website responsive

---
 app/styles/header.css     |  1 +
 app/styles/history.css    |  2 +-
 app/styles/master.css     |  1 +
 app/styles/responsive.css | 34 ++++++++++++++++++++++++++++++++++
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 app/styles/responsive.css

diff --git a/app/styles/header.css b/app/styles/header.css
index 8ecc019..abb1b66 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -10,6 +10,7 @@ header {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     z-index: 1000;
     font-family: var(--font-family);
+    height: 5vh;
 }
 
 header li {
diff --git a/app/styles/history.css b/app/styles/history.css
index 2aaa58d..24a5777 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -5,8 +5,8 @@
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
-    border-radius: 2em;
     margin: 1em;
+    border-radius: 2em;
 }
 
 .history {
diff --git a/app/styles/master.css b/app/styles/master.css
index 4b21879..9223084 100644
--- a/app/styles/master.css
+++ b/app/styles/master.css
@@ -11,3 +11,4 @@
 @import './input.css';
 @import './faq.css';
 @import './scrollbar.css';
+@import './responsive.css';
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
new file mode 100644
index 0000000..533118e
--- /dev/null
+++ b/app/styles/responsive.css
@@ -0,0 +1,34 @@
+/* responsive.css */
+
+/* Responsive behavior - applies only on smaller screens */
+@media (max-width: 1200px) {
+    /* Left panel as an overlay */
+    .left-panel {
+        margin: 0 auto;
+        min-width: 100vw;
+        max-width: 100vw;
+        padding: 1em;
+    }
+
+    .left-panel.hidden {
+        width: 0; /* Set width to 0 when hidden */
+        visibility: hidden; /* Fully hide the panel */
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    header {
+        height: 125px;
+    }
+
+    header li {
+        flex-direction: column;
+        display: block;
+        padding: 2px;
+    }
+
+    body {
+        margin-top: 100px;
+    }
+}