init

static/css/index.css

@@ -0,0 +1,47 @@
+nav {
+    margin: .5em -.8em;
+}
+
+nav a {
+    padding: 0 .8em;
+}
+
+table {
+    width: 100%;
+}
+
+h1 {
+    font-size: 1.7em;
+}
+
+body > header h1 {
+    font-size: 1.6em;
+}
+
+header h1 {
+    margin: 0;
+}
+
+article header {
+    margin-bottom: 1.5em;
+}
+
+article header h1 {
+    font-size: 1.75em;
+    margin-bottom: .2em;
+}
+
+.archive li {
+    padding: .3em 0;
+}
+
+.archive a {
+    font-size: 1.1em;
+}
+
+.archive time {
+    display: inline-block;
+    font-size: 1.05em;
+    width: 6em;
+    margin: 0 .25em;
+}

static/css/theme.css

@@ -0,0 +1,140 @@
+body {
+    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+    font-size: 16px;
+    font-size: calc(0.8em + 0.25vw);
+    font-weight: 400;
+    line-height: 1.65;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body, blockquote, figure {
+    margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: inherit;
+}
+
+b, strong, th {
+    font-weight: 500;
+}
+
+a {
+    color: inherit;
+    text-decoration: inherit;
+    transition: color .2s;
+}
+
+a:hover {
+    color: #949494;
+}
+
+article a {
+    color: #68f;
+}
+
+article header a, article footer a {
+    font-weight: inherit;
+    color: inherit;
+}
+
+header time {
+    color: #949494;
+}
+
+hr {
+    border: 1px solid rgba(148,148,148,0.3);
+    margin: 2em 0;
+}
+
+blockquote {
+    background: rgba(148,148,148,0.06);
+    border-left: 3px solid rgba(148,148,148,0.6);
+    padding: 1px 1.5em;
+}
+
+img {
+    border-radius: 2px;
+    max-width: 100%;
+    height: auto;
+    margin: .5em 0;
+}
+
+table {
+    border-spacing: 1px;
+    box-shadow: 0px 0px 0px 1px rgba(148,148,148,0.16) inset;
+}
+
+tr:hover, tr:nth-child(even) td {
+    background: rgba(148,148,148,0.06);
+}
+
+th {
+    background: rgba(148,148,148,0.1);
+    text-align: inherit;
+}
+
+th, td {
+    box-shadow: 0px 0px 0px 1px rgba(148,148,148,0.16);
+    padding: .5em 1em;
+}
+
+pre {
+    background: rgba(38,38,38,0.8);
+    color: #fff;
+    border-radius: 2px;
+    font-size: .8em;
+    margin: 1.5em 0;
+    padding: .8em 1.2em;
+    white-space: pre-wrap;
+}
+
+p code {
+    background: rgba(148,148,148,0.15);
+    opacity: .75;
+    border-radius: 2px;
+    font-size: .9em;
+    margin: 0 .1em;
+    padding: .2em .4em;
+}
+
+body > header, body > footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+}
+
+@media (prefers-color-scheme: light) {
+    html {
+        background: #fff;
+        color: #282828;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        background: #282828;
+        color: #fff;
+    }
+}
+
+body > header, article, body > footer {
+    padding: 1.5em calc(34% - 12rem);
+}
+
+@media (max-width: 40em) {
+    body > header, article, body > footer {
+        padding:1.5em 1em;
+    }
+}
+
+article, body > footer {
+    border-top: 1px solid rgba(148,148,148,0.12);
+}
+
+body > header {
+    background: #2b2b2b;
+    color: #fff;
+}