image placeholders

This commit is contained in:
bronkuu 2026-06-02 22:33:13 +02:00
parent 16549967e3
commit 8512c9e3d7
8 changed files with 23 additions and 11 deletions

View file

@ -1,12 +1,14 @@
#portfolio-grid { #portfolio-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-rows: 280px;
grid-auto-flow: dense; grid-auto-flow: dense;
gap: 1.5rem; gap: 1.5rem;
& > * { & > * {
overflow: hidden; overflow: hidden;
border-radius: var(--border-radius); 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; position: relative;
cursor: pointer; cursor: pointer;
@ -68,6 +70,9 @@
border-radius: var(--small-radius); border-radius: var(--small-radius);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
object-fit: contain; object-fit: contain;
min-width: 200px;
min-height: 200px;
background: var(--surface-container-highest);
} }
& > button { & > button {

View file

@ -9,6 +9,11 @@
width: 100%; width: 100%;
} }
& > .card > div:first-child {
background: var(--surface-container-highest);
aspect-ratio: 4 / 3;
}
& > .card > div:last-child { & > .card > div:last-child {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;

View file

@ -12,6 +12,7 @@ templ layout(activePage string) {
<meta name="description" content=""/> <meta name="description" content=""/>
<link href="style.css" rel="stylesheet"/> <link href="style.css" rel="stylesheet"/>
<link rel="icon" href="images/favicon.avif"/> <link rel="icon" href="images/favicon.avif"/>
<script defer src="portfolio.js"></script>
</head> </head>
<body> <body>
<nav> <nav>

View file

@ -31,7 +31,7 @@ func layout(activePage string) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"pl\"><head><meta charset=\"UTF-8\"><title>Piekarnik Gosi</title><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><meta name=\"description\" content=\"\"><link href=\"style.css\" rel=\"stylesheet\"><link rel=\"icon\" href=\"images/favicon.avif\"></head><body><nav><div><a href=\"index.html\"><img src=\"images/logo.svg\" alt=\"logo\"></a><div>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"pl\"><head><meta charset=\"UTF-8\"><title>Piekarnik Gosi</title><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><meta name=\"description\" content=\"\"><link href=\"style.css\" rel=\"stylesheet\"><link rel=\"icon\" href=\"images/favicon.avif\"><script defer src=\"portfolio.js\"></script></head><body><nav><div><a href=\"index.html\"><img src=\"images/logo.svg\" alt=\"logo\"></a><div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@ -100,7 +100,7 @@ func Link(activePage, targetPage, title string) templ.Component {
var templ_7745c5c3_Var3 templ.SafeURL var templ_7745c5c3_Var3 templ.SafeURL
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinURLErrs(fmt.Sprint(targetPage, ".html")) templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinURLErrs(fmt.Sprint(targetPage, ".html"))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 179, Col: 41} return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 180, Col: 41}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@ -118,7 +118,7 @@ func Link(activePage, targetPage, title string) templ.Component {
var templ_7745c5c3_Var4 string var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(title) templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(title)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 181, Col: 9} return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 182, Col: 9}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@ -165,7 +165,7 @@ func GreenLink(activePage, targetPage, title string) templ.Component {
var templ_7745c5c3_Var6 templ.SafeURL var templ_7745c5c3_Var6 templ.SafeURL
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(fmt.Sprint(targetPage, ".html")) templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(fmt.Sprint(targetPage, ".html"))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 187, Col: 41} return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 188, Col: 41}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@ -183,7 +183,7 @@ func GreenLink(activePage, targetPage, title string) templ.Component {
var templ_7745c5c3_Var7 string var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(title) templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(title)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 190, Col: 9} return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 191, Col: 9}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@ -225,7 +225,7 @@ func subnavHeader(title, description string) templ.Component {
var templ_7745c5c3_Var9 string var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(title) templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(title)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 195, Col: 13} return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 196, Col: 13}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@ -238,7 +238,7 @@ func subnavHeader(title, description string) templ.Component {
var templ_7745c5c3_Var10 string var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(description) templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(description)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 196, Col: 18} return templ.Error{Err: templ_7745c5c3_Err, FileName: `html/layout.templ`, Line: 197, Col: 18}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {

View file

@ -14,6 +14,5 @@ templ Portfolio(images []string) {
</div> </div>
</section> </section>
</main> </main>
<script defer src="portfolio.js"></script>
} }
} }

View file

@ -67,7 +67,7 @@ func Portfolio(images []string) templ.Component {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div></section></main><script defer src=\"portfolio.js\"></script>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div></section></main>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

BIN
img/.DS_Store vendored

Binary file not shown.

View file

@ -2,7 +2,7 @@
var grid = document.getElementById('portfolio-grid'); var grid = document.getElementById('portfolio-grid');
if (!grid) return; if (!grid) return;
var items = Array.from(grid.querySelectorAll(':scope > div')); var items = Array.from(grid.children);
if (!items.length) return; if (!items.length) return;
var lb = document.createElement('div'); var lb = document.createElement('div');
@ -20,9 +20,11 @@
function open(idx) { function open(idx) {
current = idx; current = idx;
var img = items[current].querySelector('img'); var img = items[current].querySelector('img');
lbImg.removeAttribute('src');
lbImg.alt = '';
lb.classList.add('open');
lbImg.src = img.src; lbImg.src = img.src;
lbImg.alt = img.alt; lbImg.alt = img.alt;
lb.classList.add('open');
} }
function close() { function close() {