WIP of gallery redesign

content/art/nsfw/_index.md

@@ -0,0 +1,5 @@
+---
+title: "NSFW Art"
+layout: "art-nsfw"
+---
+

content/art/original/_index.md

@@ -0,0 +1,6 @@
+---
+title: "Original Art"
+layout: "art-originals"
+---
+
+These are artworks I created of my own original characters!

data/art/2024/charsheet-drfrizzly.json

@@ -1,14 +0,0 @@
-{
-    "alt_text": "Character sheet of one Dr. Frizzly, a (mad?) scientist who makes minigames. He's clad in a white coat, a dark green undershirt and one messy tie. He's also decked out in khakis.",
-    "characters": [
-        "Dr. Frizzly"
-    ],
-    "date": "2024-06-22",
-    "description": "Artfight preparation :-)",
-    "mastodon_url": "https://mastodon.art/@redstrate/112662289434324901",
-    "program": "Krita",
-    "tags": [
-        "character sheet"
-    ],
-    "title": "Dr. Frizzly Character Sheet"
-}

data/art/2024/charsheet-juritta.json

@@ -1,14 +0,0 @@
-{
-    "alt_text": "Character sheet of Juritta, a Warrior of Light from FFXIV. She's a Viera, and clad in a green-ish dancers outfit. She has her hair tied up on one side, while letting the rest loose.",
-    "characters": [
-        "Juritta"
-    ],
-    "date": "2024-06-22",
-    "description": "Artfight preparation :-)",
-    "mastodon_url": "https://mastodon.art/@redstrate/112662299507727427",
-    "program": "Krita",
-    "tags": [
-        "character sheet"
-    ],
-    "title": "Juritta Character Sheet"
-}

data/art/2024/charsheet-luci.json

@@ -1,14 +0,0 @@
-{
-    "alt_text": "Character sheet of Luci, an electrical engineering student. To that end, she's wearing a T-shirt with \"EE\" on it. She also has purple short hair, a pair of red glasses and some baggy dark pants.",
-    "characters": [
-        "Luci"
-    ],
-    "date": "2024-06-22",
-    "description": "Artfight preparation :-)",
-    "mastodon_url": "https://mastodon.art/@redstrate/112662289434324901",
-    "program": "Krita",
-    "tags": [
-        "character sheet"
-    ],
-    "title": "Luci Character Sheet"
-}

data/art/2024/charsheet-merume.json

@@ -1,14 +0,0 @@
-{
-    "alt_text": "Character sheet of Merume, a four-armed succubus with blue ponytails. She has long elven-like ears, a basic tanktop on and some shorts. She's also sporting a tail and some socks.",
-    "characters": [
-        "Merume"
-    ],
-    "date": "2024-06-22",
-    "description": "Artfight preparation :-)",
-    "mastodon_url": "https://mastodon.art/@redstrate/112662299507727427",
-    "program": "Krita",
-    "tags": [
-        "character sheet"
-    ],
-    "title": "Merume Character Sheet"
-}

data/art/2024/charsheet-mysterious-swordswoman.json

@@ -1,14 +0,0 @@
-{
-    "alt_text": "Character sheet of a young woman, nicknamed \"Mysterious Swordswoman\". She has medium long brown hair, dark eyes and is dressed in dark garments with a golden touch. She is wielding a sword on her right.",
-    "characters": [
-        "Mysterious Swordswoman"
-    ],
-    "date": "2024-06-22",
-    "description": "Artfight preparation :-) Based off of her 2023 sheet",
-    "mastodon_url": "https://mastodon.art/@redstrate/112662289434324901",
-    "program": "Krita",
-    "tags": [
-        "character sheet"
-    ],
-    "title": "Mysterious Swordswoman Character Sheet"
-}

data/art/2024/charsheet-sakura.json

@@ -1,13 +0,0 @@
-{
-    "alt_text": "Character sheet of Sakura, one lone catgirl with long dirty blonde hair. She's got leggings and a sports tank on. Oh, and some shoes for running?",
-    "characters": [
-        "Sakura"
-    ],
-    "date": "2024-06-22",
-    "description": "Artfight preparation :-) Based off of her 2023 sheet",
-    "mastodon_url": "https://mastodon.art/@redstrate/112662299507727427",
-    "tags": [
-        "character sheet"
-    ],
-    "title": "Sakura Character Sheet"
-}

themes/red/assets/css/site.css

@@ -128,6 +128,7 @@ body {
     accent-color: var(--accent-color);
 
     color: var(--text-color);
+    font-family: sans-serif;
 }
 
 
@@ -382,10 +383,31 @@ figure figcaption {
     margin-right: 5px;
 }
 
