commit b473b5ae3492c8604fd1f98614d672db4580f429
parent 50fc77eda8473bde3faa1d8e3bb88094936219c1
Author: krasjet
Date: 2020-05-30 03:51Z

rework kamome styles

Diffstat:
M.gitmodules | 3+++
MDockerfile | 2+-
AMakefile | 17+++++++++++++++++
Ahane | 1+
Mstatic/styles/doc/main.css | 363++++++++++++++++++++++++++++++++++++++-----------------------------------------
Astatic/styles/doc/reset.css | 60++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Mstatic/styles/reset.css | 4++++
7 files changed, 260 insertions(+), 190 deletions(-)

diff --git a/.gitmodules b/.gitmodules @@ -1,3 +1,6 @@ [submodule "sesq"] path = sesq url = https://github.com/Krasjet/sesq +[submodule "kamome.hane"] + path = hane + url = https://github.com/Krasjet/kamome.hane diff --git a/Dockerfile b/Dockerfile @@ -42,7 +42,7 @@ RUN if [ "$USE_ALT_FONTS" = "true" ]; \ else rm /build/static/fonts/fonts-oss.css /build/static/fonts/*.woff2; \ fi -RUN yarn build +RUN make build # --- kamome --- FROM nginx:latest diff --git a/Makefile b/Makefile @@ -0,0 +1,17 @@ +.PHONY: all build + +build: all + yarn build + +all: static/styles/doc/main.css static/styles/doc/reset.css static/styles/doc/syntax.css + +static/styles/doc/main.css: hane/main.scss + $(MAKE) -C hane + /bin/cp hane/main.css static/styles/doc/main.css + +static/styles/doc/reset.css: hane/reset.scss + $(MAKE) -C hane + /bin/cp hane/reset.css static/styles/doc/reset.css + +static/styles/doc/syntax.css: sesq/pandoc.css + /bin/cp sesq/pandoc.css static/styles/doc/syntax.css diff --git a/hane b/hane @@ -0,0 +1 @@ +Subproject commit ab7007cabade1a1f33c081c115a6d19c63f190c0 diff --git a/static/styles/doc/main.css b/static/styles/doc/main.css @@ -1,45 +1,19 @@ +@charset "UTF-8"; html { font-size: 2.4vw; height: 100%; font-family: garibaldi, alegreya, palatino, serif; } - -a:lang(ja), -span:lang(ja), -div:lang(ja) { - font-size: 89%; - font-family: "Hiragino Mincho ProN", YuMincho, "Yu Mincho", "Noto Serif CJK JP", - "Source Han Serif JP", "MS Mincho", HiraMinProN-W3, serif; -} - -a:lang(zh-Hans), -span:lang(zh-Hans), -div:lang(zh-Hans) { - font-size: 89%; - font-family: "Songti SC", "Noto Serif CJK SC", "Source Han Serif CN", "Source Han Serif SC", - NSimSun, SimSun, "LiSong Pro", PMingLiU, MingLiU, HiraMinProN-W3, serif; -} - -a:lang(zh-Hant), -span:lang(zh-Hant), -div:lang(zh-Hant) { - font-size: 89%; - font-family: "Songti TC", "Noto Serif CJK TC", "Source Han Serif CN", "Source Han Serif TC", - PMingLiU, STSong, "LiSong Pro", MingLiU, NSimSun, SimSun, HiraMinProN-W3, serif; -} - @media all and (min-width: 960px) { html { font-size: 23px; } } - @media all and (max-width: 715px) { html { font-size: 18px; } } - @media print { html { font-size: 12pt; @@ -54,31 +28,73 @@ body { background-color: #f9fffa; color: #222; font-size: 1rem; - max-width: 32rem; margin: auto; - padding: 2.5rem 2.25rem; - hyphens: auto; + padding: 2.5rem 0; -webkit-hyphens: auto; -ms-hyphens: auto; + hyphens: auto; font-feature-settings: "c2sc" 1; } - -@media all and (max-width: 460px) { +@media all and (max-width: 715px) { body { - max-width: 31rem; - padding: 2.5rem 1.25rem; + padding-left: 1.25rem; + padding-right: 1.25rem; } } -.author { - margin: -0.9rem 0 0.45rem 0; - text-align: right; +header > *, +main > * { + max-width: 27.5rem; + margin-left: auto; + margin-right: auto; +} + +@media all and (min-width: 675px) { + main > figure, main > .figure, main > iframe { + max-width: 30rem; + display: block; + } + main > .sourceCode, +main > pre { + max-width: 30rem; + } + main > .wider { + max-width: 33rem; + } + main > .wide { + max-width: 36rem; + } + main > .widest { + max-width: 37.5rem; + } +} +main > .full { + width: 100vw; +} +main > iframe { + margin-bottom: 0.9rem; +} + +:lang(ja) { + font-size: 89%; + font-family: garibaldi, "Hiragino Mincho ProN", YuMincho, "Yu Mincho", "Noto Serif CJK JP", "Source Han Serif JP", "MS Mincho", HiraMinProN-W3, serif; +} + +:lang(zh-Hans) { + font-size: 89%; + font-family: garibaldi, "Songti SC", "Noto Serif CJK SC", "Source Han Serif CN", "Source Han Serif SC", NSimSun, SimSun, "LiSong Pro", PMingLiU, MingLiU, HiraMinProN-W3, serif; +} + +:lang(zh-Hant) { + font-size: 89%; + font-family: garibaldi, "Songti TC", "Noto Serif CJK TC", "Source Han Serif CN", "Source Han Serif TC", PMingLiU, STSong, "LiSong Pro", MingLiU, NSimSun, SimSun, HiraMinProN-W3, serif; } h1, h2, h3 { margin-top: 0.9rem; + margin-bottom: 0.2rem; } h1 { @@ -89,24 +105,16 @@ h1 { letter-spacing: 0.06rem; margin-bottom: 0.2rem; } - -#title { - margin-top: 0; - font-size: 1.7rem; - font-feature-settings: inherit; - text-transform: inherit; - letter-spacing: inherit; - margin-bottom: 0.9rem; -} - h1 code { text-transform: none; } +h1 .header-section-number::after { + content: "."; +} h2, h3 { font-weight: bold; - margin-bottom: 0.2rem; } h2 { @@ -122,58 +130,53 @@ h2 + h3 { margin-top: 0rem; } -h1 span.header-section-number::after { - content: "."; +header { + white-space: nowrap; +} +header .author { + margin-top: -0.9rem; + text-align: right; +} +header #title { + margin-top: 0; + font-size: 1.7rem; + font-feature-settings: inherit; + text-transform: inherit; + letter-spacing: inherit; + margin-bottom: 0.9rem; +} + +p { + line-height: 1.48; +} +p em { + font-style: italic; } a { text-decoration: none; color: #049d67; } - a:focus { outline-width: 2px; outline-style: dashed; outline-color: #00b374; } - a.nofocus:focus { outline-style: none; } -p { - line-height: 1.48; -} - -p em { - font-style: italic; -} - -img, -main iframe { - position: relative; - margin-left: 50%; - transform: translateX(-50%); - max-width: 110%; - display: block; -} - -main iframe { - margin-bottom: 0.9rem; -} - code { font-family: "fira mono", monospace; - font-size: 82%; - hyphens: none; + font-size: 0.82em; -webkit-hyphens: none; -ms-hyphens: none; + hyphens: none; } - -.break-all { - word-break: break-all; +li code, p code { + font-weight: 500; + font-size: 0.76em; } - code a { color: #333; } @@ -181,96 +184,83 @@ code a { pre { background-color: #f4f7f7; font-size: 0.86rem; + padding: 0.5rem 1rem; overflow-x: auto; word-break: keep-all; - margin: 0.9rem -1.15rem; - padding: 0.5rem 1rem; border-radius: 0.4rem; box-shadow: 1px 1px 4px #d5d9d9; + margin-bottom: 0.9rem; } - -.wide { - margin: 0.9rem -3.3rem; -} - -@media all and (max-width: 675px) { - pre, - .wide { - margin: 0.9rem 0; - } -} - pre ::selection { background-color: #dce0e0; } - pre code { display: block; } +img { + margin-left: auto; + margin-right: auto; + max-width: 100%; + display: block; +} + q { font-style: italic; } blockquote { font-style: italic; - font-size: 95%; + font-size: 0.95em; padding-left: 0.5rem; margin-top: -0.5rem; margin-bottom: 0.5rem; } - blockquote p { margin-bottom: 0.5rem; } -[type="checkbox"] { - vertical-align: middle; -} - ul, ol { - list-style: none; margin-bottom: 0.35rem; } +li, +dt { + font-size: 96%; + margin-bottom: 0.25rem; +} + +dd { + font-size: 93%; + margin-bottom: 0.4rem; +} + li li { padding-left: 0.5rem; font-size: 100%; margin-bottom: 0; } - li ul, -li ol { +li ol, +li dl { margin-bottom: 0; } -ol li { - list-style: decimal; -} - p + ul, -p + .links ul, -p + ol { +p + ol, +p + dl, +p + .links { margin-top: -0.3rem; } -li, -dt { - font-size: 96%; -} - -li { - margin-bottom: 0.25rem; -} - -dt { - margin-bottom: 0.3rem; +ol { + list-style: decimal; + list-style-position: inside; } -dd { - font-size: 93%; - margin-bottom: 0.4rem; +ul { + list-style: none; } ul li::before { @@ -289,63 +279,35 @@ dt::before { margin-right: 0rem; } -ol li { - list-style-position: inside; +hr { + height: 2px; + background: #666; + margin: 0.4rem auto; +} +p + hr { + margin-top: -0.5rem; } -header { - white-space: nowrap; +.tex.math, .tex.noenv { + display: inline-block; +} +.tex:not(.math):not(.noenv) { + margin-top: 0.5rem; + margin-bottom: 0.5rem; } .footnotes { margin-top: 1.17rem; font-size: 0.91rem; } - .footnotes ul { padding-left: 0; } - .footnotes li::before { content: ""; margin-right: 0; } -.symbol { - margin-right: 0.3rem; - user-select: none; -} - -.cap, -.header-section-number { - font-feature-settings: "c2sc" 0; -} - -.smcp { - font-feature-settings: "smcp" 1; - text-transform: lowercase; - letter-spacing: 0.06rem; - hyphens: none; - -webkit-hyphens: none; - -ms-hyphens: none; -} - -.cap { - font-feature-settings: "c2sc" 0; -} - -.nowrap { - white-space: nowrap; -} - -.dlig { - font-feature-settings: "dlig"; -} - -.rali { - text-align: right; -} - .mgnote { float: inherit; margin-right: inherit; @@ -356,15 +318,15 @@ header { padding-left: inherit; margin-top: inherit; } - .mgnote::before { content: " ("; } - .mgnote::after { content: ")"; } - +.mgnote.darkzone { + display: none; +} @media screen and (min-width: 1120px) { .mgnote { float: right; @@ -376,7 +338,6 @@ header { padding-left: 0.4rem; margin-top: 0.28rem; } - .mgnote.left { float: left; margin-left: -10.7rem; @@ -387,43 +348,67 @@ header { padding-right: 0.4rem; text-align: right; } - .mgnote.darkzone { display: inherit; border-left: inherit; } - + .mgnote::before { + content: ""; + } .mgnote::after { content: "."; } - - .no-period::after { + .mgnote.no-period::after { content: ""; } +} - .mgnote::before { - content: ""; - } +.darkzone, +.darkzone * { + color: #f9fffa; } -.math, -.noenv { - display: inline-block; - margin-left: initial; - transform: initial; +.break-all { + word-break: break-all; } -.tex:not(.math):not(.noenv) { - margin-top: 0.5rem; - margin-bottom: 0.5rem; +.nowrap { + white-space: nowrap; } -hr { - height: 2px; - background: #666; - margin: 0.4rem auto; +.cap, +.header-section-number { + font-feature-settings: "c2sc" 0; } -p + hr { - margin-top: -0.5rem; +.symbol { + margin-right: 0.3rem; + user-select: none; +} + +.smcp { + font-feature-settings: "smcp" 1; + text-transform: lowercase; + letter-spacing: 0.06rem; + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +.c2sc { + font-feature-settings: "c2sc" 1; +} + +.dlig { + font-feature-settings: "dlig"; } + +.rali { + text-align: right; +} + +img.shadow { + box-shadow: 0px 0px 10px #d5d9d9; +} + +/*# sourceMappingURL=main.css.map */ diff --git a/static/styles/doc/reset.css b/static/styles/doc/reset.css @@ -0,0 +1,60 @@ +/* minimal selections from sanitize.css */ +* { + padding: 0; + margin: 0; + border: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +form, +label, +ul, +ol, +dl, +address { + margin-bottom: 0.9rem; +} + +*, +::before, +::after { + box-sizing: border-box; +} + +html { + line-height: 1.45; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + word-break: break-word; +} + +main { + display: block; +} + +a { + -ms-touch-action: manipulation; + touch-action: manipulation; +} + +sup { + font-size: 75%; + line-height: 0; + vertical-align: baseline; + position: relative; + top: -0.45em; + left: 0.05em; +} + +[type=checkbox] { + vertical-align: middle; +} + +/*# sourceMappingURL=reset.css.map */ diff --git a/static/styles/reset.css b/static/styles/reset.css @@ -80,3 +80,7 @@ textarea { [type="radio"] { padding: 0; } + +[type="checkbox"] { + vertical-align: middle; +}