AAAA emergency fixes wip

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;
-}
+  height: 100px;
-
-.sidebar-left .nav_icon img {
-  height: 40px;
   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;
@@ -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 {

demo/src/main/resources/templates/home.html

@@ -13,8 +13,9 @@
     <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 -->
+    <div class="body-left">
         <nav class="sidebar-left">
             <ul>
                 <li><a href="#">Home</a></li>
@@ -28,11 +29,11 @@
                 </li>
             </ul>
         </nav>
-
-
         <a href="#" target="_blank" class="create_icon">
             <img th:src="@{images/create_icon.png}" alt="Description of the icon">
         </a>
+    </div>
+
 
     <!-- Main Content -->
     <main class="main-content">
@@ -53,9 +54,11 @@
     </main>
 
     <!--New Bar -->
-    <nav class="sidebar-right">
+    <div class="body-right">
+        <div class="sidebar-right">
             <h1> NEW </h1>
-    </nav>
+        </div>
+    </div>
 </div>
 </body>
 </html>