Dark: Darken nav, hero, hero waves, button, body backgrounds

2 files changed, 54 insertions, 2 deletions

diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index 79a8a92d..bd448695 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -23,6 +23,20 @@ main.site-content {
     padding-right: 0.8em;
 }
 
+[data-theme="dark"] .navbar.is-primary {
+    background-color: #3B4774;
+}
+
+/* No good way other than this for now, because the item hover background setting
+ * applies only for a navbar without is-primary.
+ */
+@media screen and (min-width: 1024px) {
+    [data-theme="dark"] .navbar.is-primary .navbar-end > a.navbar-item:hover,
+    [data-theme="dark"] .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link {
+        background-color: #455382;
+    }
+}
+
 .navbar-item .navbar-link {
     padding-left: 1.5em;
     padding-right: 2.5em;
@@ -58,6 +72,10 @@ main.site-content {
     overflow: hidden;
 }
 
+[data-theme="dark"] #discord-btn a {
+    background-color: #58689cff;
+}
+
 #discord-btn:hover a {
     box-shadow: 0 1px 4px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23);
     /*transform: scale(1.03) translate3d(0,0,0);*/
@@ -167,3 +185,12 @@ button.is-size-navbar-menu, a.is-size-navbar-menu {
         scroll-behavior: auto;
     }
 }
+
+[data-theme="dark"] .button.is-primary, .button.is-link {
+    background-color: #5365A4;
+}
+
+[data-theme="dark"] .button.is-primary:hover, .button.is-primary.is-hovered,
+[data-theme="dark"] .button.is-link:hover, .button.is-link.is-hovered {
+    background-color: #6276BC;
+}
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index c3975799..13a19d38 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -23,6 +23,10 @@ h1 {
     padding: 0;
 }
 
+[data-theme="dark"] #wave-hero {
+    background-color: #3B4774;
+}
+
 #wave-hero .container {
     z-index: 4;  /* keep hero contents above wave animations */
 }
@@ -57,6 +61,16 @@ h1 {
     transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 }
 
+[data-theme="dark"] #wave-hero-right img {
+    -webkit-filter: brightness(0.9);
+    filter: brightness(0.9);
+}
+
+[data-theme="dark"] #wave-hero-right img:hover {
+    -webkit-filter: none;
+    filter: none;
+}
+
 #wave-hero-right img:hover {
     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 }
@@ -72,13 +86,24 @@ h1 {
     transform: translate3d(0,0,0);  /* Trigger 3D acceleration for smoother animation */
 }
 
+[data-theme="dark"] #wave-hero .wave {
+    background: url(../../images/waves_dark/wave_dark.svg) repeat-x;
+}
+
 #front-wave {
     animation-duration: 60s;
     animation-delay: -50s;
-    opacity: 0.5;
     height: 178px;
 }
 
+[data-theme="light"] #front-wave {
+    opacity: 0.5;
+}
+
+[data-theme="dark"] #wave-hero #front-wave {
+    background: url(../../images/waves_dark/wave_darker.svg) repeat-x;
+}
+
 #back-wave {
     animation-duration: 65s;
     height: 198px;
@@ -93,7 +118,7 @@ h1 {
 }
 
 [data-theme="dark"] #bottom-wave {
-    background: url(../../images/waves/wave_black.svg) repeat-x !important;
+    background: url(../../images/waves_dark/wave_black.svg) repeat-x !important;
 }
 
 @keyframes wave {