color: black;
}
-h2,
-h3 {
- margin-left: 10px;
+h1, h2 {
+ display: inline-block;
+ margin-left: 1rem;
font-weight: 300;
}
-h1 {
+header {
margin: -0.3em 0 0 -0.1em;
font-size: 9.6em;
font-style: italic;
text-transform: uppercase;
}
-h2 {
+h1, h2 {
font-size: 4.8em;
}
}
ul, p {
- font-size: 1.8em;
+ font-size: 1.8rem;
line-height: 1.28em;
margin-left: 1em;
max-width: 50em;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
-ul {
- list-style: square;
+li {
+ display: block;
}
-li {
+li p {
+ display: inline-block;
line-height: 1.82em;
+ margin: 0;
}
-aside {
+span {
display: inline;
color: grey;
}
img,
video {
+ display: block;
max-width: 100vw;
}
+header a, h1, h2, p {
+ background-color: white;
+}
+
/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
body {
color: white;
}
- h1 a, h1 a:visited {
+ header a, header a:visited {
color: white;
}
color: #55FF55;
}
- aside {
+ span {
color: #FFEC27;
}
+
+ header a, h1, h2, p {
+ background-color: black;
+ }
+}
+
+/*
+ * Mini header
+ */
+@media (max-width: 600px) {
+ header {
+ font-size: 4.8em;
+ }
+}
+
+/*
+ * Breadsticks
+ */
+canvas.background {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: -1;
}