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

View file

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

View file

@ -12,6 +12,7 @@ templ layout(activePage string) {
<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>

View file

@ -31,7 +31,7 @@ func layout(activePage string) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
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 {
return templ_7745c5c3_Err
}
@ -100,7 +100,7 @@ func Link(activePage, targetPage, title string) templ.Component {
var templ_7745c5c3_Var3 templ.SafeURL
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinURLErrs(fmt.Sprint(targetPage, ".html"))
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))
if templ_7745c5c3_Err != nil {
@ -118,7 +118,7 @@ func Link(activePage, targetPage, title string) templ.Component {
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(title)
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))
if templ_7745c5c3_Err != nil {
@ -165,7 +165,7 @@ func GreenLink(activePage, targetPage, title string) templ.Component {
var templ_7745c5c3_Var6 templ.SafeURL
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(fmt.Sprint(targetPage, ".html"))
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))
if templ_7745c5c3_Err != nil {
@ -183,7 +183,7 @@ func GreenLink(activePage, targetPage, title string) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(title)
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))
if templ_7745c5c3_Err != nil {
@ -225,7 +225,7 @@ func subnavHeader(title, description string) templ.Component {
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(title)
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))
if templ_7745c5c3_Err != nil {
@ -238,7 +238,7 @@ func subnavHeader(title, description string) templ.Component {
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(description)
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))
if templ_7745c5c3_Err != nil {

View file

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

View file

@ -67,7 +67,7 @@ func Portfolio(images []string) templ.Component {
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 {
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');
if (!grid) return;
var items = Array.from(grid.querySelectorAll(':scope > div'));
var items = Array.from(grid.children);
if (!items.length) return;
var lb = document.createElement('div');
@ -20,9 +20,11 @@
function open(idx) {
current = idx;
var img = items[current].querySelector('img');
lbImg.removeAttribute('src');
lbImg.alt = '';
lb.classList.add('open');
lbImg.src = img.src;
lbImg.alt = img.alt;
lb.classList.add('open');
}
function close() {