Improve challenge display
This commit is contained in:
parent
8ba607cb73
commit
903c6ad8cf
3 changed files with 218 additions and 90 deletions
|
|
@ -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 -}}
|
||||
{{ 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 -}}
|
||||
{{ 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>
|
||||
{{- 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" . -}}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
77
themes/tegakituesday.com/static/js/toggle.js
Normal file
77
themes/tegakituesday.com/static/js/toggle.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue