css changes/ ingredients work

demo/src/main/resources/application.properties

@@ -4,7 +4,7 @@ spring.application.name=demo
 
 spring.datasource.url=jdbc:mysql://localhost:3306/demo
 spring.datasource.username=springuser
-spring.datasource.password=password
+spring.datasource.password=SpringPass123!
 
 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
 

demo/src/main/resources/static/css/home.css

@@ -1,3 +1,6 @@
+/* =========================
+   Root Variables
+========================= */
 :root {
   --dusty-red: #D43F3F;
   --dusty-red-hover: #C73636;
@@ -7,7 +10,9 @@
   --dark: #850000;
 }
 
-/* login.css */
+/* =========================
+   Global Styles
+========================= */
 body, html {
   height: 100vh;
   margin: 0;
@@ -16,22 +21,33 @@ body, html {
   overflow: clip;
 }
 
+/* =========================
+   Layout Structure
+========================= */
 .body {
   display: flex;
   flex-direction: row;
   height: 100%;
 }
 
-/* Header Styles */
+.body-left, .body-right {
+  position: sticky;
+  flex-grow: 0;
+  width: 400px;
+}
+
+/* =========================
+   Header Styles
+========================= */
 .top-header {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 40px;
+  height: 60px;
+  padding: 10px 20px;
   background-color: var(--dusty-red);
   color: var(--dark-yellow);
-  padding: 10px 20px;
-  height: 60px;
- gap: 40px;
 }
 
 .top-header .swirl {
@@ -41,38 +57,27 @@ body, html {
 }
 
 .site-name {
+  font-family: 'EB Garamond', serif;
   font-size: 2.5em;
   font-weight: bold;
   letter-spacing: 4px;
-  font-family: 'EB Garamond', serif;
+  color: var(--dark-yellow);
 }
 
-.body-left {
-  position: sticky;
-  flex-grow: 0;
-  width: 400px;
-}
-
-.body-right {
-  position: sticky;
-  flex-grow: 0;
-  width: 400px;
-}
-
-/* Left Sidebar */
+/* =========================
+   Left Sidebar
+========================= */
 .sidebar-left {
   overflow: hidden;
   margin: 25px;
   border-radius: 20px;
   z-index: 10;
-
   background-color: var(--peach);
   color: var(--dark);
   padding: 6px;
   font-size: 1.75em;
   font-weight: 900;
   letter-spacing: 1.5px;
-
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -98,7 +103,6 @@ body, html {
   color: var(--dusty-red);
 }
 
-
 .sidebar-left .nav_icon {
   background: none;
   border: none;
@@ -109,21 +113,14 @@ body, html {
   border-radius: 8px;
   transition: transform 0.2s ease;
 }
+
 .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 */
+/* =========================
+   Floating Create Icon
+========================= */
 .create_icon {
   position: fixed;
   bottom: 30px;
@@ -137,30 +134,29 @@ body, html {
 }
 
 .create_icon img {
-    width: 150px;
-    height: auto;
-    border-radius: 10%;
+  width: 150px;
+  height: auto;
+  border-radius: 10%;
 }
 
-
-/* Right Sidebar */
+/* =========================
+   Right Sidebar
+========================= */
 .sidebar-right {
-  margin: 25px;
-  height: 75%;
-  border-radius: 20px;
-  z-index: 10;
-
-  background-color: var(--peach);
-  color: var(--dusty-red);
-  padding: 5px;
-  font-size: 1.6em;
-  font-weight: 900;
-  letter-spacing: 1.5px;
-
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
+  margin: 25px;
+  padding: 5px;
+  height: 75%;
+  border-radius: 20px;
+  z-index: 10;
+  background-color: var(--peach);
+  color: var(--dusty-red);
+  font-size: 1.6em;
+  font-weight: 900;
+  letter-spacing: 1.5px;
 }
 
 .sidebar-right ul {
@@ -177,8 +173,9 @@ body, html {
   text-decoration: none;
 }
 
-
-/* Main Content */
+/* =========================
+   Main Content Area
+========================= */
 .main-content {
   width: 100%;
   flex-grow: 1;
@@ -189,43 +186,73 @@ body, html {
   height: 100%;
 }
 
+/* =========================
+   Recipe Cards Layout
+========================= */
 .recipe-card {
-    margin-top: 35px;
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 35px;
-    justify-content: flex-start;
-    flex-direction: row;
-    height: fit-content;
+  margin-top: 35px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 35px;
+  justify-content: flex-start;
+  flex-direction: row;
+  height: fit-content;
 }
 
+/* =========================
+   Individual Card (Folder Style)
+========================= */
 .card {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    max-height: 200px;
-    
-    flex: 1 1 260px;
-    max-width: 400px;
-    background: var(--peach);
-    border-radius: 12px;
-    padding: 20px;
+  position: relative; /* needed for tab */
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1 1 260px;
+  max-width: 400px;
+  max-height: 200px;
+  padding: 25px 20px 20px; /* extra space for tab */
+  border-radius: 12px;
+  background: var(--peach);
 }
 
+/* Folder Tab */
+.card::before {
+  content: "";
+  position: absolute;
+  top: -15px;
+  left: 20px;
+  width: 100px;
+  height: 20px;
+  background: var(--peach);
+  border-radius: 6px 6px 0 0;
+}
+
+/* =========================
+   Card Content
+========================= */
 .card .card-text {
-    height: 100%;
-    overflow: scroll;
+  height: 100%;
+  overflow: scroll;
+  font-family: 'Roboto', sans-serif; 
+  color: var(--dark);                
 }
 
+/* =========================
+   Card Image
+========================= */
 .card img {
-    width: 100%;
-    height: 100px;
-    object-fit: cover;
-    border-radius: 8px;
+  width: 100%;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 8px;
 }
 
-.card-left, .card-right {
-	flex-shrink: 0;
-    width: 50%;
-}
+/* =========================
+   Card Columns
+========================= */
+.card-left,
+.card-right {
+  flex-shrink: 0;
+  width: 50%;
+}

demo/src/main/resources/static/css/login.css

@@ -1,3 +1,6 @@
+/* =========================
+   Root Variables
+========================= */
 :root {
   --dusty-red: #D43F3F;
   --dusty-red-hover: #C73636;
@@ -7,31 +10,41 @@
   --dark: #850000;
 }
 
-/* login.css */
-body, html {
+/* =========================
+   Global Styles
+========================= */
+body,
+html {
   height: 100%;
   margin: 0;
   font-family: 'Roboto', sans-serif;
   background-color: var(--pale-yellow);
 }
 
+/* =========================
+   Layout Container
+========================= */
 .container {
   display: flex;
   height: 100vh;
 }
 
-/* Header Styles */
+/* =========================
+   Header Styles
+========================= */
 .top-header {
   position: sticky;
   top: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 40px;
+
+  height: 60px;
+  padding: 10px 20px;
+
   background-color: var(--dusty-red);
   color: var(--dark-yellow);
-  padding: 10px 20px;
-  height: 60px;
- gap: 40px;
 }
 
 .top-header .swirl {
@@ -41,82 +54,97 @@ body, html {
 }
 
 .site-name {
+  font-family: 'EB Garamond', serif;
   font-size: 2.5em;
   font-weight: bold;
   letter-spacing: 4px;
-  font-family: 'EB Garamond', serif;}
+}
 
-
-/* Main Content */
+/* =========================
+   Main Content Area
+========================= */
 .main-content {
-  flex-grow: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-top: 40px;}
 
-/* Login Box */
+  flex-grow: 0;
+  margin-top: 40px;
+}
+
+/* =========================
+   Login Box
+========================= */
 .login-box {
-  background-color: var(--peach);
+  width: 400px;
   padding: 45px;
   border-radius: 20px;
-  width: 400px;
+
+  background-color: var(--peach);
   color: var(--dark);
 }
 
 .login-box h2 {
-  font-size: 50px;
-  text-align: center;
-  font-weight: bold;
-  margin-bottom: 30px;
-  margin-top: 8px;
+  margin: 8px 0 30px;
 
+  font-size: 50px;
+  font-weight: bold;
+  text-align: center;
 }
 
+/* Form Labels */
 .login-box label {
-  font-size: 20px;
   display: block;
   width: 90%;
   margin: 10px;
+
+  font-size: 20px;
   font-weight: bold;
 }
 
+/* Form Inputs */
 .login-box input {
   display: block;
   width: 90%;
+  margin: 5px auto 0;
   padding: 10px;
-  margin: auto;
-  margin-top: 5px;
+
+  font-size: 20px;
   border-radius: 10px;
   border: 2.5px solid var(--dusty-red);
   background-color: var(--pale-yellow);
-  font-size: 20px;
   box-sizing: border-box;
 }
 
+/* =========================
+   Button Styles
+========================= */
 .login-box button {
   display: block;
-  margin: 0 auto;
   width: 40%;
+  margin: 20px auto 0;
   padding: 10px;
-  margin-top: 20px;
-  background-color: var(--dusty-red);
-  color: var(--dark-yellow);
+
   font-weight: bold;
+  color: var(--dark-yellow);
+  background-color: var(--dusty-red);
+
   border: none;
   border-radius: 10px;
   cursor: pointer;
-  transition: background-color 0.1s ease;
-  transition: transform 0.2s ease;
-  }
+
+  transition: background-color 0.1s ease, transform 0.2s ease;
+}
 
 .login-box button:hover {
   background-color: var(--dusty-red-hover);
   transform: scale(1.05);
 }
 
-/*Sign Up*/
+/* =========================
+   Sign Up Section
+========================= */
 .sign_up {
   color: var(--dusty-red);
 }
@@ -125,7 +153,7 @@ body, html {
   display: inline-block;
   color: var(--dark);
   text-decoration: none;
-  transition: transform 0.2s ease; 
+  transition: transform 0.2s ease;
 }
 
 .sign_up a:hover {