theme changes

themes/developer/static/css/style.css

@@ -1,10 +1,17 @@
+:root {
+  --background: #1E2127;
+  --foreground: #FFFFFF;
+  --secondary: #ABB2BF;
+  --tertiary: #5C6370;
+}
+
 /* LAYOUT */
 body {
   font-family: "Iosevka Nerd Font", "Iosevka", "JetBrainsMono Nerd Font", "JetBrainsMono", monospace;
-  background-color: #000000;
-  color: #FFFFFF;
+  background-color: var(--background);
+  color: var(--foreground);
   line-height: 1.5;
-  max-width: 45rem;
+  max-width: 50rem;
   padding: 1rem;
   margin: 0 auto;
 }
@@ -13,33 +20,6 @@ body {
   margin-bottom: 2rem;
 }
 
-/* TYPOGRAPHY */
-h1 {
-  font-size: 25px;
-}
-
-h2 {
-  font-size: 17.5px;
-}
-
-h3, p, li {
-  font-size: 15px;
-}
-
-hr {
-  margin: 0;
-  color: white;
-}
-
-a {
-  color: inherit;
-}
-
-time {
-  color: grey;
-  font-style: italic;
-}
-
 /* NAVIGATION */
 .site-nav {
   display: flex;
@@ -52,10 +32,6 @@ time {
   padding: 0.3rem;
 }
 
-a:hover {
-  background-color: gray;
-}
-
 .site-nav .logo {
   font-weight: bold;
   padding-left: 0;
@@ -88,3 +64,34 @@ a:hover {
 .post-snippet h3 {
   margin-bottom: 0.25rem;
 }
+
+/* TYPOGRAPHY */
+h1 {
+  font-size: 25px;
+}
+
+h2 {
+  font-size: 17.5px;
+}
+
+h3, p, li {
+  font-size: 15px;
+}
+
+hr {
+  margin: 0;
+  color: white;
+}
+
+a {
+  color: inherit;
+}
+
+a:hover {
+  background-color: var(--tertiary);
+}
+
+time {
+  color: var(--secondary);
+  font-style: italic;
+}