diff options
| author | Alex Scerba <alex@scerba.org> | 2025-03-27 16:27:48 -0400 |
|---|---|---|
| committer | Alex Scerba <alex@scerba.org> | 2025-03-27 16:27:48 -0400 |
| commit | 9954d5a0ab28a7ef9ac52650b82b8fb0c966a9df (patch) | |
| tree | 4323faf13c7686b00a7004cca358cd0d0463b9fc /static | |
| parent | 84797d907f2b3291e4bd2dca9c81c365d2f31c40 (diff) | |
Diffstat (limited to 'static')
| -rw-r--r-- | static/assets/style.css | 63 |
1 files changed, 45 insertions, 18 deletions
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 +}
|