Improve logo size configurability and fix mobile scale (#1121)

bevyengine · Mar 18, 2024 · 54181eb · 54181eb
1 parent d77b600
commit 54181eb
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 28 deletions.
diff --git a/.djlintrc b/.djlintrc
@@ -1,5 +1,5 @@
 {
 	"profile": "nunjucks",
-	"ignore": "H006,H021,H030,H031,H037",
+	"ignore": "H006,H021,H030,H031,H037,T028",
 	"indent": "2"
 }
diff --git a/content/donate/individual-sponsors.toml b/content/donate/individual-sponsors.toml
@@ -3,9 +3,9 @@ name = "Foresight Spatial Labs"
 image = "Foresight_Spatial_Labs.svg"
 link = "https://www.foresightmining.com"
 amount = 4000
-style = "height: 140px"
 source = "direct"
 recipient = "cart"
+logo_scale = 1.5
 
 [[sponsor]]
 name = "Embark Studios"
@@ -20,18 +20,18 @@ name = "Encultured.ai"
 image = "Encultured.png"
 link = "https://www.encultured.ai/"
 amount = 1000
-style = "max-height: 60px"
 source = "github"
 recipient ="cart"
+logo_scale = 0.7
 
 [[sponsor]]
 name = "Roids"
 image = "roids_logo.png"
 link = "https://playroids.com"
 amount = 300
-style = "max-height: 130px"
 source = "github"
 recipient ="cart"
+square_logo = true
 
 [[sponsor]]
 name = "Agile Perception"

diff --git a/content/donate/tiers.toml b/content/donate/tiers.toml
@@ -47,6 +47,7 @@ icon = "/assets/sponsor_badges/diamond.svg"
 donate_link = "https://buy.stripe.com/6oEaI49BX16T9wY4gl"
 reward_logo = true
 reward_link = true
+logo_height = 45
 
 [[tier]]
 name = "Corporate Bronze"
@@ -56,6 +57,7 @@ icon = "/assets/sponsor_badges/bronze.svg"
 donate_link = "https://buy.stripe.com/bIY7vSeWhaHt7oQ7sy"
 reward_logo = true
 reward_link = true
+logo_height = 70
 
 [[tier]]
 name = "Corporate Silver"
@@ -65,6 +67,7 @@ icon = "/assets/sponsor_badges/silver.svg"
 donate_link = "https://buy.stripe.com/14kcQceWh8zleRi4gn"
 reward_logo = true
 reward_link = true
+logo_height = 85
 
 [[tier]]
 name = "Corporate Gold"
@@ -74,6 +77,7 @@ icon = "/assets/sponsor_badges/gold.svg"
 donate_link = "https://buy.stripe.com/fZecQcdSd6rd4cEfZ6"
 reward_logo = true
 reward_link = true
+logo_height = 90
 
 [[tier]]
 name = "Corporate Platinum"
@@ -83,6 +87,7 @@ icon = "/assets/sponsor_badges/platinum.svg"
 donate_link = "https://buy.stripe.com/fZe03q29vdTFgZq6ox"
 reward_logo = true
 reward_link = true
+logo_height = 95
 
 [[tier]]
 name = "Corporate Titanium"
@@ -92,6 +97,7 @@ icon = "/assets/sponsor_badges/titanium.svg"
 donate_link = "https://buy.stripe.com/bIY03qaG1eXJ8sU8wG"
 reward_logo = true
 reward_link = true
+logo_height = 100
 
 [[tier]]
 name = "Corporate Diamond"
@@ -101,6 +107,7 @@ icon = "/assets/sponsor_badges/diamond.svg"
 donate_link = "https://buy.stripe.com/00gdUg4hD6rddNe7sD"
 reward_logo = true
 reward_link = true
+logo_height = 120
 
 [[tier]]
 name = "Patron"
@@ -110,3 +117,4 @@ icon = "/assets/sponsor_badges/patron.svg"
 donate_link = "mailto:[email protected]"
 reward_logo = true
 reward_link = true
+logo_height = 190
diff --git a/sass/components/_sponsors.scss b/sass/components/_sponsors.scss
@@ -63,32 +63,13 @@
 
     &__logo {
         object-fit: contain;
+        width: 100%;
         transition: transform .2s; /* Animation */
     }
 
     &__logo:hover {
         transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
       }
-
-    $tiers: (
-        ('tier': 'patron', 'height': 190px),
-        ('tier': 'corporate_diamond', 'height': 120px),
-        ('tier': 'corporate_platinum', 'height': 100px),
-        ('tier': 'corporate_gold', 'height': 90px),
-        ('tier': 'corporate_silver', 'height': 85px),
-        ('tier': 'corporate_bronze', 'height': 70px),
-        ('tier': 'diamond', 'height': 45px),
-    );
-
-@each $tier in $tiers {
-    &--#{map-get($tier, 'tier')} {
-        .sponsors {
-            &__logo {
-                height: map-get($tier, 'height');
-            }
-        }
-    }
-  }
 }
 
 .sponsors-section {

diff --git a/templates/individual-sponsors.html b/templates/individual-sponsors.html
@@ -45,9 +45,23 @@ <h3 class="sponsors__amount">${{ tier.amount }} / month</h3>
     <div class="sponsors__content">
         {% for sponsor in sponsors_in_tier %}
         {% if tier.reward_logo %}
+            {% set_global logo_height = tier.logo_height %}
+            {% if sponsor.square_logo %}
+                {% set_global logo_height = logo_height * 1.666 %}
+            {% endif %}
+            {% if sponsor.logo_scale %}
+                {% set_global logo_height = logo_height * sponsor.logo_scale %}
+            {% endif %}
         <a class="sponsors__link" href="{{ sponsor.link }}">
-            <img class="sponsors__logo" {% if sponsor.style %}style="{{ sponsor.style }}"{% endif %} src="/assets/sponsors/{{ sponsor.image }}"
-                alt="{{ sponsor.name }} logo" />
+            <img
+                class="sponsors__logo"
+                height="{{ logo_height }}"
+                {% if sponsor.style %}
+                style="{{ sponsor.style }}"
+                {% endif %}
+                src="/assets/sponsors/{{ sponsor.image }}"
+                alt="{{ sponsor.name }} logo"
+            />
         </a>
         {% elif tier.reward_link %}
         <a class="sponsors__name sponsors__link" href="{{ sponsor.link }}">

diff --git a/templates/sponsors.html b/templates/sponsors.html
@@ -56,9 +56,25 @@ <h3 class="sponsors__amount">${{ tier.amount }} / month</h3>
     <div class="sponsors__content">
         {% for donor in donors_in_tier %}
         {% if tier.reward_logo and donor.logo %}
+            {% set_global logo_height = tier.logo_height %}
+            {% if donor.square_logo %}
+                {% set_global logo_height = logo_height * 1.666 %}
+            {% endif %}
+            {% if donor.logo_scale %}
+                {% set_global logo_height = logo_height * donor.logo_scale %}
+            {% endif %}
         <a class="sponsors__link" {% if donor.link %}href="{{ donor.link }}"{% endif %}>
-            <img class="sponsors__logo" {% if donor.style %}style="{{ donor.style }}"{% endif %} src="/assets/donor_logos/{{ donor.logo }}"
-                {% if donor.name %} alt="{{ donor.name }} logo"{% endif %} />
+            <img
+                class="sponsors__logo"
+                height="{{ logo_height }}"
+                {% if donor.style %}
+                style="{{ donor.style }}"
+                {% endif %}
+                src="/assets/donor_logos/{{ donor.logo }}"
+                {% if donor.name %}
+                alt="{{ donor.name }} logo"
+                {% endif %}
+            />
         </a>
         {% elif tier.reward_link and donor.name %}
         <a class="sponsors__name sponsors__link" {% if donor.link %}href="{{ donor.link }}"{% endif %}>