diff options
Diffstat (limited to 'static/assets')
| -rw-r--r-- | static/assets/style.css | 165 |
1 files changed, 121 insertions, 44 deletions
diff --git a/static/assets/style.css b/static/assets/style.css index 7ea6eb5..c00da88 100644 --- a/static/assets/style.css +++ b/static/assets/style.css @@ -47,7 +47,7 @@ body { }
main {
- padding: 1rem;
+ padding: 2rem;
padding-top: 7rem;
padding-bottom: 3rem;
max-width: 85rem;
@@ -116,32 +116,46 @@ b { display: none;
}
-.even-2-col-grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 4rem;
-}
+.home {
+ --_card-size: 20rem;
-.uneven-column {
- display: flex;
- gap: 4rem;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 4rem;
}
-.uneven-column-grid {
+.projects {
+ grid-column: span 2;
display: grid;
- gap: 3rem;
- grid-template-columns: 25rem 1fr;
+ grid-template-columns:
+ repeat(auto-fit, minmax(min(var(--_card-size), 100%), 1fr));
+ gap: 4rem;
}
.side-info {
- min-width: 20rem;
- max-width: 30%;
- /*background-color: rgb(240,240,240);*/
+ grid-column: 1 / 1;
+ grid-row: 1;
}
.side-info img {
filter: grayscale(100%);
+ border: 1px solid black;
border-radius: 1.5rem;
+ box-shadow: 0.8rem 0.8rem rgb(100, 100, 100);
+ max-width: min(20rem, fit-content);
+ margin: auto;
+}
+
+@media screen and (max-width: 73rem) {
+ .home {
+ grid-template-columns: 1fr;
+ }
+ .projects {
+ grid-column: 1;
+ }
+ .side-info {
+ grid-row: 2;
+ }
}
/* img {
@@ -167,6 +181,42 @@ iframe { display: block;
}
+.flex {
+ display: flex;
+ gap: 2rem;
+}
+
+.grid {
+ display: grid;
+ gap: 2rem;
+ grid-template-columns: repeat(3, 1fr);
+}
+
+.grid div {
+ height: fit-content;
+}
+
+@media screen and (max-width: 40rem) {
+ .grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+.flex img, .grid img {
+ object-fit: contain;
+}
+
+.title {
+ justify-content: space-between;
+ align-items: center;
+}
+
+.side-vert-img {
+ aspect-ratio: 9/16;
+ object-fit: cover;
+ flex: 60%;
+}
+
.project {
aspect-ratio: 1 / 1;
width: 100%;
@@ -197,6 +247,36 @@ iframe { opacity: 100%;
}
+.grid-column-span-2 {
+ grid-column: span 2;
+}
+
+.projectContent {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+.grid-column-span-3 {
+ grid-column: span 3;
+}
+
+.projectContent img {
+ width: 100%;
+ border: 1px solid black;
+ border-radius: 1.5rem;
+}
+
+.img-group {
+ display: flex;
+ gap: 2rem;
+}
+
+.img-group > * {
+ height: 100%;
+ flex-grow: 1;
+}
+
/*.project-thumbnail {
position: relative;
aspect-ratio: 1 / 1;
@@ -235,7 +315,28 @@ a { color: black;
}
-header a, .projects a {
+.slider {
+ --divider-width: 2px;
+ --divider-color: rgb(50, 50, 50);
+}
+
+.slider:hover .slider-handle {
+ transform: scale(1.2);
+}
+
+.slider-handle {
+ transition: transform 0.2s;
+}
+
+.slider-handle path {
+ fill: var(--divider-color);
+ stroke: var(--divider-color);
+ stroke-width: 2;
+ stroke-linejoin: round;
+ stroke-linecap: round;
+}
+
+header a, .project-thumbnail {
text-decoration: none;
}
@@ -243,15 +344,17 @@ header a, .projects a { opacity: 60%;
}*/
-.projects p {
+/* .projects p {
margin-top: 0.5rem;
border-right: .5rem solid rgb(196, 196, 196);
border-top: .12rem solid rgb(196, 196, 196);
-}
+} */
+/*
.projectContent p {
margin-left: 1.5rem;
}
+*/
.hide {
display: none;
@@ -295,32 +398,14 @@ blockquote { }
@media screen and (max-width: 82rem) {
- main {
- margin-left: 5rem;
- margin-right: 5rem;
- }
.uneven-column {
flex-direction: column-reverse;
}
- .side-info {
- max-width: 100%;
- }
- .side-info img {
- display: block;
- margin: auto;
- }
.empty-thumbnail {
display: none;
}
}
-@media screen and (max-width: 70rem) {
- main {
- margin-left: 1rem;
- margin-right: 1rem;
- }
-}
-
@media screen and (min-width: 45rem) {
address {
display: flex;
@@ -328,10 +413,6 @@ blockquote { }
@media screen and (max-width: 45rem) {
- main {
- margin-left: 0.5rem;
- margin-right: 0.5rem;
- }
nav {
display: none;
}
@@ -343,10 +424,6 @@ blockquote { width: 100%;
}
- .even-2-col-grid {
- grid-template-columns: 1fr;
- }
-
.toggler{
/* ALWAYS KEEPING THE TOGGLER OR THE CHECKBOX ON TOP OF EVERYTHING : */
visibility: visible;
|