1 files changed, 248 insertions, 0 deletions

diff --git a/assets/main.scss b/assets/main.scss
new file mode 100644
index 0000000..cea2e5e
--- /dev/null
+++ b/assets/main.scss
@@ -0,0 +1,248 @@
+$background: #0e0c06;
+$foreground: #d4b782;
+$black: #1b1918;
+$brblack: #544b44;
+$red: #d42215;
+$green: #358c15;
+$yellow: #9a6200;
+$blue: #00458d;
+$magenta: #773dbf;
+$cyan: #008a7b;
+$white: #cfb688;
+
+html {
+        font-family: sans-serif;
+        color: $foreground;
+        background-color: $background;
+}
+
+body {
+        max-width: 920px;
+        margin: 0 auto;
+        padding: 1rem;
+        font-family: monospace;
+}
+
+h1 {
+        margin-top: 0;
+        font-size: 1.5rem;
+
+        small {
+                display: block;
+                font-size: 1rem;
+        }
+}
+
+a {
+        color: $yellow; 
+        text-decoration: none;
+}
+
+a:hover {
+        color: $yellow; 
+        text-decoration: underline;
+}
+
+a:visited {
+        color: $green; 
+}
+
+.index {
+        display: flex;
+        flex-direction: row;
+
+        .article-list {
+                flex-grow: 1;
+                margin: auto;
+                max-width: 600px;
+
+                .article {
+                        margin-bottom: 1rem;
+                }
+
+                .date {
+                        display: block;
+                        color: $brblack;
+                }
+        }
+
+        aside {
+                width: 40%;
+
+                img {
+                        display: block;
+                        margin: 0 auto 1rem;
+                        border-radius: 5px;
+                }
+
+                dt {
+                        font-size: 0.9rem;
+                }
+
+                dd {
+                        margin-left: 0;
+
+                        &:not(:last-child) {
+                                margin-bottom: 0.5rem;
+                        }
+                }
+        }
+
+        @media(max-width: 640px) {
+                aside {
+                        display: none;
+                }
+        }
+}
+
+article {
+        margin: 0 auto;
+        max-width: 720px;
+        line-height: 1.3;
+
+        img, video, iframe {
+                // !important for asciinema frames
+                display: block !important;
+                margin: 0 auto !important;
+                max-width: 90%;
+
+                @media(max-width: 640px) {
+                        max-width: calc(100% - 2rem);
+                }
+        }
+
+        .comment {
+                margin: 2rem auto 0;
+                max-width: 80%;
+                color: #333;
+        }
+}
+
+.footnotes {
+        font-size: 0.85rem;
+}
+
+footer {
+        margin-top: 2rem;
+        text-align: center;
+        font-size: 0.8rem;
+        color: #333;
+}
+
+.float-img {
+        float: right;
+        display: inline;
+        padding-left: 1rem;
+
+        @media(max-width: 640px) {
+                display: block;
+                float: none;
+                padding-left: inherit;
+        }
+}
+
+pre {
+        background-color: $black;
+        padding: 0.25rem 1rem;
+        margin: 0 -1rem;
+        max-width: 100%;
+        overflow-x: auto;
+
+        .cp {
+                color: #800;
+        }
+
+        .k {
+                color: #008;
+        }
+
+        .kt, .kd, .kc {
+                color: #44F;
+        }
+
+        .s {
+                color: #484;
+                font-style: italic;
+        }
+
+        .cm, .c1 {
+                color: #333;
+                font-style: italic;
+        }
+
+        .gi {
+                color: $green;
+        }
+
+        .gd {
+                color: $red;
+        }
+
+        .gu {
+                color: $blue;
+        }
+}
+
+summary {
+        cursor: pointer;
+        background-color: $black;
+        padding: 0.25rem 1rem;
+        margin: 0 -1rem;
+}
+
+details[open] {
+        border-bottom: 1rem solid $black;
+        margin: 0 -1rem 1rem;
+        padding: 0 1rem;
+}
+
+.text-center {
+        text-align: center;
+}
+
+blockquote {
+        border-left: 5px solid #bbb;
+        background-color: $black;
+        padding: 0 1rem;
+        margin-left: calc(-1rem - 5px);
+        margin-right: -1rem;
+
+        blockquote {
+                margin-right: 0;
+                margin-left: 0;
+        }
+}
+
+dl {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        grid-gap: 0.2rem 1rem;
+
+        dt {
+                font-weight: bold;
+                grid-column-start: 1;
+        }
+
+        dd {
+                grid-column-start: 2;
+                margin: 0;
+        }
+}
+
+.alert {
+        padding: 0.5rem;
+        border: 1px solid transparent;
+        margin-bottom: 1rem;
+
+        &.alert-danger {
+                background: #f8d7da;
+                color: #721c24;
+                border-color: #f5c6cb;
+        }
+
+        &.alert-info {
+                background: #d1ecf1;
+                color: #0c5460;
+                border-color: #bee5eb;
+        }
+}