-html {
- scroll-behavior: smooth;
-}
+html { scroll-behavior: smooth }
body {
+ font-size: 1em;
font: -apple-system-body;
font-family: "Hoefler Text", "Times New Roman", serif;
font-feature-settings: "liga" 1, "dlig" 1, "pnum" 1;
line-height: 1.6;
letter-spacing: 0.02em;
+ text-align: justify;
}
aside {
clear: both;
+ padding-top: 2em;
+}
+
+::selection {
+ color: #00f;
+ background-color: #e8e8e8;
}
@media only screen and (min-width: 500px) {
- body {
- overflow-x: auto;
- }
+ body { overflow-x: auto }
+ main { padding: 0 0 0 74px }
- .columned {
- width: max-content;
+ h1 a {
+ display: block;
+ width: 64px;
}
+ .columned { width: max-content }
+
.columned .h2:not(:only-child) {
float: left;
margin: 0 40px;
}
- .columned .h2:not(:only-child) h2 {
- width: 14.6em;
- }
+ .columned .h2:not(:only-child) h2 { width: 14.6em }
.columned .h2:not(:only-child) .h3,
.columned .h2:not(:only-child) li,
- .columned .h2:not(:only-child) p {
- width: 22em;
- }
-
+ .columned .h2:not(:only-child) p { width: 24em }
.columned .h2:not(:only-child) pre { width: 25em }
-}
-.columned .h2:first-of-type pre {
- line-height: 1;
+ header {
+ float: left;
+ margin-top: 0.8em;
+ }
}
-blockquote, p { max-width: 45em }
+.columned .h2:first-of-type pre { line-height: 1 }
+
+blockquote, p, article > div {
+ margin: 0 0.3em;
+ max-width: 45em
+}
pre { max-width: 55em }
blockquote {
border-left: 4px solid #ccc;
}
br { display: none }
+h1, h2, h3 { font-weight: normal }
+h1 { font-size: 2em }
+h2 { font-size: 1.65em }
+h3 { font-size: 1.25em }
+header h1 { font-size: 1em }
pre {
font-family: courier, monospace;
font-size: 0.875em;
background-color: #eee;
overflow-x: auto;
+ padding: 1em;
}
canvas {
width: 64px;
height: 64px;
- display: inline-block;
+ display: block;
background-color: #000;
border: 1px solid #000;
}
min-height: 48px;
}
- a:visited {
- color: #ed6eff;
- }
+ a:visited { color: #ed6eff }
- pre {
- background-color: #222;
- }
+ pre { background-color: #222 }
}