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) { - { + { }