diff --git a/current.css b/current.css
deleted file mode 100644
index eb206f1..0000000
--- a/current.css
+++ /dev/null
@@ -1,154 +0,0 @@
-body {
-    font-size: 110%;
-}
-
-#post .pic-container {
-    display: block;
-    text-align: center;
-}
-#post .profile-pic {
-    max-width: 200px;
-}
-
-/* Disable hidden effect for ease of use on touch screens */
-.hidden.user.action {
-    opacity: 1;
-}
-
-/* Set global variables for colors */
-:root {
-    --accent: #226997;
-}
-
-a.hashtag {
-    color: var(--main);
-}
-
-/* Links inside blog posts */
-article table a:not(.hashtag), article p a:not(.hashtag), article ul a:not(.hashtag), a.hashtag span + span {
-    color: var(--main);
-    border-bottom: solid var(--accent) 1px;
-    text-decoration: none;
-    transition: border-bottom .12s ease;
-}
-
-article table a:not(.hashtag):hover, article p a:not(.hashtag):hover, article p a:not(.hashtag):focus, article ul a:not(.hashtag):hover, article ul a:not(.hashtag):focus, a.hashtag:hover span + span {
-    text-decoration: none;
-    border-color: transparent;
-}
-
-#post a, #post a.hashtag span + span {
-    border-bottom-width: 2.5px;
-}
-
-@media (prefers-color-scheme: dark) {
-    /* Set global variables for colors */
-    :root {
-        --accent: #496474;
-        --main: #eeeeee;
-    }
-    body {
-        color: var(--main);
-        background: #111;
-    }
-    article p a, article ul a {
-        color: var(--main);
-    }
-    header p.description, header nav a {
-        color: #7d7d7d;
-    }
-    body#post article time.dt-published {
-        color: #cacaca;
-    }
-    body#collection a.read-more {
-        color: #8c8c8c;
-    }
-
-
-    /*
-       Written in 2020 by Write.as
-
-       To the extent possible under law, the author(s) have dedicated all 
-       copyright and related and neighboring rights to this software to the 
-       public domain worldwide. This software is distributed without any 
-       warranty.
-
-       You should have received a copy of the CC0 Public Domain Dedication 
-       along with this software. If not, see 
-       http://creativecommons.org/publicdomain/zero/1.0
-    */
-    body .post-title a:link {
-        color: #ccc;
-    }
-
-    #collection .post-title a {
-        color: #ccc;
-    }
-
-    #collection {
-        color: #eee;
-    }
-
-    #collection pre {
-        background: #060606;
-    }
-
-    body h1 a, body header h2 a {
-        color: #cfcfcf;
-    }
-
-    body h1 a:hover, body header h2 a:hover {
-        color: #fff;
-    }
-
-    body h1 a:visited, body header h2 a:visited {
-        color: #ccc;
-    }
-
-    body #manage ul a, body .dropdown-nav ul a, body #manage ul ul a, body #manage ul a {
-        color: #ccc;
-    }
-
-    body .dropdown-nav ul ul, body .dropdown-nav ul li:hover, body #manage ul ul, body #manage ul ul li:hover, body #manage ul li:hover {
-        background: #222;
-    }
-
-    body #official-writing h2, body #official-writing h3, body #official-writing h4, body #wrapper h2, body #wrapper h3, body #wrapper h4 {
-        color: #ddd;
-    }
-
-    body a {
-        color: #a2a2ff;
-    }
-
-    body #official-writing h2, body #official-writing h3, body #official-writing h4, body #wrapper h2, body #wrapper h3, body #wrapper h4 {
-        color: #aaa;
-    }
-
-    body #official-writing ul.collections li.collection a.title:link, body #official-writing ul.collections li.collection a.title:visited, body #wrapper ul.collections li.collection a.title:link, body #wrapper ul.collections li.collection a.title:visited {
-        color: #cfcfcf;
-    }
-
-    body #official-writing ul.collections li a.create, body #wrapper ul.collections li a.create {
-        color: #aaa;
-    }
-
-    body#me #official-writing h2 a:link, body#me #official-writing h2 a:visited {
-        color: #a2a2ff;
-    }
-
-
-    input {
-        background: #202020;
-        color: #bbb;
-    }
-
-    #manage ul ul li img {
-        filter: invert(1);
-    }
-
-    #post code, #collection code, #subpage code {
-        background: #202020;
-        color: #bbb;
-    }
-}
\ No newline at end of file
diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..e37ff62
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,143 @@
+// Set global variables for colors
+:root {
+  --accent: #226997;
+  --main: #111111;
+  --main2: #575757;
+  --main3: #7d7d7d;
+  --background: #ffffff;
+  --background2: #f7f7f7;
+}
+
+body {
+  font-size: 110%;
+  color: var(--main);
+  background-color: var(--background);
+
+  h1, header h2 {
+    a, a:visited, a:link {
+      color: var(--main);
+    }
+  }
+
+  header {
+    p.description, nav a {
+      color: var(--main2);
+    }
+  }
+
+  // Disable hidden effect for ease of use on touch screens
+  .hidden.user.action {
+    opacity: 1;
+    color: var(--main3)
+  }
+
+  // Links in articles and in list view
+  article {
+    table, p, ul {
+      a:not(.hashtag), a.hashtag span + span {
+        color: var(--main);
+        border-bottom: solid var(--accent) 1px;
+        text-decoration: none;
+        transition: border-bottom .12s ease;
+      }
+
+      a:not(.hashtag):hover, a:not(.hashtag):focus, a.hashtag:hover span + span, a.hashtag:focus span + span {
+        text-decoration: none;
+        border-color: transparent;
+      }
+    }
+  }
+
+  // Override for links in articles only
+  &#post, &#subpage {
+    a, a.hashtag span + span {
+      border-bottom-width: 2.5px;
+    }
+  }
+
+  // "Menu" dropdown, only visible to author
+  #manage, .dropdown-nav, #manage ul {
+    a {
+      color: var(--main);
+    }
+
+    ul {
+      background: var(--background);
+
+      li {
+        &:hover {
+          background: var(--background2);
+        }
+
+        a {
+          color: var(--main);
+        }
+      }
+    }
+  }
+
+  // Does subpage even exist?
+  &#post, &#collection, &#subpage {
+    color: var(--main);
+
+    pre, code {
+      background: var(--background2);
+      color: var(--main2)
+    }
+
+    pre {
+      background: var(--background2);
+    }
+
+    .post-title a {
+      color: var(--main);
+    }
+
+    a.read-more {
+      color: var(--main3);
+    }
+
+    article time.dt-published {
+      color: var(--main2);
+    }
+
+    blockquote {
+      color: var(--main2)
+    }
+
+    .pic-container {
+      display: block;
+      text-align: center;
+
+      .profile-pic {
+        max-width: 200px;
+      }
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --accent: #226997;
+    --main: #eeeeee;
+    --main2: #cecece;
+    --main3: #b1b1b1;
+    --background: #111111;
+    --background2: #575656;
+  }
+
+  // Add transparency to the image to make it look lighter
+  img {
+    opacity: .75;
+    transition: opacity .5s ease-in-out;
+  }
+  img:hover {
+    opacity: 1;
+  }
+
+  // No transparency for "view draft" icon
+  #manage ul ul li img {
+    opacity: 1;
+    filter: invert(1);
+  }
+}
\ No newline at end of file