From 9954d5a0ab28a7ef9ac52650b82b8fb0c966a9df Mon Sep 17 00:00:00 2001
From: Alex Scerba <alex@scerba.org>
Date: Thu, 27 Mar 2025 16:27:48 -0400
Subject: Match portfolio style for thumbnail cards and profile image

---
 static/assets/style.css | 63 +++++++++++++++++++++++++++++++++++--------------
 1 file changed, 45 insertions(+), 18 deletions(-)

(limited to 'static/assets')

diff --git a/static/assets/style.css b/static/assets/style.css
index ecb569d..7ea6eb5 100644
--- a/static/assets/style.css
+++ b/static/assets/style.css
@@ -119,6 +119,7 @@ b {
 .even-2-col-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    gap: 4rem;
 }
 
 .uneven-column {
@@ -138,6 +139,11 @@ b {
 	/*background-color: rgb(240,240,240);*/
 }
 
+.side-info img {
+  filter: grayscale(100%);
+  border-radius: 1.5rem;
+}
+
 /* img {
     max-width: 100%;
     height: auto;
@@ -161,46 +167,67 @@ iframe {
   display: block;
 }
 
-.thumbnail img {
+.project {
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  max-height: 100%;
+  border: 1px solid black;
+  border-radius: 1.5rem;
+  box-shadow: 0.8rem 0.8rem rgb(150, 150, 150);
+  position: relative;
+  overflow: hidden;
+}
+
+.project:hover {
+  box-shadow: 0.8rem 0.8rem rgb(100, 100, 100);
+}
+
+.project img {
+  opacity: 0;
   width: fit-content;
-  aspect-ratio: 4/3;
+  aspect-ratio: 1 / 1;
   object-fit: cover;
   display: block;
   position: relative;
-  z-index: -1;
+  z-index: 1;
+  transition: all 0.02s ease-in-out;
 }
 
-.thumbnail {
-	position: relative;
-  aspect-ratio: 4/3;
+.project:hover img {
+  opacity: 100%;
 }
 
+/*.project-thumbnail {
+	position: relative;
+  aspect-ratio: 1 / 1;
+}*/
+
 .empty-thumbnail {
-  aspect-ratio: 4/3;
+  aspect-ratio: 1 / 1;
 }
 
 .projectContent .main-image {
   display: none;
 }
 
-.title {
-  z-index: -1;
+.project-title {
   opacity: 0;
   display: block;
 	position: absolute;
-	top: 0;
+	bottom: 0;
 	left: 0;
-	padding: 9rem 1rem 0 1rem;
 	text-align: center;
 	font-weight: bold;
 	color: white;
-	background-color: rgba(27, 27, 27, 0.726);
+	background-color: rgba(27, 27, 27, 0.8);
 	min-width: 100%;
-	min-height: 100%;
-  transition: all 0.3s ease-in-out;
+	/*min-height: 100%;*/
+  transition: all 0.02s ease-in-out;
+  padding: 1rem;
+  z-index: 2;
 }
 
-.thumbnail:hover .title {
+.project:hover .project-title {
 	opacity: 100%;
 }
 
@@ -212,9 +239,9 @@ header a, .projects a {
   text-decoration: none;
 }
 
-a:hover:not(.thumbnail) {
+/*a:hover:not(.thumbnail) {
   opacity: 60%;
-}
+}*/
 
 .projects p {
   margin-top: 0.5rem;
@@ -459,4 +486,4 @@ blockquote {
   .hamburger{
     top: .4rem;
   }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3