Add bronze sponsors, move Gold sponsors to the static bar

Author: anatoliykmetyuk

_data/scala-days-sponsors.yml

@@ -5,8 +5,16 @@
 sponsorship-types:
   - title: Platinum
     icon: img/assets/icon-platinum.svg
+    css-class: scaladays-org-logo-platinum
   - title: Gold
     icon: img/assets/icon-gold.svg
+    css-class: scaladays-org-logo-gold
+  - title: Silver
+    icon: img/assets/icon-silver.svg
+    css-class: scaladays-org-logo-silver
+  - title: Bronze
+    icon: img/assets/icon-bronze.svg
+    css-class: scaladays-org-logo-bronze
 
 sponsors:
   - title: VirtusLab
@@ -42,4 +50,59 @@ sponsors:
   - title: Writer
     type: Gold
     logo: /resources/img/scala-days-sponsors/writer.svg
-    url: https://writer.com
+    url: https://writer.com
+
+  - title: Kpler
+    type: Silver
+    logo: /resources/img/scala-days-sponsors/kpler.png
+    url: https://www.kpler.com/
+
+  - title: Scala Teams
+    type: Bronze
+    logo: /resources/img/scala-days-sponsors/scalateams.png
+    url: https://scalateams.com/
+
+  - title: Mastercard
+    type: Bronze
+    logo: /resources/img/scala-days-sponsors/mc_symbol.svg
+    url: https://www.mastercard.com/
+
+  - title: MOIA
+    type: Bronze
+    logo: /resources/img/scala-days-sponsors/MOIA-logo-black.png
+    url: https://www.moia.io/en
+
+  - title: Les Toises
+    type: Bronze
+    logo: /resources/img/scala-days-sponsors/les-toises.png
+    url: https://www.lestoises.ch/
+
+  - title: Rock the JVM
+    type: Bronze
+    logo: /resources/img/scala-days-sponsors/rock-the-jvm.png
+    url: https://rockthejvm.com/
+
+  - title: Ngrok
+    type: Bronze
+    logo: /resources/img/scala-days-sponsors/ngrok-coral.svg
+    url: https://ngrok.com/
+
+  - title: Youmoni
+    type: Bronze
+    logo: /resources/img/scala-days-sponsors/youmoni.svg
+    url: https://youmoni.com/
+
+  - title: DFiant
+    type: Bronze
+    logo: /resources/img/scala-days-sponsors/DFiant-LightBG.png
+    url: https://dfiant.works/
+
+  - title: Snowplow Analytics Ltd
+    type: Bronze
+    logo: /resources/img/scala-days-sponsors/snowplow-logo.svg
+    url: https://snowplow.io/
+
+  - title: SoftwareMill
+    type: Bronze
+    logo: /resources/img/scala-days-sponsors/softwaremill-logo.png
+    url: https://softwaremill.com/

_includes/scala-days-sponsors.html

@@ -4,23 +4,41 @@
     Scala Days 2025 is brought to you by:
   </div>
 
-  <!-- Static Platinum Sponsors Row -->
+  <!-- Static Platinum and Gold Sponsors Row -->
   <div class="sponsors-static-row">
-    {% for sponsor in site.data.scala-days-sponsors.sponsors %}
-      {% if sponsor.type == 'Platinum' %}
-        <a href="{{ sponsor.url }}" class="sponsor-logo-link-platinum" target="_blank" rel="noopener">
-          <img src="{{ sponsor.logo }}" alt="{{ sponsor.title }}" class="sponsor-logo-platinum" />
-        </a>
-      {% endif %}
-    {% endfor %}
+    <!-- Platinum Sponsors (Left Side) -->
+    <div class="platinum-sponsors">
+      {% for sponsor in site.data.scala-days-sponsors.sponsors %}
+        {% assign sponsor_type = site.data.scala-days-sponsors.sponsorship-types | where: "title", sponsor.type | first %}
+        {% if sponsor.type == 'Platinum' %}
+          <a href="{{ sponsor.url }}" class="sponsor-logo-link-platinum" target="_blank" rel="noopener">
+            <img src="{{ sponsor.logo }}" alt="{{ sponsor.title }}" class="sponsor-logo-static-row {{ sponsor_type.css-class }}" />
+          </a>
+        {% endif %}
+      {% endfor %}
+    </div>
+
+    <!-- Gold Sponsors (Right Side, Flex Layout) -->
+    <div class="gold-sponsors-flex">
+      {% for sponsor in site.data.scala-days-sponsors.sponsors %}
+        {% assign sponsor_type = site.data.scala-days-sponsors.sponsorship-types | where: "title", sponsor.type | first %}
+        {% if sponsor.type == 'Gold' %}
+          <a href="{{ sponsor.url }}" class="sponsor-logo-link-gold" target="_blank" rel="noopener">
+            <img src="{{ sponsor.logo }}" alt="{{ sponsor.title }}" class="sponsor-logo-gold-row {{ sponsor_type.css-class }}" />
+          </a>
+        {% endif %}
+      {% endfor %}
+    </div>
   </div>
