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

2 files changed, 63 insertions, 20 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%;
+    }
 }
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index 0e592f72..ed5623dd 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -187,29 +187,33 @@
         <h1 class="title is-6 has-text-grey">
           Sponsors
         </h1>
-        <div class="columns is-mobile is-multiline">
-          <a href="https://www.netcup.eu/" class="column is-narrow">
+        <div class="columns is-vcentered">
+          <a href="https://www.netcup.eu/" class="column is-one-third">
             <img src="{% static "images/sponsors/netcup.png" %}" alt="netcup" loading="lazy"/>
           </a>
-          <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085" class="column is-narrow">
+          <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085" class="column is-one-third">
             <img src="{% static "images/sponsors/linode.png" %}" alt="Linode" loading="lazy"/>
           </a>
-          <a href="https://jetbrains.com" class="column is-narrow">
+          <a href="https://jetbrains.com" class="column is-one-third">
             <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains" loading="lazy"/>
           </a>
-          <a href="https://sentry.io" class="column is-narrow">
+        </div>
+        <div class="columns is-vcentered">
+          <a href="https://sentry.io" class="column is-one-third">
             <img src="{% static "images/sponsors/sentry.png" %}" alt="Sentry" loading="lazy"/>
           </a>
-          <a href="https://notion.so" class="column is-narrow">
+          <a href="https://notion.so" class="column is-one-third">
             <img src="{% static "images/sponsors/notion.png" %}" alt="Notion" loading="lazy"/>
           </a>
-          <a href="https://streamyard.com" class="column is-narrow">
+          <a href="https://streamyard.com" class="column is-one-third">
             <img src="{% static "images/sponsors/streamyard.png" %}" alt="StreamYard" loading="lazy"/>
           </a>
-          <a href="https://www.netlify.com/" class="column is-narrow">
+        </div>
+        <div class="columns is-vcentered">
+          <a href="https://www.netlify.com/" class="column is-half">
             <img src="{% static "images/sponsors/netlify.png" %}" alt="Netlify" loading="lazy"/>
           </a>
-          <a href="https://www.cloudflare.com/" class="column is-narrow">
+          <a href="https://www.cloudflare.com/" class="column is-half">
             <img src="{% static "images/sponsors/cloudflare.png" %}" alt="Cloudflare" loading="lazy"/>
           </a>
         </div>