diff --git a/OFL-ShipporiMincho.txt b/OFL-ShipporiMincho.txt new file mode 100644 index 0000000..a3f24cb --- /dev/null +++ b/OFL-ShipporiMincho.txt @@ -0,0 +1,93 @@ +Copyright 2021 The Shippori Mincho Project Authors (https://github.com/fontdasu/ShipporiMincho) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/README.md b/README.md index e4d09aa..b7e6d6f 100644 --- a/README.md +++ b/README.md @@ -275,5 +275,9 @@ make build && mkdir -p dev && ./GHOSTWIRE -config dev/config.json -passwd GHOSTWIRE is released under the [MIT License](LICENSE). +The wordmark typeface, Shippori Mincho B1 by the Shippori Mincho Project +Authors, is bundled as a subset under the +[SIL Open Font License 1.1](OFL-ShipporiMincho.txt). + The DB-IP Lite databases it downloads are by [DB-IP](https://db-ip.com) and licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). diff --git a/ShipporiMinchoB1-ExtraBold.woff2 b/ShipporiMinchoB1-ExtraBold.woff2 new file mode 100644 index 0000000..940dc69 Binary files /dev/null and b/ShipporiMinchoB1-ExtraBold.woff2 differ diff --git a/app.css b/app.css index 82399e5..a94570e 100644 --- a/app.css +++ b/app.css @@ -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; } diff --git a/app.js b/app.js index 13e59bd..1e80ef1 100644 --- a/app.js +++ b/app.js @@ -50,10 +50,10 @@ plus: '', }; - // The Kamon logo: a crest ring around the ghost. Same drawing as favicon.svg. + // The Hannya mark: the horned demon mask of Noh. Same drawing as favicon.svg. const LOGO = '' + - '' + - ''; + '' + + ''; function logo(size) { const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); diff --git a/apple-touch-icon.png b/apple-touch-icon.png index dacf939..e8b40f2 100644 Binary files a/apple-touch-icon.png and b/apple-touch-icon.png differ diff --git a/favicon.svg b/favicon.svg index f5387b2..1201824 100644 --- a/favicon.svg +++ b/favicon.svg @@ -1 +1 @@ -GHOSTWIRE +GHOSTWIRE diff --git a/setup.js b/setup.js index eaec456..3dffb30 100644 --- a/setup.js +++ b/setup.js @@ -24,9 +24,8 @@ const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); for (const [k, v] of Object.entries({ width: size, height: size, viewBox: '0 0 64 64', 'aria-hidden': 'true' })) s.setAttribute(k, v); s.innerHTML = (plain ? '' : '') + - '' + - '' + - (plain ? '' : '') + ''; + '' + + (plain ? '' : '') + ''; return s; } diff --git a/web.go b/web.go index b7e01d7..bfc9329 100644 --- a/web.go +++ b/web.go @@ -8,7 +8,7 @@ import ( // The web UI and its icons are built into the binary. The UI talks only to // /api/v1, the same API the iOS app uses. // -//go:embed index.html setup.html app.js setup.js app.css favicon.svg apple-touch-icon.png +//go:embed index.html setup.html app.js setup.js app.css favicon.svg apple-touch-icon.png ShipporiMinchoB1-ExtraBold.woff2 var webFiles embed.FS func webHandler() http.Handler { @@ -18,6 +18,9 @@ func webHandler() http.Handler { case "/", "/app.js", "/setup.js", "/app.css", "/favicon.svg", "/apple-touch-icon.png": w.Header().Set("Cache-Control", "no-cache") files.ServeHTTP(w, r) + case "/ShipporiMinchoB1-ExtraBold.woff2": + w.Header().Set("Cache-Control", "public, max-age=31536000, immutable") + files.ServeHTTP(w, r) case "/favicon.ico": // Browsers ask for this by default; point them to the SVG. http.Redirect(w, r, "/favicon.svg", http.StatusMovedPermanently)