+* {
+ padding: 0;
+ margin: 0
+}
html { scroll-behavior: smooth }
body {
font-size: 1em;
- font: -apple-system-body;
+ 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;
+ padding: 2em 0;
}
::selection {
background-color: #e8e8e8;
}
@media only screen and (min-width: 500px) {
body { overflow-x: auto }
- main { padding: 0 64px 0 124px }
- h1 a {
- display: block;
- width: 64px;
- }
- header {
- float: left;
- margin-top: 0.8em;
- }
.columned {
width: max-content;
columns: 3;
width: 24em;
- pre[role="img"]:first-of-type { margin-top: 1.64em }
h2:empty {display: none}
h2,
pre,
background-color: #eee;
font-family: courier, monospace;
font-size: 0.875em;
- max-width: 55em
+ max-width: 55em;
overflow-x: auto;
padding: 1em;
}
-pre[role="img"] { line-height: 1 }
+pre[role="img"] { display: none }
blockquote, p, article > div {
max-width: 45em
}
padding-left: 10px;
}
br { display: none }
-h1, h2, h3 { font-weight: normal }
+h1, h2, h3 {
+ font-family: "Avenir Next";
+ font-weight: 900
+}
h1 { font-size: 2em }
-h2 { font-size: 1.65em }
-h3 { font-size: 1.25em }
-header h1 { font-size: 1em }
+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 }
+ }
+
+ .h2:nth-of-type(n+5):nth-of-type(-n+6) {
+ h2, h3, a { color: #398557 }
+ }
+
+ .h2:nth-of-type(n+7):nth-of-type(-n+9) {
+ h2, h3, a { color: #6A5ACD }
+ }
+
+ .h2:nth-of-type(10) {
+ h2, h3, a { color: #A76905 }
+ }
+
+ .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 }
+ }
+}
+
+.h2 a {
+ display: inline-block;
+ padding: 0.25em 0;
+ margin: 0.25em 0;
+}
+
+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 {
background-color: #000;
border: 1px solid #000;
- display: block;
+ display: inline-block;
height: 64px;
width: 64px;
}
background-color: #fff;
border: 1px solid #fff;
}
- a { color: #5dc1fd }
- a:visited { color: #ed6eff }
+ 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 }
+ }
pre { background-color: #222 }
+ header h1 a {
+ -webkit-text-stroke: 1px #fff;
+ }
}