diff --git a/css/components.css b/css/components.css
index a2a6de5..c6218d8 100644
--- a/css/components.css
+++ b/css/components.css
@@ -1,5 +1,9 @@
.btn {
- background-image: linear-gradient(to right, var(--primary), var(--primary-container));
+ background-image: linear-gradient(
+ to right,
+ var(--primary),
+ var(--primary-container)
+ );
padding: 1rem 2rem;
font-size: 1rem;
border-radius: 100rem;
@@ -112,7 +116,7 @@
& > * {
text-align: center;
- max-width: 40rem;
+ /*max-width: 40rem;*/
}
& > nav {
@@ -160,4 +164,4 @@
& > :last-child {
grid-column: 1 / -1;
}
-}
\ No newline at end of file
+}
diff --git a/css/portfolio.css b/css/portfolio.css
index 4b1b896..efadffc 100644
--- a/css/portfolio.css
+++ b/css/portfolio.css
@@ -1,7 +1,9 @@
#portfolio-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
- grid-auto-rows: 280px;
+ /*grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));*/
+ grid-template-columns: repeat(12, 1fr);
+ grid-auto-rows: 106px;
+ /*grid-auto-rows: 210px;*/
grid-auto-flow: dense;
gap: 1.5rem;
@@ -9,7 +11,9 @@
overflow: hidden;
border-radius: var(--border-radius);
background: var(--surface-container-highest);
- transition: transform 0.3s, box-shadow 0.3s;
+ transition:
+ transform 0.3s,
+ box-shadow 0.3s;
position: relative;
cursor: pointer;
}
@@ -31,7 +35,20 @@
transform: scale(1.08);
}
- & > :nth-child(7n) {
+ & > :has(.tall) {
+ grid-column: span 3;
+ grid-row: span 4;
+ }
+ & > :has(.wide) {
+ grid-column: span 4;
+ grid-row: span 3;
+ }
+ & > :has(.large) {
+ grid-row: span 2;
+ grid-column: span 2;
+ }
+
+ /*& > :nth-child(7n) {
grid-column: span 2;
grid-row: span 2;
}
@@ -42,7 +59,7 @@
& > :nth-child(13n+9) {
grid-row: span 2;
- }
+ }*/
}
#lightbox {
diff --git a/html/image.templ b/html/image.templ
index 1806d8e..5605be3 100644
--- a/html/image.templ
+++ b/html/image.templ
@@ -25,5 +25,5 @@ func ProcessImage(fileName string) string {
}
templ AvifImage(srcPath, alt string) {
-
+
}