From 7b5435a9855111dd34422ff0067c1955c43875eb Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Fri, 5 Jan 2024 17:31:11 +0800
Subject: Dark: Fix hero colors on homepage

We can now use `[data-theme="dark"]` selector in CSS to defined styles
specifically for dark mode. This follows common web dev patterns and
gives little overhead.

- Hero
  - Added `wave_black` SVG which copies `wave_white` as is but uses the
    site's dark mode background color.
---
 pydis_site/static/css/home/index.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'pydis_site/static/css')

diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index e117a35b..23e27be1 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -91,6 +91,11 @@ h1 {
     height: 26px;
     z-index: 3;
 }
+[data-theme="dark"] {
+    #bottom-wave {
+        background: url(../../images/waves/wave_black.svg) repeat-x !important;
+    }
+}
 
 @keyframes wave {
   0% {
@@ -176,6 +181,11 @@ h1 {
 #projects .card:hover .card-header-title {
     color: #363636;
 }
+[data-theme="dark"] {
+    #projects .card:hover .card-header-title {
+        color: #CAD6FF;
+    }
+}
 
 #projects .card-content {
     padding-top: 8px;
-- 
cgit v1.2.3