diff options
| author |  hedy <[email protected]> | 2024-01-06 22:25:47 +0800 |
|---|---|---|
| committer | hedy <[email protected]> | 2024-01-06 22:25:47 +0800 |
| commit | f7ac6bd6c11bc1168e3f8942bb2d7ba411a10d41 (patch) | |
| tree | c9abc0f4cfef9d4f4c76d3f6e889500ff2f0a265 /pydis_site/templates/home | |
| parent | Dark: Fix colors for bulma cards shadow & borders (diff) | |
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
Diffstat (limited to 'pydis_site/templates/home')
| -rw-r--r-- | pydis_site/templates/home/index.html | 22 |
1 files changed, 13 insertions, 9 deletions
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> |