Add custom styles

1 files changed, 58 insertions, 0 deletions

diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 0000000..dfda503
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,58 @@
+$background:     hsl(210, 14%, 9%);
+$text:           mix(hsl(210, 60%, 95%), $background, 85%);
+$text-minus:     mix(hsl(210, 100%, 95%), $background, 60%);
+$text-faint:     mix(hsl(210, 100%, 95%), $background, 40%);
+$text-plus:      #fff;
+$sel-background: $text;
+$sel-text:       #000;
+
+@font-face {
+    font-family: 'IBM Plex Mono';
+    font-style:  normal;
+    font-weight: normal;
+    src: url('/assets/IBMPlexMono-Regular.woff2') format('woff2'),
+         url('/assets/IBMPlexMono-Regular.woff')  format('woff');
+}
+
+body {
+    background-color: $background;
+    color:            $text;
+}
+
+.wrap {
+    text-align: center;
+}
+
+.content {
+    display:     inline-block;
+    min-width:   50em;
+    margin:      0;
+    padding:     2em 1em;
+    text-align:  left;
+    font-family: 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
+    font-size:   1em;
+    line-height: 1.5;
+}
+
+::selection {
+    color:            $sel-text;
+    background-color: $sel-background;
+}
+
+:link {
+    color: $text-plus;
+}
+
+:visited {
+    color: $text;
+}
+
+:link, :visited {
+    &:hover {
+        color: $text-plus;
+    }
+}
+
+.link-type {
+    color: $text-minus;
+}