+
   <!-- Scrolling Track for Non-Platinum Sponsors -->
   <div class="sponsors-carousel">
     <div class="sponsors-track" id="sponsors-track">
       {% for i in (1..10) %}
       {% for sponsor in site.data.scala-days-sponsors.sponsors %}
+        {% assign sponsor_type = site.data.scala-days-sponsors.sponsorship-types | where: "title", sponsor.type | first %}
         {% unless sponsor.type == 'Platinum' %}
-          <a href="{{ sponsor.url }}" class="sponsor-logo-link" target="_blank" rel="noopener">
+          <a href="{{ sponsor.url }}" class="sponsor-logo-link {{ sponsor_type.css-class }}-carousel" target="_blank" rel="noopener">
             <img src="{{ sponsor.logo }}" alt="{{ sponsor.title }}" class="sponsor-logo" />
           </a>
         {% endunless %}

_sass/components/scala-days-sponsors.scss

@@ -15,6 +15,11 @@
   overflow: hidden;
   position: relative;
   white-space: nowrap;
+  margin-top: 2em;
+
+  &.scaladays-org-logo-platinum {
+
+  }
 }
 
 .sponsors-track {
@@ -55,22 +60,78 @@
 .sponsors-static-row {
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
-  width: max-content;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
-  gap: 3em;
+  gap: 2em;
   margin-bottom: 1em;
+  padding: 0 1em;
+}
+
+.platinum-sponsors {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 2em;
+  flex-shrink: 0;
+  height: 80px;
+}
+
+.gold-sponsors {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 1.5em;
+  align-items: center;
+  justify-items: center;
+  flex-grow: 1;
+  max-width: 600px;
 }
 
 .sponsor-logo-link-platinum {
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 80px;
 }
 
-.sponsor-logo-platinum {
+.sponsor-logo-static-row {
   max-height: 80px !important;
+  height: 80px;
+  width: auto;
+  filter: brightness(0) invert(1);
+  opacity: 0.92;
+  transition: opacity 0.2s;
+}
+
+.gold-sponsors-flex {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 1em 2em;
+  height: 80px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.sponsor-logo-link-gold {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  flex: 0 1 calc(33.333% - 2em);
+  max-width: 160px;
+  width: 100%;
+}
+
+.sponsor-logo-gold-row {
+  max-height: 40px !important;
+  height: 40px;
+  width: auto;
   filter: brightness(0) invert(1);
   opacity: 0.92;
   transition: opacity 0.2s;
@@ -90,6 +151,18 @@
 }
 
 @media (max-width: 700px) {
+  .sponsors-static-row {
+    flex-direction: column;
+    gap: 1em;
+  }
+  .platinum-sponsors {
+    justify-content: center;
+    gap: 1.5em;
+    height: auto;
+  }
+  .gold-sponsors-flex {
+    display: none;
+  }
   .sponsor-logo-link {
     width: 80px;
     height: 28px;
@@ -100,3 +173,29 @@
     max-width: 60px;
   }
 }
+
+@media (max-width: 1000px) and (min-width: 701px) {
+  .gold-sponsors {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    gap: 1em;
+  }
+
+  .scaladays-org-logo-gold-carousel {
+    display: none;
+  }
+}
+
+@media (max-width: 900px) and (min-width: 701px) {
+  .sponsors-static-row {
+    gap: 1.5em;
+  }
+
+  .platinum-sponsors {
+    gap: 1.5em;
+  }
+
+  .gold-sponsors {
+    gap: 0.8em;
+  }
+}