tegakituesday
/
tegakituesday.com
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve challenge display

Browse Source
rust
Elnu 2 years ago
parent 8ba607cb73
commit 903c6ad8cf
3 changed files with 218 additions and 90 deletions
Show Stats Download Patch File Download Diff File

154
themes/tegakituesday.com/layouts/challenges/single.html
Unescape View File

@ -10,92 +10,96 @@
{{- $current := replaceRE `[^0-9]` "" .File -}} {{- $current := replaceRE `[^0-9]` "" .File -}}
{{- partial "nav.html" . -}} {{- partial "nav.html" . -}}
<div id="challenge"> <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> <header>
<h3>Tegaki Tuesday #{{- $current -}}</h3> <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> <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> </header>
{{ if or (.Params.japanese) (.Params.english) }} {{ if .Params.english }}
<div id="challenge-container"> <div id="challenge-english">
<div id="challenge-horizontal"> <!-- English view -->
<div id="challenge-vocab" lang="ja"> {{- range.Params.english -}}
<!-- Vocab view --> <p>{{- $.RenderString . -}}</p>
<!-- Outer list: lines --> {{- end -}}
{{- range.Params.japanese -}} </div>
<!-- Inner list: sublines --> <br>
{{- range. -}} {{ end }}
<!-- Innermost list: words --> <div id="challenge-vocab" lang="ja">
<p>{{- range. -}} <!-- Vocab view -->
{{- if eq (printf "%T" .text) "string" -}} <!-- Outer list: lines -->
{{- $.Scratch.Set "dictionary" .text -}} {{- range.Params.japanese -}}
{{- $.Scratch.Set "html" .text -}} <!-- Inner list: sublines -->
{{- else -}} {{- range. -}}
{{- $.Scratch.Set "dictionary" "" -}} <!-- Innermost list: words -->
{{- $.Scratch.Set "html" "" -}} <p>{{- range. -}}
{{- range.text -}} {{- if eq (printf "%T" .text) "string" -}}
{{- if reflect.IsMap . -}} {{- $.Scratch.Set "dictionary" .text -}}
{{- range $kanji, $furigana := . -}} {{- $.Scratch.Set "html" .text -}}
{{- $.Scratch.Add "dictionary" $kanji -}} {{- else -}}
{{- $.Scratch.Add "html" "<ruby>" -}} {{- $.Scratch.Set "dictionary" "" -}}
{{- $.Scratch.Add "html" $kanji -}} {{- $.Scratch.Set "html" "" -}}
{{- $.Scratch.Add "html" "<rp>(</rp><rt>" -}} {{- range.text -}}
{{- $.Scratch.Add "html" $furigana -}} {{- if reflect.IsMap . -}}
{{- $.Scratch.Add "html" "</rt><rp>)</rp></ruby>" -}} {{- range $kanji, $furigana := . -}}
{{- end -}} {{- $.Scratch.Add "dictionary" $kanji -}}
{{- else -}} {{- $.Scratch.Add "html" "<ruby>" -}}
{{- $.Scratch.Add "dictionary" . -}} {{- $.Scratch.Add "html" $kanji -}}
{{- $.Scratch.Add "html" . -}} {{- $.Scratch.Add "html" "<rp>(</rp><rt>" -}}
{{- end -}} {{- $.Scratch.Add "html" $furigana -}}
{{- end -}} {{- $.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 -}}
{{- end -}}</p> {{- else -}}
{{- $.Scratch.Add "dictionary" . -}}
{{- $.Scratch.Add "html" . -}}
{{- end -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
</div> {{ if .dictionary }}
<div id="challenge-english"> {{- $.Scratch.Set "dictionary" .dictionary -}}
<!-- English view --> {{ end }}
{{- range.Params.english -}} {{- if not (and .dictionary (hasPrefix .dictionary "http")) -}}
<p>{{- $.RenderString . -}}</p> {{- $.Scratch.Set "dictionary" (printf "%s" ($.Scratch.Get "dictionary") | printf "%s%s" "https://jisho.org/word/" | printf "%s") -}}
{{- end -}} {{- end -}}
</div> {{- if and (not .dictionary) (not .pos) -}}
</div> {{- $.Scratch.Get "html" | safeHTML -}}
<div id="challenge-kanji" lang="ja"> {{- else -}}
<!-- Kanji view --> <a href="{{- $.Scratch.Get "dictionary" -}}" class="{{- .pos -}}" title="{{- .pos -}}" target="_blank">{{- $.Scratch.Get "html" | safeHTML -}}</a>
<!-- Outer list: lines --> {{- end -}}
{{- range.Params.japanese -}} {{- end -}}</p>
<!-- Inner list: sublines --> {{- end -}}
{{- range. -}} {{- end -}}
<!-- Innermost list: words --> </div>
<p>{{- range. -}} <div id="challenge-kanji" lang="ja" style="display: none">
{{- if eq (printf "%T" .text) "string" -}} <!-- Kanji view -->
{{- .text -}} <!-- Outer list: lines -->
{{- else -}} {{- range.Params.japanese -}}
{{- range.text -}} <!-- Inner list: sublines -->
{{- if reflect.IsMap . -}} {{- range. -}}
{{- range $kanji, $furigana := . -}} <!-- Innermost list: words -->
<a href="https://jisho.org/search/{{- $kanji -}} %23kanji" target="_blank"><ruby>{{- $kanji | safeHTML -}}<rp>(</rp><rt>{{- $furigana | safeHTML -}}</rt><rp>)</rp></ruby></a> <p>{{- range. -}}
{{- end -}} {{- if eq (printf "%T" .text) "string" -}}
{{- else -}} {{- .text -}}
{{- . -}} {{- else -}}
{{- end -}} {{- 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 -}} {{- end -}}
{{- else -}}
{{- . -}}
{{- end -}} {{- end -}}
{{- end -}}</p> {{- end -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}</p>
</div> {{- end -}}
</div> {{- end -}}
{{ end }} </div>
<script src="/js/toggle.js"></script>
</div>
</div> </div>
<div class="content"> <div class="content">
{{- partial "content.html" . -}} {{- partial "content.html" . -}}

77
themes/tegakituesday.com/static/css/style.css
Unescape View File

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

77
themes/tegakituesday.com/static/js/toggle.js
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save