html { scroll-behavior: smooth }
body {
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;
}
+@supports (-webkit-touch-callout: none) {
+ 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;
+ padding: 2em;
+ }
+}
aside {
clear: both;
padding: 2em 0;
}
br { display: none }
h1, h2, h3 {
- font-family: "Avenir Next";
+ font-family: "Avenir Next", "Segoe UI", "Fira Sans", "Roboto", sans-serif;
font-weight: 900
}
-h1 { font-size: 2em }
+h1 { font-size: 4em }
+h2 {
+ font-size: 2em;
+ text-transform: lowercase;
+}
h3 {
+ display: inline-block;
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, h3, a { color: #EE0700 }
}
.h2:nth-of-type(n+7):nth-of-type(-n+9) {
}
.h2:nth-of-type(11) {
- h2, h3, a { color: #1D76DB }
+ h2, h3, a { color: #398557 }
}
.h2:nth-of-type(n+12):nth-of-type(-n+16) {
margin: 0.25em 0;
}
+header { position: relative }
+main {
+ position: relative;
+ z-index: 1
+}
header h1 {
font-size: min(7.5rem, 17vw);
font-weight: 900;