Improve nav, local fontawesome, late submission display

main
Elnu 1 year ago
parent ba514b1973
commit fa7857ba84

@ -7,7 +7,6 @@ disableKinds = ["taxonomy", "taxonomyTerm", "RSS"]
[params]
AuthorName = "Elnu"
FontAwesomeKit = "c3c3b565dc"
MatomoURL = "matomo.elnu.com"
MatomoSiteId = "4"
CopyrightStart = 2021

@ -19,9 +19,9 @@
{{ if .Params.english }}
<button id="english" title="Show/hide translation">Show translation</button>
{{ end }}
<a id="kyujitai-info" target="_blank" class="clickable-icon" href="https://en.wikipedia.org/wiki/Ky%C5%ABjitai"><i class="fa-solid fa-circle-question"></i></a>
<a id="kyujitai-info" target="_blank" class="clickable-icon" href="https://en.wikipedia.org/wiki/Ky%C5%ABjitai"><svg class="svg-inline" aria-hidden="true" focusable="false" data-prefix="fas" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z"></path></svg></a>
<header>
<h3>Tegaki Tuesday #{{- $current -}}</h3>
<h3><a href="/">Tegaki Tuesday</a> #{{- $current -}}</h3>
<small><ruby><rp>(</rp><rt></rt><rp>)</rp></ruby><ruby><rp>(</rp><rt></rt><rp>)</rp></ruby>きの<ruby><rp>(</rp><rt></rt><rp>)</rp></ruby><ruby><rp>(</rp><rt>よう</rt><rp>)</rp></ruby><ruby><rp>(</rp><rt></rt><rp>)</rp></ruby>{{- $current -}}・<time datetime="{{- .Date.Format " 2006-01-02T15:04:05Z07:00" -}}">{{- .Date.Format "2006年01月02日" -}}</time></small>
</header>
{{ if .Params.override }}

@ -41,5 +41,4 @@ secondary.addEventListener("touchmove", scrollHandler);
})();
</script>
<!-- End Matomo Code -->
<script src="https://kit.fontawesome.com/{{ .Site.Params.FontAwesomeKit }}.js" crossorigin="anonymous"></script>
</head>

@ -1,17 +1,20 @@
<nav>
{{ $current := int (replaceRE `[^0-9]` "" .File) }}
{{ $scratch := newScratch }}
{{ $scratch.Set "isLatest" true }}
{{ range.Site.RegularPages }}
{{ if gt (int .File.TranslationBaseName) $current }}
{{ $scratch.Set "isLatest" false }}
{{ end }}
{{ end }}
{{ $latest := int (index .Site.RegularPages 0).File.TranslationBaseName }}
{{ $scratch.Set "isLatest" (eq $current $latest) }}
{{ if ne $current 1 }}
<a class="nav-button" href="../{{ sub $current 1 }}"><i class="fas fa-chevron-left"></i>&nbsp;#{{ sub $current 1 }}</a>
<a class="nav-button" href="../{{ sub $current 1 }}"><svg class="svg-inline" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path></svg>&nbsp;#{{ sub $current 1 }}</a>
{{ end }}
<span class="title"><a href="/"><i class="fa-solid fa-house"></i> Homepage</a></span>
<!-- <span class="title"><a href="/"><i class="fa-solid fa-house"></i> Homepage</a></span> -->
<form onsubmit="window.location.href = '/' + this.getElementsByTagName('input')[0].value + '?nav'; return false"><input id="navInput" type="number" min="1" max="{{ $latest }}" value="{{ $current }}" autocomplete="false"></form>
<script>
if (window.location.href.split('?')[1] === "nav") {
window.history.replaceState(null, null, window.location.pathname);
document.getElementById("navInput").focus();
}
</script>
{{ if not ($scratch.Get "isLatest") }}
<a class="nav-button" href="../{{ add $current 1 }}">#{{ add $current 1 }}&nbsp;<i class="fas fa-chevron-right"></i></a>
<a class="nav-button" href="../{{ add $current 1 }}">#{{ add $current 1 }}&nbsp;<svg class="svg-inline" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg></a>
{{ end }}
</nav>
</nav>

@ -3,7 +3,7 @@
{{ if .image }}
{{ $thumbnail := .image.Resize "500x" }}
<a href="{{ .image.RelPermalink }}" target="_blank"><img src="{{ $thumbnail.RelPermalink }}" style="aspect-ratio: {{ .image.Width }} / {{ .image.Height }}" title="{{ .submission.username }}'s submission"></a>
<figcaption><a href="https://discord.com/users/{{ .submission.id }}"><i class="fab fa-discord"></i> {{ .submission.username }}</a>{{ if .submission.late }} (Late){{ end }}</figcaption>
<figcaption><a href="https://discord.com/users/{{ .submission.id }}"><img class="svg-inline" src="/discord.svg"> {{ .submission.username }}</a>{{ if .submission.late }} (Late){{ end }}</figcaption>
{{ else }}
<figcaption>Image not found!</figcaption>
{{ end }}

@ -429,27 +429,34 @@ h1, h2, h3, h4, h5, h6, b, strong, th {
}
nav {
position: sticky;
top: -1rem;
margin-left: calc(-1 * var(--padding));
margin-right: calc(-1 * var(--padding));
margin-top: calc(-1 * var(--padding));
font-family: 'Patrick Hand';
font-size: 1.5em;
display: flex;
background-color: var(--nav);
/* background-image: url("/ink.svg"), repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(60, 56, 54, 0.5) 35px, rgba(60, 56, 54, 0.5) 70px); */
background-repeat: no-repeat, repeat;
background-position: right;
align-items: center;
box-shadow: 0 4px 4px 0 rgba(0,0,0,.25);
z-index: 999;
}
display: inline;
text-align: center;
.title {
display: block;
padding-top: 0.5em;
padding-bottom: 0.5em;
width: 100%;
text-align: center;
}
nav form {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
pointer-events: none;
}
nav * {
pointer-events: auto;
}
.nav-button {
@ -458,9 +465,9 @@ nav {
color: var(--button-text);
padding-left: 0.25em;
padding-right: 0.25em;
display: flex;
/* display: flex;
align-items: center;
justify-content: center;
justify-content: center; */
border: none !important;
}
@ -469,6 +476,7 @@ nav {
border-top-right-radius: 0.25em;
border-bottom-right-radius: 0.25em;
box-shadow: 4px 0 var(--gb-dm-bg0-hard);
float: left;
}
.nav-button:last-child {
@ -476,6 +484,7 @@ nav {
border-top-left-radius: 0.25em;
border-bottom-left-radius: 0.25em;
box-shadow: -4px 0 var(--gb-dm-bg0-hard);
float: right;
}
figure a {
@ -511,11 +520,11 @@ figcaption span {
opacity: 0.625;
}
figure, figure img {
figure, figure img:not(.svg-inline) {
border-radius: 0.25em;
}
figure img {
figure img:not(.svg-inline) {
width: 100%;
box-sizing: border-box;
border: none !important;
@ -584,7 +593,7 @@ a:hover, a:hover .underline {
border-bottom: 2px solid;
}
a:hover img {
a:hover img:not(.svg-inline) {
filter: brightness(1.25);
}
@ -779,7 +788,7 @@ button, .action-button a {
box-shadow: 4px 4px var(--action-button-shadow);
}
#content img {
#content img:not(.svg-inline) {
max-width: 100%;
background: var(--background-1);
border-radius: 0.15em;
@ -799,7 +808,7 @@ button, .action-button a {
display: inline !important;
}
#content > div:last-child img {
#content > div:last-child img:not(.svg-inline) {
background: var(--background-2) !important;
}
@ -827,7 +836,7 @@ h1:first-child {
width: 1.5em;
height: 1.5em;
margin: 0;
display: inline;
display: inline !important;
vertical-align: bottom;
}
@ -852,3 +861,33 @@ footer img {
display: none;
}
}
input[type=number] {
font-family: inherit;
font-size: inherit;
color: inherit;
background: var(--background-2);
border-radius: 0.25em;
width: 2em;
border: none;
text-align: center;
}
input[type=number]:focus {
outline: 2px solid var(--foreground-dim) !important;
}
nav input[type=number] {
-moz-appearance: textfield;
}
nav input::-webkit-outer-spin-button,
nav input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.svg-inline {
height: 1em;
vertical-align: -0.125em;
}

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#5865f2;}</style></defs><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 988 B

Loading…
Cancel
Save