Improve challenge display

2 years ago · 903c6ad8cf
parent 8ba607cb73
commit 903c6ad8cf
3 changed files with 218 additions and 90 deletions
--- a/themes/tegakituesday.com/layouts/challenges/single.html
+++ b/themes/tegakituesday.com/layouts/challenges/single.html
@ -10,92 +10,96 @@
 	{{- $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) }}
-			<div id="challenge-container">
-				<div id="challenge-horizontal">
-					<div id="challenge-vocab" lang="ja">
-						<!-- Vocab view -->
-						<!-- Outer list: lines -->
-						{{- range.Params.japanese -}}
-							<!-- Inner list: sublines -->
-							{{- range. -}}
-								<!-- Innermost list: words -->
-								<p>{{- range. -}}
-									{{- if eq (printf "%T" .text) "string" -}}
-										{{- $.Scratch.Set "dictionary" .text -}}
-										{{- $.Scratch.Set "html" .text -}}
-									{{- else -}}
-										{{- $.Scratch.Set "dictionary" "" -}}
-										{{- $.Scratch.Set "html" "" -}}
-										{{- range.text -}}
-											{{- if reflect.IsMap . -}}
-												{{- range $kanji, $furigana := . -}}
-													{{- $.Scratch.Add "dictionary" $kanji -}}
-													{{- $.Scratch.Add "html" "<ruby>" -}}
-													{{- $.Scratch.Add "html" $kanji -}}
-													{{- $.Scratch.Add "html" "<rp>(</rp><rt>" -}}
-													{{- $.Scratch.Add "html" $furigana -}}
-													{{- $.Scratch.Add "html" "</rt><rp>)</rp></ruby>" -}}
-												{{- end -}}
-											{{- else -}}
-												{{- $.Scratch.Add "dictionary" . -}}
-												{{- $.Scratch.Add "html" . -}}
-											{{- end -}}
-										{{- end -}}
-									{{- end -}}
-									{{ if .dictionary }}
-										{{- $.Scratch.Set "dictionary" .dictionary -}}
-									{{ end }} 
-									{{- if not (and .dictionary (hasPrefix .dictionary "http")) -}}
-										{{- $.Scratch.Set "dictionary" (printf "%s" ($.Scratch.Get "dictionary") | printf "%s%s" "https://jisho.org/word/" | printf "%s") -}}
-									{{- end -}}
-									{{- if and (not .dictionary) (not .pos) -}}
-										{{- $.Scratch.Get "html" | safeHTML -}}
-									{{- else -}}
-									<a href="{{- $.Scratch.Get "dictionary" -}}" class="{{- .pos -}}" title="{{- .pos -}}" target="_blank">{{- $.Scratch.Get "html" | safeHTML -}}</a>
+		{{ if .Params.english }}
+		<div id="challenge-english">
+			<!-- English view -->
+			{{- range.Params.english -}}
+				<p>{{- $.RenderString . -}}</p>
+			{{- end -}}
+		</div>
+		<br>
+		{{ end }}
+		<div id="challenge-vocab" lang="ja">
+			<!-- Vocab view -->
+			<!-- Outer list: lines -->
+			{{- range.Params.japanese -}}
+				<!-- Inner list: sublines -->
+				{{- range. -}}
+					<!-- Innermost list: words -->
+					<p>{{- range. -}}
+						{{- if eq (printf "%T" .text) "string" -}}
+							{{- $.Scratch.Set "dictionary" .text -}}
+							{{- $.Scratch.Set "html" .text -}}
+						{{- else -}}
+							{{- $.Scratch.Set "dictionary" "" -}}
+							{{- $.Scratch.Set "html" "" -}}
+							{{- range.text -}}
+								{{- if reflect.IsMap . -}}
+									{{- range $kanji, $furigana := . -}}
+										{{- $.Scratch.Add "dictionary" $kanji -}}
+										{{- $.Scratch.Add "html" "<ruby>" -}}
+										{{- $.Scratch.Add "html" $kanji -}}
+										{{- $.Scratch.Add "html" "<rp>(</rp><rt>" -}}
+										{{- $.Scratch.Add "html" $furigana -}}
+										{{- $.Scratch.Add "html" "</rt><rp>)</rp></ruby>" -}}
 									{{- end -}}
