Commit my version of the stylesheet

1 files changed, 343 insertions, 37 deletions

diff --git a/doc/style.css b/doc/style.css
index 5289332..ba57f04 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -1,39 +1,345 @@
-body { max-width: 48em; margin: auto; line-height: 1.5; padding: 0.8em; word-wrap: break-word; }
-pre { overflow-x: scroll; }
-blockquote { font-style: italic; }
-.snac-embedded-video, img { max-width: 100% }
-.snac-origin { font-size: 85% }
-.snac-score { float: right; font-size: 85% }
-.snac-top-user { text-align: center; padding-bottom: 2em }
-.snac-top-user-name { font-size: 200% }
-.snac-top-user-id { font-size: 150% }
-.snac-announcement { border: black 1px solid; padding: 0.5em }
-.snac-avatar { float: left; height: 2.5em; width: 2.5em; padding: 0.25em }
-.snac-author { font-size: 90%; text-decoration: none }
-.snac-author-tag { font-size: 80% }
-.snac-pubdate { color: #a0a0a0; font-size: 90% }
-.snac-top-controls { padding-bottom: 1.5em }
-.snac-post { border-top: 1px solid #a0a0a0; padding-top: 0.5em; padding-bottom: 0.5em; }
-.snac-children { padding-left: 1em; border-left: 1px solid #a0a0a0; }
+:root {
+    color-scheme: dark light;
+
+    --primary-hue: 20;
+    --secondary-hue: 200;
+    --saturation: 60%;
+    --lightness: 50%;
+
+    --light-gray: 95%;
+    --dark-gray: 45%;
+
+    --primary: hsl(var(--primary-hue) var(--saturation) var(--lightness));
+    --secondary: hsl(var(--secondary-hue) var(--saturation) var(--lightness));
+}
+
+@font-face {
+    font-family: "M PLUS 2";
+    font-display: swap;
+    src: url("/2/eris/s/MPLUS2.ttf"), local("M PLUS 2");
+}
+
+@font-face {
+    font-family: "M PLUS 1 Code";
+    font-display: swap;
+    src: url("/2/eris/s/MPLUS1Code.ttf"), local("M PLUS 1 Code");
+}
+
+html {
+    height: 100%;
+    width: 100%;
+    font-family: "M PLUS 2", sans-serif;
+    line-height: 120%;
+    text-rendering: optimizeLegibility;
+}
+
+blockquote {
+    font-style: italic;
+}
+
+/* TODO: Figure out how to float this shit to the right while still allowing wrapping on mobile and having it on the
+   same height as everything else */
+.snac-search-box {
+    font-size: 1rem;
+}
+
+h1 {
+    font-size: 150%;
+    line-height: 110%;
+}
+
+h2 {
+    font-size: 115%;
+}
+
+h3, h4, h5 {
+    font-size: 100%;
+}
+
+b {
+    color: hsl(var(--secondary-hue) var(--saturation) 30%);
+}
+
+u {
+    text-decoration-color: var(--secondary);
+}
+
+button, pre, code, input, textarea {
+    font-family: "M PLUS 1 Code", monospace;
+    border-radius: 4px;
+    color: var(--secondary);
+    background-color: hsl(0 0 var(--light-gray));
+}
+
+pre {
+    overflow-x: scroll;
+}
+
+/* TODO: consider max-width */
+body {
+    background: hsl(var(--primary-hue) 1% 99%);
+    height: 100%;
+    width: 100%;
+    margin: 0;
+}
+
+header {
+    background: hsl(var(--secondary-hue) 1% 74%);
+    margin-bottom: 1rem;
+    border-bottom: 1px solid black;
+
+    font-size: 125%;
+    line-height: 150%;
+
+    text-overflow: ellipsis;
+}
+
+header * {
+    margin-top: 0.1rem;
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+}
+
+header > .left {
+    justify-content: left;
+}
+
+
+header > .right {
+    justify-content: right;
+}
+
+header > :first-child {
+    margin-left: 0.5rem;
+}
+
+.snac-embedded-video, img {
+    max-width: 100%;
+}
+
+body > header img {
+    padding: 0.25rem;
+    height: 3rem;
+    width: auto;
+}
+
+footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    font-height: 80%;
+    margin-top: 1rem;
+    border-top: 1px solid black;
+}
+
+footer > p {
+    margin-bottom: 0.5rem;
+}
+
+a {
+    color: var(--secondary);
+    text-decoration: none;
+}
+
+a:hover {
+    color: var(--primary);
+    background-color: hsl(0 0 var(--light-gray));
+    border-radius: 4px;
+}
+
+/* Support for  fiore */
+.snac-content {
+    white-space: pre-wrap;
+}
+
+.snac-content-attachments > a:hover {
+    background-color: transparent;
+    border-radius: 0;
+}
+
+a:visited {
+    color: var(--primary);
+}
+
+@media (min-width: 1140px) {
+    body > main {
+        margin-left: 9rem;
+        margin-right: 9rem;
+    }
+}
+
+@media (min-width: 800px) and (max-width: 1140px) {
+    body > main {
+        margin-left: 5rem;
+        margin-right: 5rem;
+    }
+}
+
+@media (max-width: 800px) {
+    body > main {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    body, input, textarea {
+        background: hsl(var(--primary-hue) 1% 17%);
+        color: hsl(0 0 var(--light-gray));
+    }
+
+    header {
+        background: hsl(var(--secondary-hue) 1% 12%);
+    }
+
+    b {
+        color: hsl(var(--secondary-hue) var(--saturation) 75%);
+    }
+}
+
+.snac-origin {
+    font-size: 85%;
+}
+
+.snac-score {
+    float: right;
+    font-size: 85%;
+}
+
+.snac-top-user {
+    text-align: center;
+    padding-bottom: 2em;
+}
+
+.snac-top-user-name {
+    font-size: 200%;
+}
+
+.snac-top-user-id {
+    font-size: 150%
+}
+
+.snac-announcement {
+    border: black 1px solid;
+    padding: 0.5em;
+}
+
+.snac-avatar {
+    float: left;
+    /* TODO: Maybe max-height & max-width 2.5em? */
+    height: 2.5em;
+    padding: 0.25em;
+}
+
+.snac-author {
+    font-size: 90%;
+    text-decoration: none;
+}
+
+.snac-author-tag {
+    font-size: 80%;
+}
+
+.snac-pubdate {
+    color: hsl(0 0 var(--dark-gray));
+    font-size: 90%;
+}
+
+.snac-top-controls {
+    padding-bottom: 1.5em;
+}
+
+.snac-post {
+    border-top: 1px solid #a0a0a0;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+
+.snac-children {
+    padding-left: 1em;
+    border-left: 1px solid #a0a0a0;
+}
+
 .snac-thread-cont { border-top: 1px dashed #a0a0a0; }
-.snac-textarea { font-family: inherit; width: 100% }
-.snac-history { border: 1px solid #606060; border-radius: 3px; margin: 2.5em 0; padding: 0 2em }
-.snac-btn-mute { float: right; margin-left: 0.5em }
-.snac-btn-unmute { float: right; margin-left: 0.5em }
-.snac-btn-follow { float: right; margin-left: 0.5em }
-.snac-btn-unfollow { float: right; margin-left: 0.5em }
-.snac-btn-hide { float: right; margin-left: 0.5em }
-.snac-btn-delete { float: right; margin-left: 0.5em }
-.snac-btn-limit { float: right; margin-left: 0.5em }
-.snac-btn-unlimit { float: right; margin-left: 0.5em }
-.snac-footer { margin-top: 2em; font-size: 75% }
-.snac-poll-result { margin-left: auto; margin-right: auto; }
-.snac-list-of-lists { padding-left: 0; }
-.snac-list-of-lists li { display: inline; border: 1px solid #a0a0a0; border-radius: 25px;
-  margin-right: 0.5em; padding-left: 0.5em; padding-right: 0.5em; }
-.snac-no-more-unseen-posts { border-top: 1px solid #a0a0a0; border-bottom: 1px solid #a0a0a0; padding: 0.5em 0; margin: 1em 0; }
-@media (prefers-color-scheme: dark) { 
-  body, input, textarea { background-color: #000; color: #fff; }
-  a { color: #7799dd }
-  a:visited { color: #aa99dd }
+
+.snac-textarea {
+    width: 100%;
+}
+
+.snac-history {
+    border: 1px solid #606060;
+    border-radius: 3px;
+    margin: 2.5em 0;
+    padding: 0 2em;
+}
+
+.snac-btn-mute {
+    float: right;
+    margin-left: 0.5em;
+}
+
+.snac-btn-unmute {
+    float: right;
+    margin-left: 0.5em;
+}
+
+.snac-btn-follow {
+    float: right;
+    margin-left: 0.5em;
+}
+
+.snac-btn-unfollow {
+    float: right;
+    margin-left: 0.5em;
+}
+
+.snac-btn-hide {
+    float: right;
+    margin-left: 0.5em;
+}
+
+.snac-btn-delete {
+    float: right;
+    margin-left: 0.5em;
+}
+
+.snac-btn-limit {
+    float: right;
+    margin-left: 0.5em;
+}
+
+.snac-btn-unlimit {
+    float: right;
+    margin-left: 0.5em;
+}
+
+.snac-footer {
+    margin-top: 2em;
+    font-size: 75%;
+}
+
+.snac-poll-result {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.snac-list-of-lists {
+    padding-left: 0;
+}
+
+.snac-list-of-lists li {
+    display: inline;
+    border: 1px solid #a0a0a0;
+    border-radius: 4px;
+    margin-right: 0.5em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+}
+
+.snac-no-more-unseen-posts {
+    border-top: 1px solid #a0a0a0;
+    border-bottom: 1px solid #a0a0a0;
+    padding: 0.5em 0;
+    margin: 1em 0;
 }