Add separate visual category for Gold Sponsors (#857)

Previously, Gold and Corporate Sponsors were mixed into the same group for logo placement on the homepage. We noticed that this is not an accurate representation considering the the importance of our major sponsors. So this introduces a separate category for Gold Sponsors, with a logo size between the Silver and Corporate sponsors. In the process, we're adjusting the existing sizes a bit to make it fit.
crystal-lang · Oct 11, 2024 · 83121bf · 83121bf
1 parent a505fba
commit 83121bf
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 15 deletions.
diff --git a/_data/sponsor_logos_corporate.csv b/_data/sponsor_logos_corporate.csv
@@ -0,0 +1,3 @@
+logo,name,url,last_payment,all_time,since,level
+sponsors/84.png,84codes,https://www.84codes.com/,"€22,000","€523,000","Apr 1, 2018",5000
+manas-orange.svg,Manas.Tech,https://manas.tech/,"$5,000","$1,335,000","Jun 19, 2009",5000
diff --git a/_data/sponsor_logos_l.csv → _data/sponsor_logos_gold.csv b/_data/sponsor_logos_l.csv → _data/sponsor_logos_gold.csv
@@ -1,5 +1,3 @@
 logo,name,url,last_payment,all_time,since,level
-sponsors/84.png,84codes,https://www.84codes.com/,"€22,000","€523,000","Apr 1, 2018",5000
-manas-orange.svg,Manas.Tech,https://manas.tech/,"$5,000","$1,335,000","Jun 19, 2009",5000
 sponsors/buy_google_reviews.jpg,Buy Google Reviews,https://buyreviewz.com/buy-google-reviews,$750,"$2,250","Aug 7, 2024",750
 sponsors/buy_instagram_followers_thunderclapit.png,Buy Instagram Followers Thunderclapit,https://thunderclap.it/buy-instagram-followers,$750,"$1,500","Aug 7, 2024",750
diff --git a/_data/sponsor_logos_s.csv → _data/sponsor_logos_silver.csv b/_data/sponsor_logos_s.csv → _data/sponsor_logos_silver.csv
diff --git a/_includes/components/top-sponsors-icons.html b/_includes/components/top-sponsors-icons.html
@@ -1,13 +1,20 @@
-<div class="top-sponsors top-sponsors--l">
-  {%- for sponsor in site.data.sponsor_logos_l %}
+<div class="top-sponsors top-sponsors--corporate">
+  {%- for sponsor in site.data.sponsor_logos_corporate %}
     <a href="{{ sponsor.url }}" rel="nofollow sponsored">
       <img src="/assets/{{ sponsor.logo }}" alt="">
       {{- sponsor.name }}
     </a>
   {%- endfor %}
 </div>
-<div class="top-sponsors top-sponsors--s">
-  {%- for sponsor in site.data.sponsor_logos_s %}
+<div class="top-sponsors top-sponsors--gold">
+  {%- for sponsor in site.data.sponsor_logos_gold %}
+    <a href="{{ sponsor.url }}" rel="nofollow sponsored" title="{{- sponsor.name }}">
+      <img src="/assets/{{ sponsor.logo }}" alt="{{- sponsor.name }}">
+    </a>
+  {%- endfor %}
+</div>
+<div class="top-sponsors top-sponsors--silver">
+  {%- for sponsor in site.data.sponsor_logos_silver %}
     <a href="{{ sponsor.url }}" rel="nofollow sponsored" title="{{- sponsor.name }}">
       <img src="/assets/{{ sponsor.logo }}" alt="{{- sponsor.name }}">
     </a>

diff --git a/_includes/pages/sponsors/sponsor-cards.html b/_includes/pages/sponsors/sponsor-cards.html
@@ -1,5 +1,5 @@
 <ul class="cards-list">
-  {%- for sp in site.data.sponsor_logos_l %}
+  {%- for sp in site.data.sponsor_logos_corporate %}
     <li class="sponsor-card">
       <a href="{{ sp.url }}" class="name" rel="sponsored nofollow">{{ sp.name }}</a>
       <img src="/assets/{{ sp.logo }}" alt="Logo of {{sp.name}}">

diff --git a/_pages/sponsors.md b/_pages/sponsors.md
@@ -27,7 +27,7 @@ and below is a list of all the humans and organizations that have made it possib
 <hr />
 
 <section class="side-section reversed">
-  <h2>Individual Support</h2>
+  <h2>Supporters</h2>
 
    {%- include pages/sponsors/table.html %}
 

diff --git a/_pages/used_in_prod.md b/_pages/used_in_prod.md
@@ -50,7 +50,14 @@ sections:
       Organizations that provide software engineering services
 ---
 
-{% include components/top-sponsors-icons.html %}
+<div class="top-sponsors top-sponsors--corporate">
+  {%- for sponsor in site.data.sponsor_logos_corporate %}
+    <a href="{{ sponsor.url }}" rel="nofollow sponsored">
+      <img src="/assets/{{ sponsor.logo }}" alt="">
+      {{- sponsor.name }}
+    </a>
+  {%- endfor %}
+</div>
 
 <hr />
 

diff --git a/_sass/components/_top-sponsors.scss b/_sass/components/_top-sponsors.scss
@@ -1,13 +1,13 @@
 .top-sponsors {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--padding-md);
+  gap: var(--padding-sm);
   justify-content: center;
   margin-top: var(--block-flow-md);
 
   @extend .ui-link;
 
-  --top-sponsors-icon-width: 11ch;
+  --top-sponsors-icon-width: 12ch;
   --top-sponsors-icon-filter: #{"grayscale()"};
 
   --link-color: var(--primary-text);
@@ -17,8 +17,20 @@
     --top-sponsors-icon-filter: #{"invert() contrast(0.78) grayscale()"};
   }
 
-  &--s {
-    --top-sponsors-icon-width: 7ch;
+  &--corporate {
+    gap: var(--padding-md);
+  }
+
+  &--gold {
+    --top-sponsors-icon-width: 10ch;
+    --top-sponsors-icon-filter: #{"grayscale()"};
+    --link-color: var(--lighter-text);
+    font-size: font-size(xsmall);
+  }
+
+  &--silver {
+    --top-sponsors-icon-width: 6ch;
+    --top-sponsors-icon-filter: #{"grayscale()"};
     --link-color: var(--lighter-text);
     font-size: font-size(xsmall);
   }

diff --git a/scripts/merge.cr b/scripts/merge.cr
@@ -70,9 +70,10 @@ end
 all_sponsors.sort_by! { |s| {-s.last_payment, -s.all_time, s.since, s.name} }
 
 write_csv("sponsors.csv", all_sponsors.select(&.listed?))
-write_csv("sponsor_logos_l.csv", all_sponsors.select { |sponsor| sponsor.last_payment.to_i >= 750 })
+write_csv("sponsor_logos_corporate.csv", all_sponsors.select { |sponsor| sponsor.last_payment.to_i >= 2000 })
+write_csv("sponsor_logos_gold.csv", all_sponsors.select { |sponsor| sponsor.last_payment.to_i.in?(750...2000) })
 # NOTE: It should be 350, but we kept 250 to include PlaceOS
-write_csv("sponsor_logos_s.csv", all_sponsors.select { |sponsor| sponsor.last_payment.to_i.in?(250...750) })
+write_csv("sponsor_logos_silver.csv", all_sponsors.select { |sponsor| sponsor.last_payment.to_i.in?(250...750) })
 
 def write_csv(filename, sponsors)
   open_csv(filename) do |csv|