+html { scroll-behavior: smooth }
+
body {
- font-family: "Times New Roman", Times, serif;
+ 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 {
- height: calc(100vh - 180px);
- width: max-content;
+ h1 a {
+ display: block;
+ width: 64px;
}
- .columned .h2 {
+ .columned { width: max-content }
+
+ .columned .h2:not(:only-child) {
float: left;
margin: 0 40px;
- height: calc(100vh - 180px);
}
- .columned h2 {
- width: 14.6em;
- }
+ .columned .h2:not(:only-child) h2 { width: 14.6em }
- .columned .h3, .columned p {
- width: 22em;
- }
+ .columned .h2:not(:only-child) .h3,
+ .columned .h2:not(:only-child) li,
+ .columned .h2:not(:only-child) p { width: 24em }
+ .columned .h2:not(:only-child) pre { width: 25em }
- .columned pre { width: 25em }
+ 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;
padding-left: 10px;
}
-h1, h2, h3 { font-weight: normal }
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: Monaco, monospace;
- font-size: 14px;
+ font-family: courier, monospace;
+ font-size: 0.875em;
background-color: #eee;
overflow-x: auto;
+ padding: 1em;
}
canvas {
width: 64px;
height: 64px;
- display: inline-block;
- background-color: gainsboro;
+ display: block;
+ background-color: #000;
+ border: 1px solid #000;
}
@media (prefers-color-scheme: dark) {
background: #000;
}
+ canvas {
+ background-color: #fff;
+ border: 1px solid #fff;
+ }
+
a {
color: #5dc1fd;
display: inline-block;
min-height: 48px;
}
- a:visited {
- color: #ed6eff;
- }
+ a:visited { color: #ed6eff }
- pre {
- background-color: #222;
- }
+ pre { background-color: #222 }
}