Redetzke/GHOSTWIRE
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Hannya mark and Shippori Mincho B1 wordmark

Browse Source 
Replace the Kamon ghost with the horned Hannya mask in favicon.svg,
apple-touch-icon.png, the web UI and the setup page. The wordmark and
katakana use Shippori Mincho B1 ExtraBold, bundled as a subset (ASCII
and katakana, 21 KB) under the SIL OFL and served from the binary.
This commit is contained in:
Daniel Redetzke
2026-10-04 15:06:18 +03:00
parent 7391aac429
commit f703618b9d
9 changed files with 117 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.css
+10 -5
View File
@@ -23,8 +23,13 @@
--axis-ink: #898781;
--sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* The wordmark face, bundled (SIL OFL, see OFL-ShipporiMincho.txt) and
cut down to ASCII and katakana. */
--brand: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
@font-face { font-family: "Shippori Mincho B1"; font-weight: 800; font-display: swap; src: url("/ShipporiMinchoB1-ExtraBold.woff2") format("woff2"); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.45; }
@@ -42,8 +47,8 @@ a:hover { color: var(--link-hover); }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 18px; color: #fff; }
.brand svg { flex: none; }
a.brand, a.brand:hover { color: #fff; text-decoration: none; }
.brand .wm { font-family: var(--mono); font-weight: 600; font-size: 16px; letter-spacing: 0.06em; line-height: 1.2; }
.brand .kana { font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; font-size: 10px; letter-spacing: 0.3em; color: #8d8e93; margin-top: 2px; }
.brand .wm { font-family: var(--brand); font-weight: 800; font-size: 16px; letter-spacing: 0.14em; line-height: 1.2; }
.brand .kana { font-family: var(--brand); font-weight: 800; font-size: 10px; letter-spacing: 0.3em; color: #8d8e93; margin-top: 2px; }
.srv { display: flex; align-items: center; gap: 8px; margin: 0 6px 16px; padding: 10px; border: 1px solid #2c2d32; border-radius: 8px; font-size: 12px; color: #c9c9c3; }
.srv strong { color: #fff; font-weight: 500; }
.side a.nav { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #c9c9c3; text-decoration: none; font-weight: 500; }
@@ -231,7 +236,7 @@ dialog::backdrop { background: rgba(22, 23, 26, .55); }
.loginpage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; padding: 32px 16px; background: var(--ink); color: #f4f4f1; }
.loginbox { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.loginbox .brand { flex-direction: column; gap: 18px; padding: 0; text-align: center; }
.loginbox .brand .wm { font-size: 24px; letter-spacing: 0.18em; margin-right: -0.18em; }
.loginbox .brand .wm { font-size: 26px; letter-spacing: 0.22em; margin-right: -0.22em; }
.loginbox .brand .kana { font-size: 12px; letter-spacing: 0.4em; margin: 6px -0.4em 0 0; }
.loginform { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.loginform .field > label { color: #c9c9c3; }
@@ -260,8 +265,8 @@ dialog::backdrop { background: rgba(22, 23, 26, .55); }
.setupbox p.note { text-align: center; font-size: 12px; color: #8d8e93; }
.setupbox .brand { padding: 0; }
.setupbox .brand.stack { flex-direction: column; gap: 14px; }
.setupbox .brand .wm { font-size: 16px; letter-spacing: 0.12em; }
.setupbox .brand.stack .wm { font-size: 18px; letter-spacing: 0.18em; margin-right: -0.18em; }
.setupbox .brand .wm { font-size: 16px; letter-spacing: 0.14em; }
.setupbox .brand.stack .wm { font-size: 20px; letter-spacing: 0.22em; margin-right: -0.22em; }
.setupbox strong.mono { color: #fff; font-weight: 500; }
.loginform input.pin { min-height: 56px; font-family: var(--mono); font-size: 24px; letter-spacing: 0.5em; text-align: center; }
.setupbox .notice { background: #3a2a14; color: #f6d3a6; }