From 4d762d19f97ca28cc18f9c001f9fbd681c7879bb Mon Sep 17 00:00:00 2001
From: Alex Scerba <alex@scerba.org>
Date: Sat, 28 Sep 2024 12:29:38 -0400
Subject: Add new style

---
 static/style.css | 69 +++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 46 insertions(+), 23 deletions(-)

(limited to 'static')

diff --git a/static/style.css b/static/style.css
index 1f27ceb..ad1b569 100644
--- a/static/style.css
+++ b/static/style.css
@@ -68,6 +68,7 @@ header {
 
 .logo-w-name {
     display: flex;
+    flex-direction: column;
 }
 
 .logo {
@@ -84,7 +85,6 @@ header {
 }
 
 h1 {
-  display: none;
   font-size: 2.5rem;
   color: rgb(143, 143, 143);
   /* padding-left: 1rem; */
@@ -98,10 +98,8 @@ b {
 
 .main-nav-position {
     display: flex;
-    justify-content: right;
+    justify-content: left;
     flex-grow: 1;
-    padding-right: 2rem;
-    border-right: .5rem solid rgb(196, 196, 196);
 }
 
 .main-nav {
@@ -112,6 +110,14 @@ b {
     font-size: .8rem;
 }
 
+.main-nav ul {
+  display: inline;
+}
+
+.main-nav li {
+  display: inline;
+}
+
 .toggler, .hamburger {
     display: none;
 }
@@ -132,6 +138,20 @@ b {
   grid-template-columns: 25rem 1fr;
 }
 
+.home-grid {
+  --min-column-size: 20rem;
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns:
+      repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr));
+}
+
+.project-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
 .side-info {
 	min-width: 20rem;
 	max-width: 30%;
@@ -163,9 +183,8 @@ iframe {
 
 .thumbnail img {
   width: fit-content;
-  aspect-ratio: 4/3;
+  aspect-ratio: 1/1;
   object-fit: cover;
-  display: block;
   position: relative;
   z-index: -1;
 }
@@ -175,23 +194,27 @@ iframe {
 }
 
 .title {
-  z-index: -1;
-  opacity: 0;
-  display: block;
-	position: absolute;
-	top: 0;
-	left: 0;
-	padding: 8rem 1rem;
-	text-align: center;
+	align-self: center;
+  min-width: 100%;
+  text-align: center;
 	font-weight: bold;
 	color: white;
+}
+
+.title-bg {
+  opacity: 0;
+  z-index: -1;
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
 	background-color: rgba(27, 27, 27, 0.726);
-	min-width: 100%;
-	min-height: 100%;
+  min-width: 100%;
+  min-height: 100%;
   transition: all 0.3s ease-in-out;
 }
 
-.thumbnail:hover .title {
+.thumbnail:hover .title-bg {
 	opacity: 100%;
 }
 
@@ -259,10 +282,10 @@ blockquote {
 }
 
 @media screen and (max-width: 82rem) {
-  main {
+/*   main {
     margin-left: 5rem;
     margin-right: 5rem;
-  }
+  } */
 	.uneven-column {
 		flex-direction: column-reverse;
 	}
@@ -276,10 +299,10 @@ blockquote {
 }
 
 @media screen and (max-width: 70rem) {
-  main {
+/*   main {
     margin-left: 1rem;
     margin-right: 1rem;
-  }
+  } */
 }
 
 @media screen and (min-width: 45rem) {
@@ -289,10 +312,10 @@ blockquote {
 }
 
 @media screen and (max-width: 45rem) {
-    main {
+/*     main {
       margin-left: 0.5rem;
       margin-right: 0.5rem;
-    }
+    } */
     nav {
       display: none;
     }
-- 
cgit v1.2.3