Add styling for sponsors (#161)

* Add styling for sponsors

* Adjust the "work in progress" sponsors page

contents/css/_layout.css

@@ -63,6 +63,14 @@
   margin-top: 4rem;
 }
 
+
+.grid-item-sponsor {
+  grid-column: 2 / span 12;
+  @media (--small) {
+    grid-column: 3 / span 10;
+  }
+}
+
 @media (--small) {
   .grid-item-speaker {
     margin-top: 0;
@@ -76,7 +84,6 @@
   }
 }
 
-
 @media (--large) {
   .grid-item-speaker:nth-child(2n+2) {
     margin-top: 0;
@@ -227,10 +234,20 @@
     background-position: -13rem -2rem;
   }
 }
-.page-speakers{
+
+.page-speakers {
   @media (--xsmall) {
     background-image: url('contents:svg/form-speakers.svg');
     background-size: 100%;
     background-position: top center;
   }
 }
+
+.page-sponsors,
+.page-sponsors-list {
+  @media (--xsmall) {
+    background-image: url('contents:svg/form-sponsors.svg');
+    background-size: 100%;
+    background-position: top center;
+  }
+}

contents/css/_sponsor.css

@@ -0,0 +1,20 @@
+.sponsor {
+  align-items: center;
+  background-color: var(--clearwhite);
+  border-radius: 2px;
+  box-shadow: 0 0 10px 0 rgba(123, 136, 157, .15);
+  display: flex;
+}
+
+.sponsor a {
+  padding: 1.25rem;
+  width: 100%;
+}
+
+.sponsor-community a {
+  padding: .25rem;
+}
+
+.sponsor img {
+  display: block;
+}

contents/css/_sponsors.css

@@ -0,0 +1,40 @@
+.sponsors {
+  --sponsors-grid-count: 1;
+  --sponsors-grid-gap: 1.25rem;
+  --sponsors-margin-bottom: calc(var(--sponsors-grid-gap) * 2);
+
+  display: grid;
+  grid-template-columns: repeat(var(--sponsors-grid-count), 1fr);
+  grid-gap: var(--sponsors-grid-gap);
+  margin-bottom: var(--sponsors-margin-bottom);
+  margin-top: var(--sponsors-grid-gap);
+
+  @media (--xsmall) {
+    --sponsors-grid-count: 2;
+  }
+
+  @media (--small) {
+    --sponsors-grid-count: 3;
+    --sponsors-margin-bottom: calc(var(--sponsors-grid-gap) * 4);
+  }
+}
+
+.sponsors-supporting {
+  @media (--xsmall) {
+    --sponsors-grid-count: 3;
+  }
+
+  @media (--small) {
+    --sponsors-grid-count: 4;
+  }
+}
+
+.sponsors-community {
+  @media (--xsmall) {
+    --sponsors-grid-count: 4;
+  }
+
+  @media (--small) {
+    --sponsors-grid-count: 6;
+  }
+}

contents/css/main.css

@@ -9,4 +9,6 @@
 @import '_layout.css';
 @import '_topbar.css';
 @import '_speaker.css';
+@import '_sponsor.css';
+@import '_sponsors.css';
 @import '_utility-backgrounds.css';

contents/sponsors-work-in-progress.json

@@ -1,6 +1,6 @@
 {
-  "pageId": "sponsors-list",
-  "template": "pages/sponsors-list.html.njk",
+  "pageId": "sponsors",
+  "template": "pages/sponsors-work-in-progress.html.njk",
   "filename": ":file/index.html",
-  "title": "Sponsors"
+  "title": "Sponsors (WIP)"
 }

templates/pages/sponsors-work-in-progress.html.njk

@@ -0,0 +1,55 @@
+{% extends "../layouts/default.html.njk" %}
+
+{% block header %}
+  {% if page.metadata.title  %}
+    <section class="grid">
+      <div class="grid-item-sponsor">
+        <h1 class="tl">
+          {{ page.metadata.title }}
+        </h1>
+      </div>
+    </section>
+  {% endif %}
+{% endblock %}
+
+{% block content %}
+  {% set sponsorTypes = ['double down', 'main', 'supporting', 'community'] %}
+
+  {% for sponsorType in sponsorTypes %}
+    {% set sponsors = contents.sponsors._.pages |
+      filterObjects('metadata.sponsor.type', sponsorType) |
+      sortObjects('metadata.sponsor.order', 100, 'number') %}
+    {% set firstSponsor = sponsors | first %}
+    {% set sponsorsTitle = firstSponsor.metadata.sponsor.title %}
+    {% set sponsorsType = sponsorType | replace(' ', '-') %}
+
+    {% if sponsors.length > 0 %}
+      <section class="grid">
+        <div class="grid-item-sponsor">
+          <h2>{{ sponsorsTitle }}</h2>
+          <div class="sponsors sponsors-{{ sponsorsType }}">
+            {% for page in sponsors %}
+              {% set sponsor = page.metadata.sponsor %}
+
+              <div class="sponsor sponsor-{{ sponsorsType }}"
+                  id="{{ sponsor.id }}">
+                <a href="{{ sponsor.link }}"
+                  rel="nofollow"
+                  target="_blank">
+                  <img src="{{ contents.images.sponsor[sponsor.image.filename].url }}"
+                      alt="{{ sponsor.name }}">
+                </a>
+              </div>
+            {% endfor %}
+          </div>
+        </div>
+      </section>
+    {% endif %}
+  {% endfor %}
+
+  <section class="grid">
+    <div class="grid-item-center md-content">
+      {{ contents.copy.sponsors['sponsors.md'].html }}
+    </div>
+  </section>
+{% endblock %}

templates/pages/sponsors.html.njk

@@ -1,11 +1,56 @@
 {% extends "../layouts/default.html.njk" %}
 
+{% block header %}
+  {% if page.metadata.title  %}
+    <section class="grid">
+      <div class="grid-item-sponsor">
+        <h1 class="tl">
+          {{ page.metadata.title }}
+        </h1>
+      </div>
+    </section>
+  {% endif %}
+{% endblock %}
+
 {% block content %}
+  {% set sponsorTypes = ['double down', 'main', 'supporting', 'community'] %}
+
+  {% for sponsorType in sponsorTypes %}
+    {% set sponsors = contents.sponsors._.pages |
+      filterObjects('metadata.sponsor.type', sponsorType) |
+      filterObjects('metadata.sponsor.reviewed', true) |
+      sortObjects('metadata.sponsor.order', 100, 'number') %}
+    {% set firstSponsor = sponsors | first %}
+    {% set sponsorsTitle = firstSponsor.metadata.sponsor.title %}
+    {% set sponsorsType = sponsorType | replace(' ', '-') %}
+
+    {% if sponsors.length > 0 %}
+      <section class="grid">
+        <div class="grid-item-sponsor">
+          <h2>{{ sponsorsTitle }}</h2>
+          <div class="sponsors sponsors-{{ sponsorsType }}">
+            {% for page in sponsors %}
+              {% set sponsor = page.metadata.sponsor %}
+
+              <div class="sponsor sponsor-{{ sponsorsType }}"
+                  id="{{ sponsor.id }}">
+                <a href="{{ sponsor.link }}"
+                  rel="nofollow"
+                  target="_blank">
+                  <img src="{{ contents.images.sponsor[sponsor.image.filename].url }}"
+                      alt="{{ sponsor.name }}">
+                </a>
+              </div>
+            {% endfor %}
+          </div>
+        </div>
+      </section>
+    {% endif %}
+  {% endfor %}
 
   <section class="grid">
     <div class="grid-item-center md-content">
       {{ contents.copy.sponsors['sponsors.md'].html }}
     </div>
   </section>
-
 {% endblock %}