diff options
Diffstat (limited to 'static/style.css')
| -rw-r--r-- | static/style.css | 69 |
1 files changed, 46 insertions, 23 deletions
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;
}
|