+* {
+ padding: 0;
+ margin: 0
+}
+html { scroll-behavior: smooth }
body {
- font-family: "Times New Roman", serif;
- text-rendering: optimizeLegibility;
- font-variant: historical-ligatures;
- font-feature-settings: "hlig" 1, "dlig" 1, "onum" 1, "zero" 1, "swsh" 1, "kern" 1, "medi" 1;
+ font-size: 1em;
+ font: max(1em, -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;
+ padding: 2em;
+}
+aside {
+ clear: both;
+ padding: 2em 0;
+}
+::selection {
+ background-color: #e8e8e8;
+ color: #00f;
}
-
@media only screen and (min-width: 500px) {
- body {
- overflow-x: auto;
- }
-
+ body { overflow-x: auto }
.columned {
- height: calc(100vh - 200px);
width: max-content;
+
+ .h2:not(:only-child) {
+ float: left;
+ margin: 0 60px 0 0;
+
+ h2 { max-width: 14.6em }
+ .h3,
+ li,
+ p { max-width: 24em }
+ pre { max-width: 25em }
+ }
+
+ .h2:first-of-type {
+ columns: 3;
+ width: 24em;
+
+ h2:empty {display: none}
+ h2,
+ pre,
+ ul,
+ p:not(.a) { column-span: all }
+ p { break-after: column }
+ p.a { break-after: avoid }
+ }
}
+}
- .columned .h2:not(only-child) {
- float: left;
- margin: 0 40px;
- height: calc(100vh - 200px);
+.a { margin: 0 0.3em }
+pre {
+ background-color: #eee;
+ font-family: courier, monospace;
+ font-size: 0.875em;
+ max-width: 55em;
+ overflow-x: auto;
+ padding: 1em;
+}
+pre[role="img"] { display: none }
+blockquote, p, article > div {
+ max-width: 45em
+}
+blockquote {
+ border-left: 4px solid #ccc;
+ padding-left: 10px;
+}
+br { display: none }
+h1, h2, h3 {
+ font-family: "Avenir Next";
+ font-weight: 900
+}
+h1 { font-size: 2em }
+h3 {
+ font-weight: 600;
+ margin-top: 1em
+}
+
+h2, h3, a { color: #00f }
+[data-title="/index.html"] {
+ .h2:nth-of-type(n+2):nth-of-type(-n+4) {
+ h2, h3, a { color: #EE0700 }
}
- .columned .h2:not(only-child) h2 {
- width: 14.6em;
+ .h2:nth-of-type(n+5):nth-of-type(-n+6) {
+ h2, h3, a { color: #398557 }
}
- .columned .h2:not(only-child) .h3, .columned .h2:not(only-child) p {
- width: 22em;
+ .h2:nth-of-type(n+7):nth-of-type(-n+9) {
+ h2, h3, a { color: #6A5ACD }
}
- .columned .h2:not(only-child) pre { width: 25em }
-}
+ .h2:nth-of-type(10) {
+ h2, h3, a { color: #A76905 }
+ }
-.columned .h2:first-of-type pre {
- line-height: 1;
+ .h2:nth-of-type(11) {
+ h2, h3, a { color: #1D76DB }
+ }
+
+ .h2:nth-of-type(n+12):nth-of-type(-n+16) {
+ h2, h3, a { color: #D505C6 }
+ }
+
+ .h2:nth-of-type(17) {
+ h2, h3, a { color: #6A788A }
+ }
}
-blockquote, p { max-width: 45em }
-pre { max-width: 55em }
-blockquote {
- border-left: 4px solid #ccc;
- padding-left: 10px;
+.h2 a {
+ display: inline-block;
+ padding: 0.25em 0;
+ margin: 0.25em 0;
}
-h1, h2, h3 { font-weight: normal }
-br { display: none }
-pre {
- font-family: courier, monospace;
- font-size: 14px;
- background-color: #eee;
- overflow-x: auto;
+header h1 {
+ font-size: min(7.5rem, 17vw);
+ font-weight: 900;
+ letter-spacing: -0.2em;
+ line-height: 1em;
+}
+header h1 a {
+ background: repeating-linear-gradient(
+ 0deg,
+ black,
+ black 1px,
+ white 1px,
+ white 2px
+ );
+ background-clip: text;
+ color: transparent;
+ display: inline-block;
+ padding-right: 0.2em;
+ text-decoration: none;
+ -webkit-text-stroke: 1px #000;
}
canvas {
- width: 64px;
- height: 64px;
- display: inline-block;
background-color: #000;
border: 1px solid #000;
+ display: inline-block;
+ height: 64px;
+ width: 64px;
}
@media (prefers-color-scheme: dark) {
body {
- color: #fff;
background: #000;
+ color: #fff;
}
-
canvas {
background-color: #fff;
border: 1px solid #fff;
}
-
- a {
- color: #5dc1fd;
- display: inline-block;
- min-height: 48px;
+ h2, h3, a { color: #5dc1fd }
+ [data-title="/index.html"] .h2:nth-of-type(n+7):nth-of-type(-n+9) {
+ h2, h3, a { color: #675CFB }
}
-
- a:visited {
- color: #ed6eff;
- }
-
- pre {
- background-color: #222;
+ pre { background-color: #222 }
+ header h1 a {
+ -webkit-text-stroke: 1px #fff;
}
}