+.grid-container {
+    background-color: var(--background-tertiary);
+    margin: -15px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 15px;
+    border-top: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.grid-item {
+    border: 1px solid var(--border-color);
+    border-radius: 3px;
+    background-color: var(--background-secondary);
+    margin-bottom: 8px;
+    padding-bottom: 5px;
+}
 
 .grid-item img {
-    border: 1px inset black;
+    border-bottom: 1px solid var(--border-color);
-    border-radius: 3px;
+}
+
+.grid-item span {
+    padding: 10px;
+    color: var(--text-color);
 }
 
 .grid {

themes/red/layouts/_default/art-detail.html

@@ -2,7 +2,12 @@
 
 {{ define "main" }}
     <h2>{{ .Title }}</h2>
-
+    <i style="margin: 0">
+    Posted on
+    <time datetime="{{ .Page.Lastmod.Format "2006-01-02" }}" class="text-muted">
+        {{ $.Date.Format "January 2006" }}
+    </time>
+    </i>
     <hr>
 
     {{ if  (and (not $.Params.animation) (and (not (in .File.Dir "art/guest")) (and (not $.Params.threed) (not $.Params.comic) )) ) }}
@@ -51,16 +56,47 @@
 
     {{ partial "voting" . }}
 
-    <table>
+    {{ with .Content }}
-        <tr>
+        {{ $.Scratch.Set "header-type" "h3" }}
-            <th>{{ i18n "date" }}</th>
+        {{ $.Scratch.Set "header-name" "Commentary" }}
-            <td>
+        {{ partial "fake-heading.html" $ }}
-                <time datetime="{{ .Page.Lastmod.Format "2006-01-02" }}" class="text-muted">
-                    {{ $.Date.Format "January 2006" }}
-                </time>
-            </td>
-        </tr>
 
+        {{ . }}
+    {{ end }}
+
+    {{ if .Params.threed }}
+        {{ $site := resources.Get "js/model-viewer.min.js" }}
+        {{ if hugo.IsProduction }}
+            {{ $site = $site | fingerprint | resources.PostProcess }}
+        {{ end }}
+        <script type="module" src="{{ $site.RelPermalink }}" integrity="{{ $site.Data.Integrity }}"></script>
+    {{ end }}
+
+    {{ partial "comments" . }}
+{{ end }}
+
+{{ define "details" }}
+    <strong>This artwork was also posted on:</strong>
+
+    <br>
+
+    {{ with .Params.mastodon_url }}
+        <a href="{{ . }}"><img class="symbolic-icon" alt="Mastodon icon" title="Mastodon" width="32" height="32" src="/icons/mastodon.svg"/></a>
+    {{ end }}
+
+    {{ with .Params.pixiv_url }}
+        <a href="{{ . }}"><img class="symbolic-icon" alt="Pixiv icon" title="Pixiv" width="32" height="32" src="/icons/pixiv.svg"/></a>
+    {{ end }}
+    <br>
+
+    <strong>Created with:</strong>
+    <br>
+
+    {{ with .Params.program }}
+        <span>{{ . }}</span>
+    {{ end }}
+
+    <table>
         {{ with .Params.arttags }}
             <tr>
                 <th>{{ i18n "tags" }}</th>
@@ -93,50 +129,5 @@
                 </td>
             </tr>
         {{ end }}
-
-        {{ with .Params.program }}
-            <tr>
-                <th>{{ i18n "program" }}</th>
-                <td>
-                    {{ . }}
-                </td>
-            </tr>
-        {{ end }}
-
-        {{ with .Params.mastodon_url }}
-            <tr>
-                <th>Mastodon URL</th>
-                <td>
-                    <a href="{{ . }}">Mastodon Post</a>
-                </td>
-            </tr>
-        {{ end }}
-
-        {{ with .Params.pixiv_url }}
-            <tr>
-                <th>Pixiv URL</th>
-                <td>
-                    <a href="{{ . }}">Pixiv Post</a>
-                </td>
-            </tr>
-        {{ end }}
     </table>
-
-    {{ with .Content }}
-        {{ $.Scratch.Set "header-type" "h3" }}
-        {{ $.Scratch.Set "header-name" "Commentary" }}
-        {{ partial "fake-heading.html" $ }}
-
-        {{ . }}
-    {{ end }}
-
-    {{ if .Params.threed }}
-        {{ $site := resources.Get "js/model-viewer.min.js" }}
-        {{ if hugo.IsProduction }}
-            {{ $site = $site | fingerprint | resources.PostProcess }}
-        {{ end }}
-        <script type="module" src="{{ $site.RelPermalink }}" integrity="{{ $site.Data.Integrity }}"></script>
-    {{ end }}
-
-    {{ partial "comments" . }}
 {{ end }}

themes/red/layouts/_default/art-nsfw.html

@@ -0,0 +1,19 @@
+{{/* Page layout used for the main art gallery page. */}}
+
+{{ define "main" }}
+    <h2>{{ .Title }}</h2>
+
+    <hr>
+
+    {{ .Content }}
+
+    {{ $tags := slice "fan art" "artfight" }}
+    {{ $art := .Site.GetPage "/art" }}
+    {{ $artworks := (where $art.RegularPagesRecursive "Type" "art") }}
+    {{ $nsfw_art := (where $artworks "Params.nsfw" "=" true) }}
+
+    {{ $.Scratch.Set "paginator" (.Paginate $nsfw_art) }}
+    {{ partial "art-gallery" . }}
+
+    {{ partial "gallery-js" . }}
+{{ end }}

themes/red/layouts/_default/art-originals.html

@@ -0,0 +1,22 @@
+{{/* Page layout used for the main art gallery page. */}}
+
+{{ define "main" }}
+    <h2>{{ .Title }}</h2>
+
+    <hr>
+
+    {{ .Content }}
+
+    {{ $tags := slice "fan art" "artfight" }}
+    {{ $art := .Site.GetPage "/art" }}
+    {{ $artworks := (where $art.RegularPagesRecursive "Type" "art") }}
+    {{ $fan_art := (where $artworks "Params.arttags" "intersect" $tags) }}
+    {{ $guest_art := (where $artworks "Params.guest" "=" true) }}
+    {{ $nsfw_art := (where $artworks "Params.nsfw" "=" true) }}
+    {{ $originals := complement $fan_art $guest_art $nsfw_art $artworks }}
+
+    {{ $.Scratch.Set "paginator" (.Paginate $originals) }}
+    {{ partial "art-gallery" . }}
+
+    {{ partial "gallery-js" . }}
+{{ end }}

themes/red/layouts/_default/art.html

@@ -5,9 +5,6 @@
 
     <hr>
 
-    {{ $paginator := .Paginate (where .RegularPagesRecursive "Type" "art") }}
-
-    {{ if eq $paginator.PageNumber 1}}
     <div class="art-outer">
         <div class="art-inner">
             {{ $alertimg := resources.Get "alert.png" }}
@@ -24,15 +21,15 @@
     </div>
 
     <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">Statistics</a>
-        <a class="art-button" href="/art/guest">Guest Art</a>
+        <a class="art-button" href="/commission">Commission Info</a>
-        <a class="art-button" href="/commission">Commission</a>
     </div>
-    {{ end }}
 
-    {{ partial "art-gallery" . }}
+    <a class="art-button" href="/art/original">Original</a><br>
+    <a class="art-button" href="/art/tags/fan-art/">Fanart</a><br>
+    <a class="art-button" href="/art/nsfw">NSFW</a><br>
+    <a class="art-button" href="/art/guest">Guest</a><br>
+    <a class="art-button" href="/art/characters">Characters</a>
 
     {{ partial "art-years" . }}
 

themes/red/layouts/_default/arttag.html

@@ -1,6 +1,7 @@
 {{ define "main" }}
     <h2>{{ .Title }}</h2>
     <hr>
+    {{ $.Scratch.Set "paginator" (.Paginate (where .Pages "Type" "art")) }}
     {{ partial "art-gallery" . }}
     {{ partial "gallery-js" . }}
 {{ end }}

themes/red/layouts/_default/baseof.html

@@ -11,6 +11,7 @@
         </div>
         {{- block "main" . }}{{- end }}
         </article>
+        <aside>{{- block "details" . }}{{- end }}</aside>
         </div>
         <footer>{{- partial "footer.html" . -}}</footer>
 

themes/red/layouts/_default/character.html

@@ -30,6 +30,7 @@
     <hr>
     {{ end }}
 
+    {{ $paginator := .Paginate (where $.Site.Pages "Type" "art") }}
     {{ partial "art-gallery" . }}
 
     {{ $paginator := (where (where .RegularPagesRecursive "Type" "art") "Params.guest" "=" true) }}

themes/red/layouts/_default/guestart.html

@@ -10,6 +10,7 @@
         {{ .Content }}
     {{ end }}
 
+    {{ $.Scratch.Set "paginator" (.Paginate ((where (where .RegularPagesRecursive "Type" "art") "Params.guest" "=" true))) }}
     {{ partial "art-gallery" . }}
 
     {{ partial "gallery-js" . }}

themes/red/layouts/_default/listchar.html

@@ -6,6 +6,7 @@
     <hr>
 
     <h3>Original</h3>
+    <div class="generic-con">
 
     {{ range $name, $taxonomy := (index .Site.Taxonomies .Params.listtag) }}
         {{ $original := false }}
@@ -17,10 +18,10 @@
         <a class="character" href="{{ $.Params.url | relLangURL }}{{ $name | urlize }}"><img class="gallery-img" width=256 height=256 src="{{ $.Site.Params.image_host }}/chars/{{ $name | urlize }}.jpg"/><span>{{ $taxonomy.Page.Title }}</span></a>
         {{ end }}
     {{ end }}
+    </div>
 
     <h3>Others</h3>
-
+    <div class="generic-con">
-
     {{ range $name, $taxonomy := (index .Site.Taxonomies .Params.listtag) }}
         {{ $original := false }}
         {{ if $taxonomy.Page.Params.original }}
@@ -31,5 +32,5 @@
         <a class="character" href="{{ $.Params.url | relLangURL }}{{ $name | urlize }}"><img class="gallery-img" width=256 height=256 src="{{ $.Site.Params.image_host }}/chars/{{ $name | urlize }}.jpg"/><span>{{ $taxonomy.Page.Title }}</span></a>
         {{ end }}
     {{ end }}
-
+    </div>
 {{ end }}

themes/red/layouts/partials/art-gallery.html

@@ -1,20 +1,17 @@
 {{/* Partial used to display a grid of artwork. */}}
 
-{{ $paginator := .Paginate (where $.Site.Pages "Type" "art") }}
-
 {{ template "_internal/pagination.html" . }}
-{{ $on_guest := eq .Title "Guest Art" }}
+{{ $paginator := .Scratch.Get "paginator" }}
 
+<div class="grid-container">
 <div class="grid">
     <div class="grid-sizer"></div>
     <div class="gutter-sizer"></div>
 
     {{ range $paginator.Pages }}
-        {{ $is_guest := .Params.guest }}
+        {{ partial "render-art" . }}
-        {{ if eq $on_guest $is_guest }}
-            {{ partial "render-art" . }}
-        {{ end }}
     {{ end }}
 </div>
+</div>
 
 {{ template "_internal/pagination.html" . }}

themes/red/layouts/partials/render-art.html

@@ -9,28 +9,33 @@
 {{ $year := .Date.Format "2006" }}
 
 {{ with $full }}
+        <picture>
+                <source srcset="{{ $full }}" type="image/avif" width="{{ $.Params.thumb_width }}" height="{{ $.Params.thumb_height }}"/>
+                <img style="width: 100%; height: auto;" alt="{{ $.Params.alt_text }}" width="{{ $.Params.thumb_width }}" height="{{ $.Params.thumb_height }}" src="{{ $jpeg }}"/>
+        </picture>
+
+        <span>
+        {{ $title }}, {{ $year }}
+
         {{ if $.Params.threed }}
                 {{ with resources.Get "3d.png" }}
-                        <img class="gallery-type-icon-hidden" alt="3D cube icon" title="Viewable 3D" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
+                        <img width="16" height="16" alt="3D cube icon" title="Viewable 3D Model" src="{{ .RelPermalink }}">
                 {{ end }}
         {{ end }}
 
         {{ if $.Params.comic }}
                 {{ with resources.Get "comic.png" }}
-                        <img class="gallery-type-icon-hidden" alt="Comic icon" title="Viewable Comic" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
+                        <img width="16" height="16" alt="Comic icon" title="Viewable Comic" src="{{ .RelPermalink }}">
                 {{ end }}
         {{ end }}
 
+
         {{ if $.Params.animation }}
                 {{ with resources.Get "play-circle.png" }}
-                        <img class="gallery-type-icon-hidden" alt="Play animation icon" title="Viewable Animation" style="z-index: 1; position: absolute; left: 10px; top: 10px; border: none" src="{{ .RelPermalink }}">
+                        <img width="16" height="16" alt="Play animation icon" title="Viewable Animation" src="{{ .RelPermalink }}">
                 {{ end }}
         {{ end }}
-
+        </span>
-        <picture>
-                <source srcset="{{ $full }}" type="image/avif" width="{{ $.Params.thumb_width }}" height="{{ $.Params.thumb_height }}"/>
-                <img style="width: 100%; height: auto;" alt="{{ $.Params.alt_text }}" title="{{ $title }} ({{ $year }})" width="{{ $.Params.thumb_width }}" height="{{ $.Params.thumb_height }}" src="{{ $jpeg }}"/>
-        </picture>
 {{ end }}
 </a>