-								{{- end -}}</p>
+								{{- else -}}
+									{{- $.Scratch.Add "dictionary" . -}}
+									{{- $.Scratch.Add "html" . -}}
+								{{- end -}}
 							{{- end -}}
 						{{- end -}}
-					</div>
-					<div id="challenge-english">
-						<!-- English view -->
-						{{- range.Params.english -}}
-							<p>{{- $.RenderString . -}}</p>
+						{{ if .dictionary }}
+							{{- $.Scratch.Set "dictionary" .dictionary -}}
+						{{ end }} 
+						{{- if not (and .dictionary (hasPrefix .dictionary "http")) -}}
+							{{- $.Scratch.Set "dictionary" (printf "%s" ($.Scratch.Get "dictionary") | printf "%s%s" "https://jisho.org/word/" | printf "%s") -}}
 						{{- end -}}
-					</div>
-				</div>
-				<div id="challenge-kanji" lang="ja">
-					<!-- Kanji view -->
-					<!-- Outer list: lines -->
-					{{- range.Params.japanese -}}
-						<!-- Inner list: sublines -->
-						{{- range. -}}
-							<!-- Innermost list: words -->
-							<p>{{- range. -}}
-								{{- if eq (printf "%T" .text) "string" -}}
-									{{- .text -}}
-								{{- else -}}
-									{{- range.text -}}
-										{{- if reflect.IsMap . -}}
-											{{- range $kanji, $furigana := . -}}
-												<a href="https://jisho.org/search/{{- $kanji -}} %23kanji" target="_blank"><ruby>{{- $kanji | safeHTML -}}<rp>(</rp><rt>{{- $furigana | safeHTML -}}</rt><rp>)</rp></ruby></a>
-											{{- end -}}
-										{{- else -}}
-											{{- . -}}
-										{{- end -}}
+						{{- if and (not .dictionary) (not .pos) -}}
+							{{- $.Scratch.Get "html" | safeHTML -}}
+						{{- else -}}
+						<a href="{{- $.Scratch.Get "dictionary" -}}" class="{{- .pos -}}" title="{{- .pos -}}" target="_blank">{{- $.Scratch.Get "html" | safeHTML -}}</a>
+						{{- end -}}
+					{{- end -}}</p>
+				{{- end -}}
+			{{- end -}}
+		</div>
+		<div id="challenge-kanji" lang="ja" style="display: none">
+			<!-- Kanji view -->
+			<!-- Outer list: lines -->
+			{{- range.Params.japanese -}}
+				<!-- Inner list: sublines -->
+				{{- range. -}}
+					<!-- Innermost list: words -->
+					<p>{{- range. -}}
+						{{- if eq (printf "%T" .text) "string" -}}
+							{{- .text -}}
+						{{- else -}}
+							{{- range.text -}}
+								{{- if reflect.IsMap . -}}
+									{{- range $kanji, $furigana := . -}}
+										<a href="https://jisho.org/search/{{- $kanji -}} %23kanji" target="_blank"><ruby>{{- $kanji | safeHTML -}}<rp>(</rp><rt>{{- $furigana | safeHTML -}}</rt><rp>)</rp></ruby></a>
 									{{- end -}}
+								{{- else -}}
+									{{- . -}}
 								{{- end -}}
-							{{- end -}}</p>
+							{{- end -}}
 						{{- end -}}
-					{{- end -}}
-				</div>
-			</div>
-		{{ end }}
+					{{- end -}}</p>
+				{{- end -}}
+			{{- end -}}
+		</div>	
+		<script src="/js/toggle.js"></script>
+	</div>
 	</div>
 	<div class="content">
 		{{- partial "content.html" . -}}
--- a/themes/tegakituesday.com/static/css/style.css
+++ b/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;
--- a/themes/tegakituesday.com/static/js/toggle.js
+++ b/themes/tegakituesday.com/static/js/toggle.js