From be8aad6a8e0600db53157e07fac3e2fa9d3f1088 Mon Sep 17 00:00:00 2001
From: Alex Scerba <alex@scerba.org>
Date: Mon, 11 Aug 2025 20:30:58 -0500
Subject: Update style sheet to match new structure

---
 static/assets/style.css | 165 +++++++++++++++++++++++++++++++++++-------------
 1 file changed, 121 insertions(+), 44 deletions(-)

(limited to 'static')

diff --git a/static/assets/style.css b/static/assets/style.css
index 7ea6eb5..c00da88 100644
--- a/static/assets/style.css
+++ b/static/assets/style.css
@@ -47,7 +47,7 @@ body {
 }
 
 main {
-    padding: 1rem;
+    padding: 2rem;
     padding-top: 7rem;
     padding-bottom: 3rem;
     max-width: 85rem;
@@ -116,32 +116,46 @@ b {
     display: none;
 }
 
-.even-2-col-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-}
+.home {
+  --_card-size: 20rem;
 
-.uneven-column {
-	display: flex;
-	gap: 4rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4rem;
 }
 
-.uneven-column-grid {
+.projects {
+  grid-column: span 2;
   display: grid;
-  gap: 3rem;
-  grid-template-columns: 25rem 1fr;
+  grid-template-columns:
+    repeat(auto-fit, minmax(min(var(--_card-size), 100%), 1fr));
+  gap: 4rem;
 }
 
 .side-info {
-	min-width: 20rem;
-	max-width: 30%;
-	/*background-color: rgb(240,240,240);*/
+  grid-column: 1 / 1;
+  grid-row: 1;
 }
 
 .side-info img {
   filter: grayscale(100%);
+  border: 1px solid black;
   border-radius: 1.5rem;
+  box-shadow: 0.8rem 0.8rem rgb(100, 100, 100);
+  max-width: min(20rem, fit-content);
+  margin: auto;
+}
+
+@media screen and (max-width: 73rem) {
+  .home {
+    grid-template-columns: 1fr;
+  }
+  .projects {
+    grid-column: 1;
+  }
+  .side-info {
+    grid-row: 2;
+  }
 }
 
 /* img {
@@ -167,6 +181,42 @@ iframe {
   display: block;
 }
 
+.flex {
+  display: flex;
+  gap: 2rem;
+}
+
+.grid {
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.grid div {
+  height: fit-content;
+}
+
+@media screen and (max-width: 40rem) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.flex img, .grid img {
+  object-fit: contain;
+}
+
+.title {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.side-vert-img {
+  aspect-ratio: 9/16;
+  object-fit: cover;
+  flex: 60%;
+}
+
 .project {
   aspect-ratio: 1 / 1;
   width: 100%;
@@ -197,6 +247,36 @@ iframe {
   opacity: 100%;
 }
 
+.grid-column-span-2 {
+  grid-column: span 2;
+}
+
+.projectContent {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.grid-column-span-3 {
+  grid-column: span 3;
+}
+
+.projectContent img {
+  width: 100%;
+  border: 1px solid black;
+  border-radius: 1.5rem;
+}
+
+.img-group {
+  display: flex;
+  gap: 2rem;
+}
+
+.img-group > * {
+  height: 100%;
+  flex-grow: 1;
+}
+
 /*.project-thumbnail {
 	position: relative;
   aspect-ratio: 1 / 1;
@@ -235,7 +315,28 @@ a {
   color: black;
 }
 
-header a, .projects a {
+.slider {
+  --divider-width: 2px;
+  --divider-color: rgb(50, 50, 50);
+}
+
+.slider:hover .slider-handle {
+  transform: scale(1.2);
+}
+
+.slider-handle {
+  transition: transform 0.2s;
+}
+
+.slider-handle path {
+  fill: var(--divider-color);
+  stroke: var(--divider-color);
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+header a, .project-thumbnail {
   text-decoration: none;
 }
 
@@ -243,15 +344,17 @@ header a, .projects a {
   opacity: 60%;
 }*/
 
-.projects p {
+/* .projects p {
   margin-top: 0.5rem;
   border-right: .5rem solid rgb(196, 196, 196);
   border-top: .12rem solid rgb(196, 196, 196);
-}
+} */
 
+/*
 .projectContent p {
   margin-left: 1.5rem;
 }
+*/
 
 .hide {
   display: none;
@@ -295,32 +398,14 @@ blockquote {
 }
 
 @media screen and (max-width: 82rem) {
-  main {
-    margin-left: 5rem;
-    margin-right: 5rem;
-  }
 	.uneven-column {
 		flex-direction: column-reverse;
 	}
-	.side-info {
-		max-width: 100%;
-	}
-  .side-info img {
-    display: block;
-    margin: auto;
-  }
   .empty-thumbnail {
     display: none;
   }
 }
 
-@media screen and (max-width: 70rem) {
-  main {
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-}
-
 @media screen and (min-width: 45rem) {
   address {
     display: flex;
@@ -328,10 +413,6 @@ blockquote {
 }
 
 @media screen and (max-width: 45rem) {
-    main {
-      margin-left: 0.5rem;
-      margin-right: 0.5rem;
-    }
     nav {
       display: none;
     }
@@ -343,10 +424,6 @@ blockquote {
         width: 100%;
     }
 
-    .even-2-col-grid {
-        grid-template-columns: 1fr;
-    }
-
     .toggler{
     /* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING :  */
       visibility: visible;
-- 
cgit v1.2.3