1 files changed, 102 insertions, 11 deletions

diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index e117a35b..f21263db 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;
@@ -92,6 +117,10 @@ h1 {
     z-index: 3;
 }
 
+[data-theme="dark"] #bottom-wave {
+    background: url(../../images/waves_dark/wave_black.svg) repeat-x !important;
+}
+
 @keyframes wave {
   0% {
     margin-left: 0;
@@ -153,10 +182,18 @@ h1 {
     flex-direction: column;
 }
 
+[data-theme="dark"] #projects .card {
+    border: #4E4F51 1px solid;
+}
+
 #projects .card:hover {
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
+[data-theme="dark"] #projects .card:hover {
+    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.7);
+}
+
 #projects .card-header {
     box-shadow: none;
     font-size: 1.25rem;
@@ -173,10 +210,21 @@ h1 {
     color: #7289DA;
 }
 
+[data-theme="dark"] #projects .card-header-title {
+    /* Link color from settings.py */
+    color: #99B0FF;
+}
+
 #projects .card:hover .card-header-title {
+    /* Bulma link-hover setting */
     color: #363636;
 }
 
+[data-theme="dark"] #projects .card:hover .card-header-title {
+    /* Bulma link-hover setting */
+    color: #FFFFFF;
+}
+
 #projects .card-content {
     padding-top: 8px;
     padding-bottom: 1rem;
@@ -218,21 +266,64 @@ h1 {
     text-align: center;
 }
 
-#sponsors .columns {
-    display: block;
-    justify-content: center;
-    margin: auto;
-    max-width: 80%;
+#sponsors .container {
+    max-width: 70%;
 }
 
 #sponsors a {
-    margin: auto;
-    display: inline-block;
+    border-radius: .2rem;
+    margin-bottom: .8rem;
+    position: relative;
 }
 
 #sponsors img {
-    width: auto;
-    height: auto;
+    max-height: 4rem;
+}
+
+@media (min-width: 800px) {
+    #sponsors a.column.is-one-third:first-child {
+        margin-left: -.8rem;
+        margin-right: .8rem;
+    }
+
+    #sponsors a.column.is-one-third:last-child {
+        margin-left: .8rem;
+        margin-right: -.8rem;
+    }
+
+    #sponsors a.column.is-half {
+        width: calc(50% + .4rem);
+    }
 
-    max-height: 5rem;
+    #sponsors a.column.is-half:first-child {
+        margin-left: -.8rem;
+        margin-right: .4rem;
+    }
+
+    #sponsors a.column.is-half:last-child {
+        margin-left: .4rem;
+        margin-right: -.8rem;
+    }
+
+    #sponsors a {
+        height: 5rem;
+        padding: .4rem;
+    }
+
+    #sponsors img {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        max-width: calc(100% - 0.8rem);
+    }
+
+}
+
+@media (max-width: 800px) {
+    #sponsors .columns {
+        margin-bottom: 1.5rem;
+    }
 }