Improve art gallery layout, pagination
This commit is contained in:
parent
5d83215f8e
commit
7d23e9106f
7 changed files with 37 additions and 53 deletions
|
|
@ -4,7 +4,7 @@ title: "Home"
|
|||
|
||||
{{< insert-pic "pic-home.webp" "Drawing of a landscape bathed in sunlight. There's a small cottage in the middle of green hills." >}}
|
||||
|
||||
Welcome to my personal corner of the Internet! My username is **redstrate** and I'm a software engineer, KDE developer and artist. I like Linux, taking apart stuff, and spending too much time curating this site. This website functions as my portfolio and dumping ground for the things I work on.
|
||||
Welcome to my personal corner of the Internet! My username is **redstrate** and I'm a software engineer, KDE developer and artist. I like Linux, taking apart stuff, and wasting time working on my website. This place functions as my portfolio and dumping ground for the things I like to work on.
|
||||
|
||||
* Check out my [blog posts]({{< ref "blog" >}}) for Linux, KDE, and technical talks.
|
||||
* If you're into art, I have a gallery of [my drawings]({{< ref "art" >}})! I also do some [music]({{< ref "music" >}}), but not often.
|
||||
|
|
|
|||
|
|
@ -103,19 +103,9 @@
|
|||
}
|
||||
|
||||
.page-pic {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.art-outer .gallery-img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
visibility: hidden;
|
||||
height: 0 !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -366,6 +356,15 @@ figure figcaption {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.year-con > a:last-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.year-con > a:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
.grid-item img {
|
||||
border: 1px inset black;
|
||||
border-radius: 3px;
|
||||
|
|
@ -650,3 +649,15 @@ model-viewer {
|
|||
.toot-card-image-image {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
display: inline-block;
|
||||
border: 1px solid gray;
|
||||
border-radius: 2px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,6 @@
|
|||
<div class="new-banner"><img alt="Alert Icon" width="16" height="16" class="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"><b>{{ . }}</b><img alt="Alert Icon" width="16" height="16" class="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"></div>
|
||||
{{ end }}
|
||||
|
||||
<div class="new-banner"><img alt="Alert Icon" width="16" height="16" class="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"><b>Art may be risque, browse with caution.</b><img alt="Alert Icon" width="16" height="16" class="banner-alert-icon" src="{{ $alertimg.RelPermalink }}"></div>
|
||||
|
||||
<p>Welcome to my art gallery! I have been saving my work since 2016, and this is the most complete archive of my work online. You also might be interested in <a href="/blog/2023/04/breakdown-of-my-static-art-gallery/">how this gallery works and how I maintain it</a>.</p>
|
||||
|
||||
<p>The gallery is sorted by date, but there's other sections to check out such as <a href="/art/guest">Guest Art</a> and <a href="/art/stats/">Stats</a>! You can also filter by <a href="/art/tags">tags</a>, or by <a href="/art/characters">characters</a>.</p>
|
||||
|
|
@ -23,33 +21,19 @@
|
|||
</div>
|
||||
|
||||
{{ with resources.Get "pics/pic-gallery.png" }}
|
||||
<img class="gallery-img" alt="Drawing of an art gallery with several people standing around a piece hanging on the wall." width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">
|
||||
<img class="gallery-img page-pic" alt="Drawing of an art gallery with several people standing around a piece hanging on the wall." width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ .Scratch.Set "header-type" "h3" }}
|
||||
{{ .Scratch.Set "header-name" "Featured" }}
|
||||
{{ partial "fake-heading.html" . }}
|
||||
|
||||
{{ partial "featured-art" . }}
|
||||
|
||||
{{ .Scratch.Set "header-type" "h3" }}
|
||||
{{ .Scratch.Set "header-name" "Years" }}
|
||||
{{ partial "fake-heading.html" . }}
|
||||
|
||||
{{ partial "art-years" . }}
|
||||
|
||||
<div class="art-button-container">
|
||||
<a class="art-button" href="/art/characters">Characters</a>
|
||||
<a class="art-button" href="/art/tags">Tags</a>
|
||||
<a class="art-button" href="/art/stats">Stats</a>
|
||||
<a class="art-button" href="/art/stats">Statistics</a>
|
||||
<a class="art-button" href="/art/guest">Guest Art</a>
|
||||
|
||||
{{ if $.Params.commissions }}
|
||||
<a class="art-button" href="/commission">Commissions</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "art-gallery" . }}
|
||||
|
||||
{{ partial "art-years" . }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
{{ $paginator := .Paginate (where .RegularPagesRecursive "Type" "art") }}
|
||||
{{ $guest := false }}
|
||||
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-sizer"></div>
|
||||
<div class="gutter-sizer"></div>
|
||||
|
|
@ -30,23 +32,7 @@
|
|||
|
||||
{{ end }}
|
||||
|
||||
<div style="text-align: center;">
|
||||
|
||||
{{ with $paginator.Prev }}
|
||||
<a style="float: left" href="{{ .URL }}">Prev</a>
|
||||
{{ else }}
|
||||
<span style="float: left">Prev</span>
|
||||
{{ end }}
|
||||
|
||||
<span style="display: inline-block;">{{ printf "Page %d" $paginator.PageNumber }}</span>
|
||||
|
||||
{{ with $paginator.Next }}
|
||||
<a style="float: right" href="{{ .URL }}">Next</a>
|
||||
{{ else }}
|
||||
<span style="float: right">Next</span>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
|
||||
{{ $site := resources.Get "js/gallery.js" }}
|
||||
{{ if hugo.IsProduction }}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<a class="no-decoration" href="/art/{{ . }}">
|
||||
{{ $thumbp := printf "/year-thumbs/%d.webp" . }}
|
||||
{{ with resources.Get $thumbp }}
|
||||
<img style="margin-right: 5px" width="256" height="128" title="{{ $year }}" alt="A thumbnail of {{ $year }}'s art with the text in the center." class="gallery-img article-img" src="{{ .RelPermalink }}">
|
||||
<img width="256" height="128" title="{{ $year }}" alt="A thumbnail of {{ $year }}'s art with the text in the center." class="gallery-img article-img" src="{{ .RelPermalink }}">
|
||||
{{ end }}
|
||||
</a>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -51,5 +51,7 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<a href="/art">View all art</a>
|
||||
{{ if not (eq (.Scratch.Get "skip_all") "true") }}
|
||||
<a href="/art">View all art</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
{{ .Scratch.Set "skip_all" "false" }}
|
||||
{{ partial "featured-art" . }}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue