commit b473b5ae3492c8604fd1f98614d672db4580f429
parent 50fc77eda8473bde3faa1d8e3bb88094936219c1
Author: krasjet
Date: 2020-05-30 03:51Z
rework kamome styles
Diffstat:
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;
+}