From ed8bd88b42a751ef35a047a37d4b4ae31712e3d0 Mon Sep 17 00:00:00 2001
From: etc404 <etc404@protonmail.com>
Date: Thu, 12 Mar 2026 12:22:23 -0600
Subject: [PATCH] AAAA emergency fixes wip

---
 demo/src/main/resources/static/css/home.css | 53 +++++++++++++--------
 demo/src/main/resources/templates/home.html | 45 +++++++++--------
 2 files changed, 56 insertions(+), 42 deletions(-)

diff --git a/demo/src/main/resources/static/css/home.css b/demo/src/main/resources/static/css/home.css
index 31e997a..89e1759 100644
--- a/demo/src/main/resources/static/css/home.css
+++ b/demo/src/main/resources/static/css/home.css
@@ -15,9 +15,9 @@ body, html {
   background-color: var(--pale-yellow);
 }
 
-.container {
+.body {
   display: flex;
-  height: 100vh;
+  height: 100%;
 }
 
 /* Header Styles */
@@ -44,18 +44,26 @@ body, html {
   font-size: 2.5em;
   font-weight: bold;
   letter-spacing: 4px;
-  font-family: 'EB Garamond', serif;}
+  font-family: 'EB Garamond', serif;
+}
 
+.body-left {
+  flex-grow: 0;
+  width: 400px;
+}
+
+.body-right {
+  flex-grow: 0;
+  width: 400px;
+}
 
 /* Left Sidebar */
 .sidebar-left {
   overflow: hidden;
   margin: 25px;
-  position: fixed;
   border-radius: 20px;
   z-index: 10;
 
-  width: 200px;
   background-color: var(--peach);
   color: var(--dark);
   padding: 6px;
@@ -65,7 +73,7 @@ body, html {
 
   display: flex;
   flex-direction: column;
-  justify-content: flex-start; 
+  justify-content: space-between;
   align-items: center;
 }
 
@@ -94,18 +102,25 @@ body, html {
   border: none;
   padding: 0;
   cursor: pointer;
-}
-
-.sidebar-left .nav_icon img {
-  height: 40px;
+  height: 100px;
   width: auto;
   border-radius: 8px;
   transition: transform 0.2s ease;
 }
-.sidebar-left .nav_icon img:hover {
+.sidebar-left .nav_icon:hover {
   transform: scale(1.05);
 }
 
+/*.sidebar-left .nav_icon input {*/
+/*  height: 20px;*/
+/*  width: auto;*/
+/*  border-radius: 8px;*/
+/*  transition: transform 0.2s ease;*/
+/*}*/
+/*.sidebar-left .nav_icon input:hover {*/
+/*  transform: scale(1.05);*/
+/*}*/
+
 /* Create Icon */
 .create_icon {
   position: fixed;
@@ -130,13 +145,9 @@ body, html {
 .sidebar-right {
   margin: 25px;
   height: 75%;
-  position: fixed;
   border-radius: 20px;
-  z-index: 1;
+  z-index: 10;
 
-right: 0;
-
-  width: 200px;
   background-color: var(--peach);
   color: var(--dusty-red);
   padding: 5px;
@@ -146,7 +157,7 @@ right: 0;
 
   display: flex;
   flex-direction: column;
-  justify-content: space-between; 
+  justify-content: space-between;
   align-items: center;
 }
 
@@ -167,19 +178,19 @@ right: 0;
 
 /* Main Content */
 .main-content {
-  flex-grow: 0;
+  width: 100%;
+  flex-grow: 1;
   display: flex;
   justify-content: center;
   align-items: flex-start;
-margin-left: 300px;
-margin-right: 250px;
-margin-top: 25px;
 }
 
 .recipe-card {
+    width: 100%;
     display: flex;
     gap: 35px;
     justify-content: flex-start;
+    flex-direction: column;
 }
 
 .card {
diff --git a/demo/src/main/resources/templates/home.html b/demo/src/main/resources/templates/home.html
index 941aba3..009d2fb 100644
--- a/demo/src/main/resources/templates/home.html
+++ b/demo/src/main/resources/templates/home.html
@@ -13,27 +13,28 @@
     <img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
 </header>
 
-<div class="container">
+<div class="body">
     <!--Navigation Bar -->
-    <nav class="sidebar-left">
-        <ul>
-            <li><a href="#">Home</a></li>
-            <li><a href="#">Explore</a></li>
-            <li><a href="#">Profile</a></li>
-            <li><a href="#">Saved</a></li>
-            <li>
-                <form th:action="@{/logout}" method="post">
-                    <input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
-                </form>
-            </li>
-        </ul>
-    </nav>
+    <div class="body-left">
+        <nav class="sidebar-left">
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">Explore</a></li>
+                <li><a href="#">Profile</a></li>
+                <li><a href="#">Saved</a></li>
+                <li>
+                    <form th:action="@{/logout}" method="post">
+                        <input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
+                    </form>
+                </li>
+            </ul>
+        </nav>
+        <a href="#" target="_blank" class="create_icon">
+            <img th:src="@{images/create_icon.png}" alt="Description of the icon">
+        </a>
+    </div>
 
 
-    <a href="#" target="_blank" class="create_icon">
-        <img th:src="@{images/create_icon.png}" alt="Description of the icon">
-    </a>
-
     <!-- Main Content -->
     <main class="main-content">
         <div class="recipe-card">
@@ -53,9 +54,11 @@
     </main>
 
     <!--New Bar -->
-    <nav class="sidebar-right">
-        <h1> NEW </h1>
-    </nav>
+    <div class="body-right">
+        <div class="sidebar-right">
+            <h1> NEW </h1>
+        </div>
+    </div>
 </div>
 </body>
 </html>