WIP of gallery redesign
This commit is contained in:
parent
b9753bc9f5
commit
83fbdc3ae9
20 changed files with 153 additions and 167 deletions
5
content/art/nsfw/_index.md
Normal file
5
content/art/nsfw/_index.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: "NSFW Art"
|
||||
layout: "art-nsfw"
|
||||
---
|
||||
|
||||
6
content/art/original/_index.md
Normal file
6
content/art/original/_index.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: "Original Art"
|
||||
layout: "art-originals"
|
||||
---
|
||||
|
||||
These are artworks I created of my own original characters!
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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-radius: 3px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.grid-item span {
|
||||
padding: 10px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.grid {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<tr>
|
||||
<th>{{ i18n "date" }}</th>
|
||||
<td>
|
||||
<time datetime="{{ .Page.Lastmod.Format "2006-01-02" }}" class="text-muted">
|
||||
{{ $.Date.Format "January 2006" }}
|
||||
</time>
|
||||
</td>
|
||||
</tr>
|
||||
{{ 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 }}
|
||||
|
||||
{{ 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 }}
|
||||
|
|
|
|||
19
themes/red/layouts/_default/art-nsfw.html
Normal file
19
themes/red/layouts/_default/art-nsfw.html
Normal file
|
|
@ -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 }}
|
||||
22
themes/red/layouts/_default/art-originals.html
Normal file
22
themes/red/layouts/_default/art-originals.html
Normal file
|
|
@ -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 }}
|
||||
|
|
@ -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</a>
|
||||
<a class="art-button" href="/commission">Commission Info</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" . }}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
</div>
|
||||
{{- block "main" . }}{{- end }}
|
||||
</article>
|
||||
<aside>{{- block "details" . }}{{- end }}</aside>
|
||||
</div>
|
||||
<footer>{{- partial "footer.html" . -}}</footer>
|
||||
|
||||
|
|
|
|||
|
|
@ -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) }}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
{{ .Content }}
|
||||
{{ end }}
|
||||
|
||||
{{ $.Scratch.Set "paginator" (.Paginate ((where (where .RegularPagesRecursive "Type" "art") "Params.guest" "=" true))) }}
|
||||
{{ partial "art-gallery" . }}
|
||||
|
||||
{{ partial "gallery-js" . }}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
{{ if eq $on_guest $is_guest }}
|
||||
{{ partial "render-art" . }}
|
||||
{{ end }}
|
||||
{{ partial "render-art" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ template "_internal/pagination.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 }}
|
||||
|
||||
<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>
|
||||
</span>
|
||||
{{ end }}
|
||||
</a>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue