Changes
10 changed files (+195/-86)
-
-
@@ -37,6 +37,7 @@--color-border-subtle: oklch(var(--uchu-yin-3-raw) / 20%); --color-border-normal: oklch(var(--uchu-yin-3-raw) / 50%); --color-border-strong: oklch(var(--uchu-yin-3-raw) / 80%); --color-backdrop: oklch(var(--uchu-yang-raw) / 90%); /* Plastic ratio */ --space-scale: 1.324717957;
-
@@ -71,6 +72,7 @@--color-fg-subtle: var(--uchu-yin-3); --color-link: var(--uchu-blue-2); --color-decoration: var(--uchu-blue-4); --color-backdrop: oklch(var(--uchu-yin-9-raw) / 90%); } }
-
@@ -112,6 +114,39 @@ body {overflow-y: auto; } :where(button) { font: inherit; font-family: var(--font-ui); border: 1px solid var(--color-link); padding: 0.125em 0.5em; background: var(--color-bg); background: linear-gradient(to bottom, var(--color-bg), hsl(from var(--color-link) h s l / 3%)); border-radius: var(--radii-sm); box-shadow: none; color: var(--color-link); outline: none; } :where(button:hover:not(:active), button:focus-visible) { background: var(--color-link); color: var(--color-bg); } :where(button:focus-visible) { outline: 1px solid var(--color-fg); } @supports (color: hsl(from var(--color-link) h s l / 50%)) { :where(button:focus-visible) { box-shadow: 0 0 0 3px hsl(from var(--color-link) h s l / 50%); outline: none; } } :where(select) { font-size: var(--font-md); margin: 0; padding: var(--space-xxs) var(--space-sm); } :where(a) { color: var(--color-link); text-decoration: none;
-
@@ -167,7 +202,15 @@ body {border-block-start: 1px solid var(--color-border-subtle); margin: 0; margin-block-start: var(--space-xxxl); padding-block-end: var(--space-xxxl); max-width: unset; display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; grid-template-areas: "links links links" ". preferences poweredby"; align-items: center; gap: 1em 1em; background-color: var(--color-bg); overflow-x: auto;
-
@@ -176,6 +219,7 @@ body {} .footer--links { grid-area: links; padding: 0; padding-inline-start: 1em; margin: 0;
-
@@ -184,6 +228,82 @@ body {gap: 0.5em 2em; } .footer--preferences { grid-area: preferences; } .footer--poweredby { grid-area: poweredby; margin: 0; } @keyframes slidein { from { transform: translateY(7px); } to { transform: translateY(0); } } @keyframes fadein { from { opacity: 0%; } to { opacity: 100%; } } .preferences { font-family: var(--font-content); font-size: var(--font-md); font-weight: var(--font-regular); padding: var(--space-lg) var(--space-xl); border: 1px solid var(--color-border-normal); gap: 1.5em; background-color: var(--color-bg); border-radius: var(--radii-md); color: var(--color-fg); text-align: start; animation: 120ms 40ms both ease-out fadein, 120ms 20ms both ease-out slidein; } .preferences:open { display: flex; flex-direction: column; } .preferences::backdrop { background-color: var(--color-backdrop); animation: 120ms 0s both ease-out fadein; } .preferences > button { align-self: end; } .preferences--field { display: flex; flex-direction: column; align-items: start; gap: var(--space-sm); } .preferences--field > label { font-size: var(--font-sm); font-weight: var(--font-chonk); } .preferences--field > p { font-size: var(--font-sm); margin: 0; } .breadcrumbs { list-style: none; display: flex;
-
@@ -335,19 +455,6 @@ body {overflow-x: auto; } .tab-selector { display: flex; flex-direction: column; gap: var(--space-md); } .tab-selector--select { font-size: var(--font-md); margin: 0; padding: var(--space-xxs) var(--space-sm); max-width: 4em; } /* Sticky header and aside */ @media (min-height: 50rem) { .header {
-
@@ -418,7 +525,7 @@ body {} .footer--links { display: inline-flex; justify-self: end; } .breadcrumbs {
-
-
-
@@ -2,7 +2,6 @@* SPDX-License-Identifier: MIT */ .noscript--feature-unavailable { font-size: var(--font-sm); font-weight: var(--font-thick); .script-only { display: none; }
-
-
-
@@ -0,0 +1,51 @@// Copyright 2026 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: MIT function setupTabWidthSelector() { const LOCAL_STORAGE_KEY = "legit_tab_width"; function isValidTabWidth(width) { if (typeof width !== "string") { return false; } const n = parseInt(width, 10); return Number.isFinite(n) && n > 0; } function applyTabWidth(width) { localStorage.setItem(LOCAL_STORAGE_KEY, width); document.body.style.tabSize = width; } const saved = localStorage.getItem(LOCAL_STORAGE_KEY); const value = isValidTabWidth(saved) ? saved : "4"; applyTabWidth(value); const selector = document.getElementById("global-tab-width"); if (selector) { selector.value = value; selector.addEventListener("change", event => { if (!isValidTabWidth(event.currentTarget.value)) { return; } applyTabWidth(event.currentTarget.value); }); } } function setupPreferencesDialog() { const preferences = document.getElementById("preferences-dialog"); document.getElementById("preferences-dialog-trigger")?.addEventListener("click", (event) => { preferences?.showModal(); }); document.getElementById("preferences-dialog-closer")?.addEventListener("click", (event) => { preferences?.close(); }); } setupTabWidthSelector(); setupPreferencesDialog();
-
-
embed/static/tab-selector.js (deleted)
-
@@ -1,38 +0,0 @@// Copyright 2025 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: MIT const LOCAL_STORAGE_KEY = "legit_tab_width"; function isValidTabWidth(width) { if (typeof width !== "string") { return false; } const n = parseInt(width, 10); return Number.isFinite(n) && n > 0; } function applyTabWidth(width) { localStorage.setItem(LOCAL_STORAGE_KEY, width); document.body.style.tabSize = width; } const selector = document.getElementById("global_tab_width"); if (selector) { const saved = localStorage.getItem(LOCAL_STORAGE_KEY); const value = isValidTabWidth(saved) ? saved : "4"; selector.value = value; applyTabWidth(value); selector.addEventListener("change", event => { if (!isValidTabWidth(event.currentTarget.value)) { return; } applyTabWidth(event.currentTarget.value); }); selector.disabled = false; }
-
-
-
@@ -65,7 +65,6 @@ SPDX-License-Identifier: MIT<aside class="aside"> <div class="aside-contents"> <dl class="metadata"> {{- template "tab-selector" -}} <dt class="metadata--key">Preview</dt> <dd class="metadata--value"> <a href="/{{ .Meta.DirName }}/blob/{{ .Meta.Ref }}{{ $path }}">View code</a>
-
-
-
@@ -73,7 +73,6 @@ SPDX-License-Identifier: MIT<aside class="aside"> <div class="aside-contents"> <dl class="metadata"> {{- template "tab-selector" -}} <dt class="metadata--key">Raw</dt> <dd class="metadata--value"> <a href="?raw">View raw</a>
-
-
-
@@ -155,7 +155,6 @@ SPDX-License-Identifier: MIT</a> </dd> {{ end -}} {{- template "tab-selector" -}} </dl> </div> </div>
-
-
-
@@ -49,7 +49,6 @@ SPDX-License-Identifier: MIT<dt class="metadata--key">Clone URL</dt> <dd class="metadata--value">https://{{ .Config.Server.Name }}/{{ .Meta.DirName }}</dd> {{- end -}} {{- template "tab-selector" -}} </dl> </aside> <aside class="recent-commits">
-
-
-
@@ -3,7 +3,6 @@ Copyright 2026 Shota FUJI <pockawoooh@gmail.com>SPDX-License-Identifier: MIT --> {{ define "site-footer" -}} {{- if or (gt (len .Config.UI.Footer.Links) 0) .Config.UI.Footer.PoweredBy -}} <footer class="footer"> {{- if gt (len .Config.UI.Footer.Links) 0 }} <ul class="footer--links">
-
@@ -14,9 +13,28 @@ SPDX-License-Identifier: MIT{{- end }} </ul> {{- end }} <button id="preferences-dialog-trigger" class="footer--preferences script-only" type="button">Preferences</button> <dialog id="preferences-dialog" class="preferences" popover="auto" closedby="any"> <script type="module" src="/static/preferences.js"></script> <div class="preferences--field"> <label for="global-tab-width">Tab width</label> <select id="global-tab-width" aria-describedby="global-tab-width-description"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4" selected>4</option> <option value="6">6</option> <option value="8">8</option> <option value="12">12</option> </select> <p id="global-tab-width-description"> Changes the size of a tab character in code blocks and code previews. </p> </div> <button id="preferences-dialog-closer">Close</button> </dialog> {{- if .Config.UI.Footer.PoweredBy }} <p>Powered by <a href="https://git.pocka.jp/legit.git">legit</a></p> <p class="footer--poweredby">Powered by <a href="https://git.pocka.jp/legit.git">legit</a></p> {{- end }} </footer> {{- end -}} {{- end -}}
-
-
embed/templates/tab-selector.html.tmpl (deleted)
-
@@ -1,24 +0,0 @@<!-- Copyright 2025 Shota FUJI <pockawoooh@gmail.com> SPDX-License-Identifier: MIT --> {{ define "tab-selector" -}} <dt class="metadata--key">Tab width</dt> <dd class="metadata--value tab-selector"> <script type="module" src="/static/tab-selector.js"></script> <select id="global_tab_width" class="tab-selector--select" disabled> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4" selected>4</option> <option value="6">6</option> <option value="8">8</option> <option value="12">12</option> </select> <noscript> <span class="noscript--feature-unavailable"> Changing tab width requires JavaScript enabled. </span> </noscript> </dd> {{- end -}}
-