added dark mode

2 files changed, 46 insertions, 25 deletions

diff --git a/index.html b/index.html
index 078e0c8..be14870 100644
--- a/index.html
+++ b/index.html
@@ -63,6 +63,7 @@
             <nav id="about_pane">
                 <section>
                     <a href="#">About</a>
+                    <a href="#">Source</a>
                 </section>
                 <section>
                     <a href="#">Credits</a>
diff --git a/style/main.css b/style/main.css
index 2ae2210..78558a6 100644
--- a/style/main.css
+++ b/style/main.css
@@ -15,6 +15,14 @@
 
     --border:     #DADCE0;
 
+    /* query input */
+    --qbg:        transparent;
+    --qborder:    var(--border);
+
+    --qbgh:       transparent;
+    --qborderh:   var(--border);
+    --qshadowh:   var(--qborder);
+
     /* buttons */
     --btn-bg:     #F8F9FA;
     --btn-fg:     var(--fg);
@@ -65,54 +73,62 @@
     :root
     {
         /* general */
-        --bg:         #FFFFFF;
-        --bg-dark:    #F2F2F2;
-        --fg:         #202124;
-        --fg-light:   #CACACA;
+        --bg:         #202124;
+        --bg-dark:    #171717;
+        --fg:         #E8EAED;
+        --fg-light:   #BDC1C6;
+
+        --border:     #3C4043;
+
+        /* query input */
+        --qbg:        transparent;
+        --qborder:    #5F6368;
 
-        --border:     #DADCE0;
+        --qbgh:       #303134;
+        --qborderh:   transparent;
+        --qshadowh:   #171717;
 
         /* buttons */
-        --btn-bg:     #F8F9FA;
+        --btn-bg:     #303134;
         --btn-fg:     var(--fg);
         --btn-shad:   transparent;
         --btn-brd:    transparent;
 
         --btn-bgh:    var(--btn-bg);
         --btn-fgh:    var(--btn-fg);
-        --btn-shadh:  var(--border);
-        --btn-brdh:   var(--border);
+        --btn-shadh:  transparent;
+        --btn-brdh:   #5F6368;
 
         --btn-bgf:    var(--btn-bg);
         --btn-fgf:    var(--btn-fg);
-        --btn-shadf:  var(--border);
-        --btn-brdf:   #4285F4;
+        --btn-shadf:  transparent;
+        --btn-brdf:   var(--btn-brdh);
 
         /* accent buttons */
-        --abtn-bg:    #1A73E8;
-        --abtn-fg:    #FFFFFF;
+        --abtn-bg:    #8AB4F8;
+        --abtn-fg:    #202124;
         --abtn-brd:   transparent;
-        --abtn-shad:  #424043;
+        --abtn-shad:  transparent;
 
-        --abtn-bgh:   #1B66C9;
+        --abtn-bgh:   #93BAF9;
         --abtn-fgh:   var(--abtn-fg);
         --abtn-brdh:  transparent;
-        --abtn-shadh: #424043;
+        --abtn-shadh: transparent;
 
-        --abtn-bgf:   #1C5FBA;
+        --abtn-bgf:   #A6C6FA;
         --abtn-fgf:   var(--abtn-fg);
         --abtn-brdf:  transparent;
-        --abtn-shadf: var(--abtn-shadh);
+        --abtn-shadf: transparent;
 
         /* links */
-        --a-unvis:    #2317AE;
-        --a-vis:      #681DA8;
+        --a-unvis:    #8AB4F8;
+        --a-vis:      #C58AF9;
 
         /* misc */
-        --logo-a:     #4284F4;
-        --logo-b:     #EA4335;
-        --logo-c:     #FBBC05;
-        --logo-d:     #34A853;
+        --logo-a:     #FFFFFF;
+        --logo-b:     #FFFFFF;
+        --logo-c:     #FFFFFF;
+        --logo-d:     #FFFFFF;
     }
 
 }
@@ -302,13 +318,16 @@ button, input { all: unset; }
     padding: 1rem 1.5rem;
     margin:  1rem;
 
-    border: 1px solid rgb(218, 220, 224);
+    background-color: var(--qbg);
+    border: 1px solid var(--qborder);
     border-radius: 10rem;
 }
 
 #query_wrap:hover
 {
-    box-shadow: 0.5pt 0.75pt 0.5rem var(--border);
+    background-color: var(--qbgh);
+    border: 1px solid var(--qborderh);
+    box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh);
 }
 
 #query
@@ -343,6 +362,7 @@ button, input[type=submit]
     text-align: center;
 
     cursor: pointer;
+    user-select: none;
 }
 
 button:hover, input[type=submit]:hover