Dark: Fix backgrounds on sponsors section on homepage

See https://discord.com/channels/267624335836053506/635950537262759947/1193170173574774855

Idea from go.dev -- add background to each sponsor logo and put them in
a grid.

Also set the sponsor section background color to match that of footer's.

Issue pointed out by @ChrisLovering on discord.

This is an initial draft. As of now this works from my own testing:

- Consistent & uniform spacing (gaps)
- Supports mobile
- No affect to light theme other than the arrangement
- Logos do not get squashed, ever

1 files changed, 50 insertions, 11 deletions

diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index 64356a36..552961e7 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -241,21 +241,60 @@ h1 {
     text-align: center;
 }
 
-#sponsors .columns {
-    display: block;
-    justify-content: center;
-    margin: auto;
-    max-width: 80%;
+[data-theme="dark"] #sponsors {
+    background-color: #2C2F33 !important;
+}
+
+#sponsors .container {
+    max-width: 70%;
 }
 
 #sponsors a {
-    margin: auto;
-    display: inline-block;
+    border-radius: .2rem;
+    margin-bottom: .8rem;
+}
+
+[data-theme="dark"] #sponsors a {
+    background-color: #EDEDED;
+}
+
+@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);
+    }
+
+    #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 img {
+        height: 4rem;
+    }
 }
 
-#sponsors img {
-    width: auto;
-    height: auto;
+@media (max-width: 800px) {
+    #sponsors .columns {
+        margin-bottom: 1.5rem;
+    }
 
-    max-height: 5rem;
+    #sponsors img {
+        max-height: 4rem;
+        max-width: 50%;
+    }
 }