VISUALS WORK

wip though
2026-05-10 20:52:58 +00:00 · 2026-03-10 15:18:55 -06:00
parent 43dd602a48
commit fd6cacd13c
11 changed files with 18 additions and 3 deletions
@@ -0,0 +1,202 @@
+:root {
+  --dusty-red: #D43F3F;
+  --dusty-red-hover: #C73636;
+  --dark-yellow: #FFD27F;
+  --pale-yellow: #FFECB3;
+  --peach: #F5A96E;
+  --dark: #850000;
+}
+
+/* login.css */
+body, html {
+  height: 100%;
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+  background-color: var(--pale-yellow);
+}
+
+.container {
+  display: flex;
+  height: 100vh;
+}
+
+/* Header Styles */
+.top-header {
+  position: sticky;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--dusty-red);
+  color: var(--dark-yellow);
+  padding: 10px 20px;
+  height: 60px;
+ gap: 40px;
+}
+
+.top-header .swirl {
+  height: 40px;
+  width: auto;
+  margin: 0 20px;
+}
+
+.site-name {
+  font-size: 2.5em;
+  font-weight: bold;
+  letter-spacing: 4px;
+  font-family: 'EB Garamond', serif;}
+
+
+/* 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;
+  font-size: 1.75em;
+  font-weight: 900;
+  letter-spacing: 1.5px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start; 
+  align-items: center;
+}
+
+.sidebar-left ul {
+  list-style: none;
+  padding: 0;
+}
+
+.sidebar-left li {
+  margin-bottom: 7px;
+}
+
+.sidebar-left a {
+  color: var(--dark);
+  text-decoration: none;
+  transition: 0.1s ease;
+}
+
+.sidebar-left a:hover {
+  color: var(--dusty-red);
+}
+
+
+.sidebar-left .nav_icon {
+  height: 40px;
+  width: auto;
+  margin-top: 9px;
+  border-radius: 8px;
+  transition: transform 0.2s ease;
+  display: flex;
+}
+
+.sidebar-left .nav_icon:hover {
+  transform: scale(1.05);
+}
+
+/* Create Icon */
+.create_icon {
+  position: fixed;
+  bottom: 30px;
+  left: 55px;
+  z-index: 1000;
+  transition: transform 0.2s ease; 
+}
+
+.create_icon:hover {
+  transform: scale(1.02);
+}
+
+.create_icon img {
+    width: 150px;
+    height: auto;
+    border-radius: 10%;
+}
+
+
+/* Right Sidebar */
+.sidebar-right {
+  margin: 25px;
+  height: 75%;
+  position: fixed;
+  border-radius: 20px;
+  z-index: 1;
+
+right: 0;
+
+  width: 200px;
+  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;
+}
+
+.sidebar-right ul {
+  list-style: none;
+  padding: 0;
+}
+
+.sidebar-right li {
+  margin-bottom: 5px;
+}
+
+.sidebar-right a {
+  color: var(--dusty-red);
+  text-decoration: none;
+}
+
+
+/* Main Content */
+.main-content {
+  flex-grow: 0;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+margin-left: 300px;
+margin-right: 250px;
+margin-top: 25px;
+}
+
+.recipe-card {
+    display: flex;
+    gap: 35px;
+    justify-content: flex-start;
+}
+
+.card {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    
+    flex: 0.2 0.2 260px;
+    max-width: 300px;
+    background: var(--peach);
+    border-radius: 12px;
+    padding: 20px;
+}
+
+.card img {
+    width: 100%;
+    height: 100px;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+.card-left, .card-right {
+    width: 50%;
+}