docs: tweak sponsors

docs/.vitepress/theme/index.js

@@ -9,7 +9,7 @@ export default {
  Layout() {
  return h(Theme.Layout, null, {
  'sidebar-bottom': () =>
- h('div', { class: 'sponsors' }, [
+ h('div', { class: 'sponsors sidebar' }, [
  h(
  'a',
  {

docs/.vitepress/theme/sponsors.css

@@ -5,18 +5,13 @@
 
 .sponsors a {
  color: #999;
-}
-
-.sponsors img {
- max-width: 180px;
- height: 40px;
+ margin: 1em;
  display: block;
- margin-top: 1em;
 }
 
-.sponsors a.platinum img {
- max-width: 240px;
- height: 60px;
+.sponsors img {
+ max-width: 160px;
+ max-height: 40px;
 }
 
 .sponsors.frontpage {
@@ -26,7 +21,6 @@
 .sponsors.frontpage img {
  display: inline-block;
  vertical-align: middle;
- margin: 0 1rem 1.25rem 1rem;
 }
 
 .sponsors.frontpage h2 {
@@ -35,7 +29,28 @@
  border: none;
 }
 
+.sponsors.sidebar a img {
+ max-height: 36px;
+}
+
+.platinum-sponsors {
+ margin-bottom: 1.5em;
+}
+
+.platinum-sponsors a img {
+ max-width: 240px;
+ max-height: 60px;
+}
+
+.gold-sponsors {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ align-items: center;
+}
+
 /* special cases */
 #sponsor-mux {
  padding: 5px 0;
+ min-height: 36px;
 }

docs/.vitepress/theme/sponsors.json

@@ -29,5 +29,11 @@
  "name": "Plaid Inc.",
  "href": "https://plaid.co.jp/",
  "src": "/plaid.svg"
+ },
+ {
+ "id": "divriots",
+ "name": "divriots",
+ "href": "https://divriots.com/",
+ "src": "/divriots.png"
  }
 ]

docs/index.md

@@ -25,14 +25,16 @@ footer: MIT Licensed | Copyright © 2019-present Evan You & Vite Contributors
 
 <div class="frontpage sponsors">
  <h2>Sponsors</h2>
- <a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier === 'platinum')" class="platinum" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
- <img :src="src" :alt="name" :id="`sponsor-${id}`">
- </a>
- <br>
- <a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier !== 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
- <img :src="src" :alt="name" :id="`sponsor-${id}`">
- </a>
- <br>
+ <div class="platinum-sponsors">
+ <a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier === 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
+  <img :src="src" :alt="name" :id="`sponsor-${id}`">
+ </a>
+ </div>
+ <div class="gold-sponsors">
+ <a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier !== 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
+  <img :src="src" :alt="name" :id="`sponsor-${id}`">
+ </a>
+ </div>
  <a href="https:/sponsors/yyx990803" target="_blank" rel="noopener">Become a sponsor on GitHub</a>
 </div>