Improve challenge display

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

@@ -10,13 +10,24 @@
 	{{- $current := replaceRE `[^0-9]` "" .File -}}
 	{{- partial "nav.html" . -}}
 	<div id="challenge">
+		<div>
+		<button id="direction" title="Text direction">↕</button>
+		<button lang="ja" id="highlight" title="Vocab/kanji links">漢字</button>
+		<button lang="ja" id="kyujitai" title="Shinjitai/kyujitai">旧字体</button>
+		<a target="_blank" class="clickable-icon" href="https://en.wikipedia.org/wiki/Ky%C5%ABjitai"><i class="fa-solid fa-circle-question"></i></a>
 		<header>
 			<h3>Tegaki Tuesday #{{- $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 or (.Params.japanese) (.Params.english) }}
+		{{ if .Params.english }}
-			<div id="challenge-container">
+		<div id="challenge-english">
-				<div id="challenge-horizontal">
+			<!-- English view -->
+			{{- range.Params.english -}}
+				<p>{{- $.RenderString . -}}</p>
+			{{- end -}}
+		</div>
+		<br>
+		{{ end }}
 		<div id="challenge-vocab" lang="ja">
 			<!-- Vocab view -->
 			<!-- Outer list: lines -->
@@ -62,14 +73,7 @@
 				{{- end -}}
 			{{- end -}}
 		</div>
-					<div id="challenge-english">
+		<div id="challenge-kanji" lang="ja" style="display: none">
-						<!-- English view -->
-						{{- range.Params.english -}}
-							<p>{{- $.RenderString . -}}</p>
-						{{- end -}}
-					</div>
-				</div>
-				<div id="challenge-kanji" lang="ja">
 			<!-- Kanji view -->
 			<!-- Outer list: lines -->
 			{{- range.Params.japanese -}}
@@ -94,8 +98,8 @@
 				{{- end -}}
 			{{- end -}}
 		</div>	
+		<script src="/js/toggle.js"></script>
 	</div>
-		{{ end }}
 	</div>
 	<div class="content">
 		{{- partial "content.html" . -}}

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

@@ -3,7 +3,6 @@
 
 :root {
 	/* Catppuccin color palette */
-
 	--ctp-latte-rosewater: #de9584;
 	--ctp-latte-rosewater-rgb: rgb(222, 149, 132);
 	--ctp-latte-rosewater-hsl: hsl(11, 58%, 69%); --ctp-frappe-rosewater: #f2d5cf;
@@ -430,6 +429,10 @@
 	--action-button: var(--ctp-latte-maroon);
 	--action-button-shadow: var(--ctp-mocha-maroon);
 
+	--button: var(--ctp-mocha-surface1);
+	--button-hover: var(--ctp-mocha-surface2);
+	--button-click: var(--ctp-mocha-surface0);
+
 	--adjective: var(--ctp-mocha-red);
 	--noun: var(--ctp-mocha-green);
 	--verb: var(--ctp-mocha-blue);
@@ -682,10 +685,35 @@ a:hover img {
 	background: var(--background-2);
 	margin-left: calc(-1 * var(--padding));
 	margin-right: calc(-1 * var(--padding));
-	padding: var(--padding);
+	flex-shrink: 0;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	transition: 0.75s;
 	font-size: 1.25em;
 	font-weight: normal;
 	font-style: normal;
+	white-space: nowrap;
+}
+
+#challenge > div {
+	padding: var(--padding);
+}
+
+.vertical {
+	writing-mode: vertical-rl;
+}
+
+.vertical a:hover {
+	border: none;
+	border-left: 2px solid;
+}
+
+#challenge p {
+	white-space: nowrap;
+}
+
+#challenge > div {
+	padding: var(--padding);
 }
 
 #challenge, h1, h2, h3, h4, h5, h6 {
@@ -698,6 +726,7 @@ header h1, header h2, header h3, header h4, header h5, header h6 {
 
 header {
 	padding-bottom: 8px;
+	margin-bottom: 8px;
 }
 
 header, :not(header) > h1, :not(header) > h2, :not(header) > h3, :not(header) > h4, :not(header) > h5, :not(header) > h6 {
@@ -748,19 +777,10 @@ header rt {
 	counter-increment: section;
 	content: counter(section);
 	text-orientation: upright;
-	color: #928374;
+	color: var(--foreground-dim);
 	margin-right: 0.25em;
 }
 
-#challenge-kanji {
-	writing-mode: vertical-rl;
-}
-
-#challenge-kanji a:hover {
-	border: none;
-	border-left: 2px solid;
-}
-
 #challenge-horizontal, #challenge-kanji {
 	flex-shrink: 0;
 }
@@ -802,15 +822,38 @@ p, ul, ol {
 	text-align: center;
 }
 
-.action-button a {
+button {
+	height: 2em;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.75em;
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+	background: var(--button);
+	border-radius: 0.25em;
+}
+
+button:hover {
+	background: var(--button-hover);
+}
+
+button:active {
+	background: var(--button-click);
+}
+
+button, .action-button a {
 	display: inline-flex;
 	border: none !important;
 	cursor: pointer;
-	background: var(--action-button);
 	font-weight: bold;
 	color: var(--button-text);
 	transition: 0.5s;
+}
+
+.action-button a {
 	font-size: 1em;
+	background: var(--action-button);
 }
 
 .action-button span {
@@ -873,10 +916,14 @@ a.no-underline:hover {
 	border: none;
 }
 
-.muted, #leaderboard td:first-child {
+.muted, #leaderboard td:first-child, .clickable-icon {
 	color: var(--foreground-dim);
 }
 
+.clickable-icon:hover {
+	border: none;
+}
+
 @media (max-width: 400px) {
 	#leaderboard td:first-child {
 		display: none;