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/style.css')
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