bronku/piekarnikgosipl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

image styling

Browse source
This commit is contained in:
bronkuu 2026-06-02 10:07:30 +02:00
parent 232da2be65
commit a891f1087a
3 changed files with 27 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

18
css/portfolio.css
View file

@ -1,12 +1,19 @@
#portfolio-grid { #portfolio-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-flow: dense; grid-auto-flow: dense;
gap: 0.5rem; gap: 1.5rem;
& > * { & > * {
overflow: hidden; overflow: hidden;
border-radius: var(--small-border-radius); border-radius: var(--border-radius);
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
}
& > *:hover {
transform: translateY(-8px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
} }
& img { & img {
@ -14,6 +21,11 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.5s;
}
& > *:hover img {
transform: scale(1.08);
} }
& > :nth-child(7n) { & > :nth-child(7n) {

4
html/portfolio.templ
View file

@ -7,7 +7,9 @@ templ Portfolio(images []string) {
<section> <section>
<div id="portfolio-grid"> <div id="portfolio-grid">
for _, img := range images { for _, img := range images {
@AvifImage("portfolio/"+img, "portfolio") <div>
@AvifImage("portfolio/"+img, "portfolio")
</div>
} }
</div> </div>
</section> </section>

10
html/portfolio_templ.go
View file

@ -54,12 +54,20 @@ func Portfolio(images []string) templ.Component {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
for _, img := range images { for _, img := range images {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = AvifImage("portfolio/"+img, "portfolio").Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = AvifImage("portfolio/"+img, "portfolio").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</div></section></main>") 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
} }