Rewrite Haunt configuration.

1 files changed, 151 insertions, 0 deletions

diff --git a/haunt/static/css/style.css b/haunt/static/css/style.css
new file mode 100644
index 0000000..b9f7beb
--- /dev/null
+++ b/haunt/static/css/style.css
@@ -0,0 +1,151 @@
+html {
+    font-family: "Cantarell", sans-serif;
+}
+
+@media (max-width: 54em) {
+    html {
+        font-size: 14px;
+        line-height: 160%;
+    }
+}
+
+@media (max-width: 26em) {
+    html {
+        font-size: 12px;
+        line-height: 150%;
+    }
+}
+
+body {
+    max-width: 54rem;
+    margin: .5rem auto;
+    position: relative;
+}
+
+@media (max-width: 54em) {
+    body {
+        max-width: 100%;
+        padding: 0 1rem;
+    }
+}
+
+/* Top-level header. */
+
+body > header {
+    display: flex;
+    align-items: center;
+}
+
+@media screen and (max-width: 480px) {
+    body > header {
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: space-around;
+    }
+}
+
+body > header > a > img {
+    max-width: 4rem;
+}
+
+@media screen and (min-width: 480px) {
+    body > header > a {
+        padding-right: 1rem;
+    }
+}
+
+body > header > nav > ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+@media screen and (min-width: 480px) {
+    body > header > nav > ul > li {
+        display: inline-block;
+        padding: 1rem 2rem;
+        border-bottom: 2px solid #d2d6dd;
+        text-align: center;
+    }
+
+    body > header > nav > ul > li > a {
+        color: #000;
+        text-decoration: none;
+    }
+}
+
+/* Pagination navigation. */
+
+#pagination {
+    display: flex;
+    justify-content: space-around;
+}
+
+/* Links. */
+
+a:link, a:visited { color:#0000EE; }
+
+/* Figures */
+
+figure > img {
+    display: block;
+    max-width: 90%;
+    margin: auto;
+
+    border-radius: 2px;
+}
+
+figure > figcaption {
+    padding-top: 1rem;
+}
+
+/* Embeds. */
+
+.mastodon > iframe,
+.peertube > iframe {
+    display: block;
+    width: 90%;
+    min-height: 100%;
+    margin: auto;
+    border-radius: 4px;
+}
+
+/* Footnotes. */
+
+.footdef {
+    margin-bottom: 1rem;
+}
+
+.footdef > sup, .footpara {
+    display: inline;
+}
+
+/* Source code. */
+
+pre {
+    color: #f0e9dc;
+    font-family: "Hack", monospace;
+    font-size: 90%;
+
+    background-color: #303539;
+    border-radius: 4px;
+    padding: 1rem;
+    overflow-x: scroll;
+}
+
+/* Footer. */
+
+body > footer {
+    margin-top: 1.2rem;
+    border-top: 2px solid #d2d6dd;
+}
+
+body > footer > div {
+    margin-top: 1rem;
+    display: flex;
+    align-items: center;
+}
+
+body > footer > div > p {
+    margin: 0;
+    padding-right: 1rem;
+}