Merge pull request #333 from stride3d/master

Deploy latest website updates to production

Author: VaclavElias

_data/bronze_sponsors.js

@@ -0,0 +1,10 @@
+import eleventyFetch from "@11ty/eleventy-fetch";
+
+export default async function fetchSponsors(params) {
+	const json = await eleventyFetch("https://opencollective.com/stride3d/tiers/bronze-strider/all.json", {
+			duration: "7d",
+			type: "json"
+		});
+		
+	return json;
+}

_data/gold_sponsors.js

@@ -0,0 +1,10 @@
+import eleventyFetch from "@11ty/eleventy-fetch";
+
+export default async function fetchSponsors(params) {
+	const json = await eleventyFetch("https://opencollective.com/stride3d/tiers/gold-strider/all.json", {
+			duration: "7d",
+			type: "json"
+		});
+		
+	return json;
+}

_data/silver_sponsors.js

@@ -0,0 +1,10 @@
+import eleventyFetch from "@11ty/eleventy-fetch";
+
+export default async function fetchSponsors(params) {
+	const json = await eleventyFetch("https://opencollective.com/stride3d/tiers/silver-strider/all.json", {
+			duration: "7d",
+			type: "json"
+		});
+		
+	return json;
+}

_includes/oc_sponsors.njk

@@ -0,0 +1,49 @@
+<div class="card mt-5">
+    <div class="oc-sponsors-container">
+        <div class="tier-container">
+            <div class="tier-item gold">GOLD STRIDERS</div>
+            <div class="tier-item"> 
+                {% for sponsor in gold_sponsors %}
+                    <div class="img-container">
+                        {% if sponsor.image %}
+                            <img src={{sponsor.image}} alt={{sponsor.name}} class="gold"/>
+                        {% else %}
+                            <img src="/images/svg/logo.svg" alt={{sponsor.name}} class="gold"/>
+                        {%endif%}
+                        <div>{{sponsor.name}}</div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+        <div class="tier-container">
+            <div class="tier-item silver">SILVER STRIDERS</div>
+            <div class="tier-item"> 
+                {% for sponsor in silver_sponsors %}
+                    <div class="img-container">
+                        {% if sponsor.image %}
+                            <img src={{sponsor.image}} alt={{sponsor.name}} class="silver"/>
+                        {% else %}
+                            <img src="/images/svg/logo.svg" alt={{sponsor.name}} class="silver"/>
+                        {%endif%}
+                        <div>{{sponsor.name}}</div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+        <div class="tier-container">
+            <div class="tier-item bronze">BRONZE STRIDERS</div>
+            <div class="tier-item"> 
+                {% for sponsor in bronze_sponsors %}
+                    <div class="img-container">
+                        {% if sponsor.image %}
+                        <img src={{sponsor.image}} alt={{sponsor.name}} class="bronze"/>
+                        {% else %}
+                            <img src="/images/svg/logo.svg" alt={{sponsor.name}} class="bronze"/>
+                        {%endif%}
+                        <div>{{sponsor.name}}</div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</div>

css/styles.scss

@@ -1,5 +1,6 @@
 @import "custom-bootstrap";
 @import "/css/all.min.css";
+@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 :root {
     --main-shadow: 2px 2px 8px #0000001a;
@@ -288,4 +289,75 @@ svg path.logo-path {
     background-size: 50px 50px;
 }
 
+.oc-sponsors-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .tier-container {
+        display: flex;
+        flex-direction: column;
+        
+        @media screen and (min-width: 1280px) {
+            flex-direction: row;
+        }
+
+        .tier-item {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            gap: 20px;
+            align-items: center;
+            justify-content: center;
+            font-family: "Kanit", serif;
+            font-weight: 900;
+            font-size: 46px;
+            letter-spacing: -2px;
+            padding: 40px 12px;
+            flex-wrap: wrap;
+        }
+
+        .tier-item.gold {             
+            background-color: rgb(221, 205, 62);
+        }
+
+        .tier-item.silver {
+            background-color: silver;
+        }
+        
+        .tier-item.bronze {
+            background-color: rgb(216, 156, 78);
+        }
+
+        .img-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 2px;
+            font-family: "Segoe UI";
+            font-weight: 400;
+            font-size: 12px;
+            letter-spacing: normal;
+            img {
+                width: 80px;
+                height: 80px;
+                border-radius: 50px;
+                font-size: 14px;
+                box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
+            }
+
+            img.gold {
+                border: solid 3px rgb(221, 205, 62);
+            }
+            img.silver {
+                border: solid 3px silver;
+            }
+            img.bronze {
+                border: solid 3px rgb(216, 156, 78);
+            }
+        }
+    }
+}
+
 @import "syntax-highlighting";