First draft created with Claude
TO DO: cleaning up the code, Claude is terrible with keeping css tidy <3
This commit is contained in:
@@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 800px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
{{ define "head" }}
|
||||
<style>
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
flex-wrap: wrap;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: .4rem .9rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2rem;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-size: .9rem;
|
||||
transition: background .15s, color .15s;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
border-color: #222;
|
||||
}
|
||||
|
||||
.masonry {
|
||||
columns: 4 240px;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.artwork-card {
|
||||
break-inside: avoid;
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
|
||||
.artwork-card:hover {
|
||||
opacity: .85;
|
||||
}
|
||||
|
||||
.artwork-card img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.artwork-card img + img {
|
||||
border-top: 2px solid #fff;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
padding: .6rem .75rem .75rem;
|
||||
}
|
||||
|
||||
.card-info h3 {
|
||||
margin: 0 0 .2rem;
|
||||
font-size: .95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
margin: 0;
|
||||
font-size: .8rem;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
display: flex;
|
||||
gap: .25rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: .4rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: .72rem;
|
||||
background: #e8e8e8;
|
||||
padding: .1rem .4rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.artwork-card.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<div class="filter-bar">
|
||||
<button class="filter-btn active" data-filter="all">All</button>
|
||||
{{ range $name, $_ := $.Site.Taxonomies.categories }}
|
||||
<button class="filter-btn" data-filter="{{ $name }}">{{ $name | title }}</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="masonry">
|
||||
{{ range .Pages.ByDate.Reverse }}
|
||||
{{ $cats := delimit (apply .Params.categories "urlize" ".") " " }}
|
||||
<a class="artwork-card" href="{{ .RelPermalink }}" data-categories="{{ $cats }}">
|
||||
{{ range .Params.images }}
|
||||
{{ $img := resources.Get . }}
|
||||
{{ if $img }}
|
||||
{{ $thumb := $img.Resize "600x webp" }}
|
||||
<img src="{{ $thumb.RelPermalink }}" alt="{{ $.Title }}" loading="lazy"
|
||||
width="{{ $thumb.Width }}" height="{{ $thumb.Height }}">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<div class="card-info">
|
||||
<h3>{{ .Title }}</h3>
|
||||
<p class="card-meta">
|
||||
{{ with .Params.material }}{{ . }}{{ end -}}
|
||||
{{ with .Params.size }} · {{ . }}{{ end }}
|
||||
</p>
|
||||
{{ with .Params.tags }}
|
||||
<div class="card-tags">
|
||||
{{ range . }}<span class="tag">{{ . }}</span>{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const btns = document.querySelectorAll('.filter-btn');
|
||||
const cards = document.querySelectorAll('.artwork-card');
|
||||
|
||||
btns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
btns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
const f = btn.dataset.filter;
|
||||
cards.forEach(c => {
|
||||
c.classList.toggle('hidden',
|
||||
f !== 'all' && !c.dataset.categories.split(' ').includes(f));
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,115 @@
|
||||
{{ define "head" }}
|
||||
<style>
|
||||
.artwork-detail {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin: 1.5rem 0 1rem;
|
||||
font-size: .9rem;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.artwork-title {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.artwork-images img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin-bottom: .75rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.artwork-meta {
|
||||
margin: 1.5rem 0;
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.artwork-meta dl {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: .3rem 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.artwork-meta dt {
|
||||
font-size: .85rem;
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.artwork-meta dd {
|
||||
margin: 0;
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
.artwork-tags {
|
||||
display: flex;
|
||||
gap: .3rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: .78rem;
|
||||
background: #e8e8e8;
|
||||
padding: .15rem .45rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.artwork-body {
|
||||
margin-top: 1.5rem;
|
||||
font-size: .95rem;
|
||||
line-height: 1.6;
|
||||
color: #444;
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<div class="artwork-detail">
|
||||
<a class="back-link" href="{{ .Parent.RelPermalink }}">← Gallery</a>
|
||||
|
||||
<h1 class="artwork-title">{{ .Title }}</h1>
|
||||
|
||||
<div class="artwork-images">
|
||||
{{ range .Params.images }}
|
||||
{{ $img := resources.Get . }}
|
||||
{{ if $img }}
|
||||
<img src="{{ $img.RelPermalink }}" alt="{{ $.Title }}">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="artwork-meta">
|
||||
<dl>
|
||||
{{ with .Params.material }}<dt>Material</dt><dd>{{ . }}</dd>{{ end }}
|
||||
{{ with .Params.size }}<dt>Size</dt><dd>{{ . }}</dd>{{ end }}
|
||||
<dt>Date</dt><dd>{{ .Date.Format "2 January 2006" }}</dd>
|
||||
</dl>
|
||||
|
||||
{{ with .Params.tags }}
|
||||
<div class="artwork-tags">
|
||||
{{ range . }}<span class="tag">{{ . }}</span>{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ with .Content }}
|
||||
<div class="artwork-body">{{ . }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -0,0 +1,180 @@
|
||||
{{ define "head" }}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.site-header {
|
||||
text-align: center;
|
||||
padding: 4rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-weight: 300;
|
||||
font-size: clamp(3rem, 8vw, 6rem);
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.site-header-rule {
|
||||
width: 3rem;
|
||||
border: none;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 2rem auto 0;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
flex-wrap: wrap;
|
||||
margin: 1.5rem 0;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: .4rem .9rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2rem;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-size: .9rem;
|
||||
transition: background .15s, color .15s;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
border-color: #222;
|
||||
}
|
||||
|
||||
.masonry {
|
||||
columns: 4 240px;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.artwork-card {
|
||||
break-inside: avoid;
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
|
||||
.artwork-card:hover {
|
||||
opacity: .85;
|
||||
}
|
||||
|
||||
.artwork-card img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.artwork-card img + img {
|
||||
border-top: 2px solid #fff;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
padding: .6rem .75rem .75rem;
|
||||
}
|
||||
|
||||
.card-info h3 {
|
||||
margin: 0 0 .2rem;
|
||||
font-size: .95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
margin: 0;
|
||||
font-size: .8rem;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
display: flex;
|
||||
gap: .25rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: .4rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: .72rem;
|
||||
background: #e8e8e8;
|
||||
padding: .1rem .4rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.artwork-card.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
<header class="site-header">
|
||||
<h1 class="site-title">Lovely <em>Lizard</em></h1>
|
||||
<hr class="site-header-rule">
|
||||
</header>
|
||||
|
||||
<div class="filter-bar">
|
||||
<button class="filter-btn active" data-filter="all">All</button>
|
||||
{{ range $name, $_ := $.Site.Taxonomies.categories }}
|
||||
<button class="filter-btn" data-filter="{{ $name }}">{{ $name | title }}</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="masonry">
|
||||
{{ range (where site.RegularPages "Section" "artwork").ByDate.Reverse }}
|
||||
{{ $cats := delimit (apply .Params.categories "urlize" ".") " " }}
|
||||
<a class="artwork-card" href="{{ .RelPermalink }}" data-categories="{{ $cats }}">
|
||||
{{ range .Params.images }}
|
||||
{{ $img := resources.Get . }}
|
||||
{{ if $img }}
|
||||
{{ $thumb := $img.Resize "600x webp" }}
|
||||
<img src="{{ $thumb.RelPermalink }}" alt="{{ $.Title }}" loading="lazy"
|
||||
width="{{ $thumb.Width }}" height="{{ $thumb.Height }}">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<div class="card-info">
|
||||
<h3>{{ .Title }}</h3>
|
||||
<p class="card-meta">
|
||||
{{ with .Params.material }}{{ . }}{{ end -}}
|
||||
{{ with .Params.size }} · {{ . }}{{ end }}
|
||||
</p>
|
||||
{{ with .Params.tags }}
|
||||
<div class="card-tags">
|
||||
{{ range . }}<span class="tag">{{ . }}</span>{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const btns = document.querySelectorAll('.filter-btn');
|
||||
const cards = document.querySelectorAll('.artwork-card');
|
||||
|
||||
btns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
btns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
const f = btn.dataset.filter;
|
||||
cards.forEach(c => {
|
||||
c.classList.toggle('hidden',
|
||||
f !== 'all' && !c.dataset.categories.split(' ').includes(f));
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user