image placeholders
This commit is contained in:
parent
16549967e3
commit
8512c9e3d7
8 changed files with 23 additions and 11 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,5 @@ templ Portfolio(images []string) {
|
|||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<script defer src="portfolio.js"></script>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
BIN
img/.DS_Store
vendored
Binary file not shown.
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue