Improve nav, local fontawesome, late submission display

config.toml

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

themes/tegakituesday.com/layouts/challenges/single.html

@@ -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 }}

themes/tegakituesday.com/layouts/partials/head.html

@@ -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>

themes/tegakituesday.com/layouts/partials/nav.html

@@ -1,17 +1,20 @@
 <nav>
 	{{ $current := int (replaceRE `[^0-9]` "" .File) }}
 	{{ $scratch := newScratch }}
-	{{ $scratch.Set "isLatest" true }}
+	{{ $latest := int (index .Site.RegularPages 0).File.TranslationBaseName }}
-	{{ range.Site.RegularPages }}
+	{{ $scratch.Set "isLatest" (eq $current $latest) }}
-		{{ if gt (int .File.TranslationBaseName) $current }}
-			{{ $scratch.Set "isLatest" false }}
-		{{ end }}
-	{{ end }}
 	{{ 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>

themes/tegakituesday.com/layouts/partials/submission.html

@@ -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 }}

themes/tegakituesday.com/static/css/style.css

@@ -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;
+}

themes/tegakituesday.com/static/discord.svg

@@ -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>