added dark theme and improved hover scale

1 files changed, 46 insertions, 11 deletions

diff --git a/static/css/styles.css b/static/css/styles.css
index f2f7e47..a904220 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,3 +1,4 @@
+@media (prefers-color-scheme:light) {
 :root {
   --primary-color: #438566;
   --secondary-color: #cfc797;
@@ -6,10 +7,30 @@
   --background-color: #ecf0f1;
   --link-color: #ab710e;
   --border-color: #908b69;
+  --nav-color: var(--background-color);
+  --alt-color: var(--background-color);
+  --details-color: #ddd;
   --shadow: rgba(0, 0, 0, 0.1);
   --dark-shadow: rgba(0, 0, 0, 0.2);
 }
+}
 
+@media (prefers-color-scheme: dark) {
+:root {
+  --primary-color: #003136;
+  --secondary-color: #9a977c;
+  --accent-color: #6e2b30;
+  --text-color: #ffffff;
+  --background-color: #011111;
+  --link-color: #ab710e;
+  --border-color: #6e6e6e;
+  --nav-color: var(--link-color);
+  --alt-color: var(--text-color);
+  --details-color: #438566;
+  --shadow: rgba(255, 255, 255, 0.1);
+  --dark-shadow: rgba(255, 255, 255, 0.2);
+}
+}
 
 body, h1, h2, ul, li {
     margin: 0;
@@ -22,7 +43,7 @@ body {
 }
 
 main {
-    margin: 1em 2.5vw;
+    margin: 1em 10vw;
 }
 
 main > article {
@@ -80,7 +101,7 @@ a {
 }
 
 header > :not(nav) {
-    margin-left: 1.5vw;
+    margin-left: 2.5vw;
 }
 header > h1 {
     padding-top: 0.2em;
@@ -98,7 +119,7 @@ nav li {
 }
 
 nav a {
-    color: var(--background-color);
+    color: var(--nav-color);
     text-decoration: none;
 }
 
@@ -118,6 +139,13 @@ menu a {
     box-shadow: 0 4px 8px var(--shadow);
 }
 
+.landing-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1em;
+}
+
 .featured-image-container {
     display: flex;
     flex-direction: column;
@@ -152,6 +180,10 @@ menu a {
         border-bottom: 2px solid var(--border-color);
         max-width: 100%;
     }
+
+    .landing-content {
+        padding: 0;
+    }
 }
 
 .recent-updates {
@@ -195,8 +227,8 @@ footer {
 details summary {
     cursor: pointer;
     padding: 10px;
-    background-color: #ddd;
-    border: 2px solid #ddd;
+    background-color: var(--details-color);
+    border: 2px solid var(--details-color);
     border-radius: 5px;
 }
 
@@ -205,8 +237,7 @@ details > :not(summary) {
 }
 
 details {
-    /* TODO: add bluegrey background */
-    background-color: #ddd;
+    background-color: var(--details-color);
     border-radius: 5px;
     box-shadow: 1px 1px 1px var(--dark-shadow);
 }
@@ -214,7 +245,7 @@ details {
 details[open] summary, details summary:hover {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
-    color: var(--background-color);
+    color: var(--alt-color);
 }
 
 hr {
@@ -222,11 +253,15 @@ hr {
 }
 
 nav > h1 {
-    font-size: 2em;
+    display: inline-block;
+    font-size: 2.5em;
+}
+
+.hover-scale {
     transition: transform 0.3s ease-in-out;
 }
 
-nav > h1:hover {
+.hover-scale:hover {
     transform: scale(1.5);
 }
 
@@ -246,7 +281,7 @@ nav > h1:hover {
   display: inline-block;
   padding: 8px 16px;
   background-color: var(--primary-color);
-  color: var(--background-color);
+  color: var(--alt-color);
   border-radius: 16px;
   text-decoration: none;
   transition: background-color 0.3s ease;