From 7d23e9106fa73053c52aa0882ea6c3b01af3fcb2 Mon Sep 17 00:00:00 2001 From: Joshua Goins Date: Wed, 21 Feb 2024 17:54:24 -0500 Subject: [PATCH] Improve art gallery layout, pagination --- content/_index.md | 2 +- themes/red/assets/css/site.css | 37 ++++++++++++------- themes/red/layouts/_default/art.html | 24 ++---------- themes/red/layouts/partials/art-gallery.html | 20 ++-------- themes/red/layouts/partials/art-years.html | 2 +- themes/red/layouts/partials/featured-art.html | 4 +- .../red/layouts/shortcodes/featured-art.html | 1 + 7 files changed, 37 insertions(+), 53 deletions(-) diff --git a/content/_index.md b/content/_index.md index fd76ad2..575b315 100644 --- a/content/_index.md +++ b/content/_index.md @@ -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. diff --git a/themes/red/assets/css/site.css b/themes/red/assets/css/site.css index 78e8573..a87a672 100644 --- a/themes/red/assets/css/site.css +++ b/themes/red/assets/css/site.css @@ -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; +} diff --git a/themes/red/layouts/_default/art.html b/themes/red/layouts/_default/art.html index 4ff71de..9b92d70 100644 --- a/themes/red/layouts/_default/art.html +++ b/themes/red/layouts/_default/art.html @@ -13,8 +13,6 @@
{{ . }}
{{ end }} -
Art may be risque, browse with caution.
-

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 how this gallery works and how I maintain it.

The gallery is sorted by date, but there's other sections to check out such as Guest Art and Stats! You can also filter by tags, or by characters.

@@ -23,33 +21,19 @@ {{ with resources.Get "pics/pic-gallery.png" }} - Drawing of an art gallery with several people standing around a piece hanging on the wall. + Drawing of an art gallery with several people standing around a piece hanging on the wall. {{ end }} - {{ .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" . }} -
Characters Tags - Stats + Statistics Guest Art - - {{ if $.Params.commissions }} - Commissions - {{ end }}
{{ end }} {{ partial "art-gallery" . }} + + {{ partial "art-years" . }} {{ end }} diff --git a/themes/red/layouts/partials/art-gallery.html b/themes/red/layouts/partials/art-gallery.html index 8065b08..93ee3a0 100644 --- a/themes/red/layouts/partials/art-gallery.html +++ b/themes/red/layouts/partials/art-gallery.html @@ -1,6 +1,8 @@ {{ $paginator := .Paginate (where .RegularPagesRecursive "Type" "art") }} {{ $guest := false }} +{{ template "_internal/pagination.html" . }} +
@@ -30,23 +32,7 @@ {{ end }} -
- -{{ with $paginator.Prev }} -Prev -{{ else }} -Prev -{{ end }} - -{{ printf "Page %d" $paginator.PageNumber }} - -{{ with $paginator.Next }} -Next -{{ else }} -Next -{{ end }} - -
+{{ template "_internal/pagination.html" . }} {{ $site := resources.Get "js/gallery.js" }} {{ if hugo.IsProduction }} diff --git a/themes/red/layouts/partials/art-years.html b/themes/red/layouts/partials/art-years.html index 8062e90..7042329 100644 --- a/themes/red/layouts/partials/art-years.html +++ b/themes/red/layouts/partials/art-years.html @@ -4,7 +4,7 @@ {{ $thumbp := printf "/year-thumbs/%d.webp" . }} {{ with resources.Get $thumbp }} - A thumbnail of {{ $year }}'s art with the text in the center. + A thumbnail of {{ $year }}'s art with the text in the center. {{ end }} {{ end }} diff --git a/themes/red/layouts/partials/featured-art.html b/themes/red/layouts/partials/featured-art.html index f98050c..12d8db1 100644 --- a/themes/red/layouts/partials/featured-art.html +++ b/themes/red/layouts/partials/featured-art.html @@ -51,5 +51,7 @@ {{ end }} {{ end }}
- View all art + {{ if not (eq (.Scratch.Get "skip_all") "true") }} + View all art + {{ end }} diff --git a/themes/red/layouts/shortcodes/featured-art.html b/themes/red/layouts/shortcodes/featured-art.html index 588dfc0..86ac200 100644 --- a/themes/red/layouts/shortcodes/featured-art.html +++ b/themes/red/layouts/shortcodes/featured-art.html @@ -1 +1,2 @@ +{{ .Scratch.Set "skip_all" "false" }} {{ partial "featured-art" . }}