Merge pull request #78 from trifectatechfoundation/update-sponsor-section

Update sponsor section

Author: erikjee

content/_index.md

@@ -4,6 +4,10 @@ template = "index.html"
 
 [extra]
 
+goldSponsors = [
+    "canonical"
+]
+
 silverSponsors = [
     "aws",
     "google"

content/support.md

@@ -6,6 +6,10 @@ template = "support.html"
 
 [extra]
 
+goldSponsors = [
+    "canonical"
+]
+
 silverSponsors = [
     "aws",
     "google"

sass/components/partners.scss

@@ -40,16 +40,28 @@
   gap: 0.5rem;
   grid-template-columns: repeat(3, 1fr);
 
+  &.current-funders {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+  &.current-funders.gold {
+    grid-template-columns: repeat(1, 1fr);  
+  }
+
   @media (min-width: 62rem) {
     grid-template-columns: repeat(6, 1fr);
-
+    
     &.current-funders {
       grid-template-columns: repeat(3, 1fr);
     }
+
+    &.current-funders.gold {
+      grid-template-columns: repeat(2, 1fr);  
+    }
   }
 }
 
-.funder {
+.funders .funder {
   align-items: center;
   justify-content: start;
   background-color: rgba(255,255,255,0.25);
@@ -73,10 +85,10 @@
 
   .image {
     min-height: 3.5rem;
+    width: 5rem;
     background-size: contain;
     background-position: center center;
     background-repeat: no-repeat;
-    width: 5rem;
     pointer-events: none;
 
     @media (min-width: 62rem) {
@@ -117,8 +129,7 @@
     }
 
     &.aws {
-      background-image: url('/funders/aws.svg');
-      width: 3.5rem;  
+      background-image: url('/funders/aws.png');
     }
 
     &.google {
@@ -178,6 +189,35 @@
   }
 }
 
+.funders {
+  &.current-funders {
+    
+    .funder {             
+      .image {
+        min-height: 4.5rem;
+        width: 5rem;
+      }
+
+      @media (min-width: 62rem) {
+        .image {
+          min-height: 5rem;
+          width: 8rem;
+        }
+      }
+    }
+  }
+
+  &.current-funders.gold {
+    .funder {        
+        .image {
+          min-height: 6rem;
+          width: 12rem;
+        }
+    }
+  }
+}
+
+
 .funder dialog {
   align-items: center;
   display: flex;

static/funders/aws.png

@@ -29,7 +29,8 @@ <h2>What we do</h2>
     </div>
 </div>
 
-{{ macros::sponsors(silverSponsors=page.extra.silverSponsors) }}
+<!-- {{ macros::sponsors(goldSponsors=page.extra.goldSponsors, silverSponsors=page.extra.silverSponsors) }} -->
+{{ macros::sponsors(goldSponsors=[], silverSponsors=page.extra.silverSponsors) }}
 {{ macros::page_funders(currentFunders=page.extra.funders, supporters=page.extra.supporters) }}
 
 {% include "components/initiative_listing.html" %}

templates/index.html

@@ -82,10 +82,24 @@ <h3>{{funder.name}}</h3>
 {% endmacro funder_tile %}
 
 
-{% macro sponsors(silverSponsors) %}
+{% macro sponsors(goldSponsors, silverSponsors) %}
 
 {% set funders = load_data(path = "data/funders.json") %}
 <div class="partners sponsors">
+    {% if goldSponsors %}
+    <div class="partners-title current-funders">
+        <h3>Gold sponsors</h3>
+    </div>
+    <div class="funders current-funders gold">
+        {% for name in goldSponsors %}
+            {% for funder in funders %}
+                {% if funder.image == name %}
+                    {{ macros::funder_tile(funder=funder) }}
+                {% endif %}
+            {% endfor %}
+        {% endfor %}
+    </div>
+    {% endif %}
     {% if silverSponsors %}
     <div class="partners-title current-funders">
         <h3>Silver sponsors</h3>

templates/macros.html

@@ -10,6 +10,7 @@ <h1><span>Support us</span></h1>
         {{ page.content | safe }}
     </div>
 </div>
-{{ macros::sponsors(silverSponsors=page.extra.silverSponsors) }}
+<!-- {{ macros::sponsors(goldSponsors=page.extra.goldSponsors, silverSponsors=page.extra.silverSponsors) }} -->
+{{ macros::sponsors(goldSponsors=[], silverSponsors=page.extra.silverSponsors) }}
 {{ macros::page_funders(currentFunders=page.extra.funders, supporters=page.extra.supporters) }}
 {% endblock content %}