Trophy graphics

Author: steph1111

_includes/comp-awards-card.html

@@ -0,0 +1,16 @@
+
+<div class="grid" id="comp-awards-card">
+    {% for award in page.awards %}
+        <div class="column">
+                <div class="card">
+                    <div class="award-graphic">
+                        <img src="{{page.graphic}}" alt="Award graphic">
+                    </div>
+                    <div class="card-content">
+                        <h2 class="name has-text-white-ter has-text-weight-bold is-size-6">{{ award.name }}</h2>
+                        <p class="roles has-text-weight-normal">{{ award.division }}</p>
+                    </div>
+                </div>
+        </div>
+    {% endfor %}
+</div>

_includes/comp-awards.html

@@ -0,0 +1,9 @@
+<section class="section has-text-centered has-background-black-bis" id="comp-awards">
+    <div class="container">
+        <h2 class="title has-text-left has-text-white-ter is-size-2 has-text-weight-bold mgb-medium">
+            MATE World Championship Awards
+        </h2>
+        <br>
+        {% include comp-awards-card.html %}
+    </div>
+</section>

_layouts/comp.html

@@ -11,7 +11,9 @@
     {% include navbar.html %}
     {% include comp-showcase.html %}
     {% include comp-description.html %}
-    {% include comp-awards.html %}
+    {% if page.awards %}
+        {% include comp-awards.html %}
+    {% endif %}
     {% include footer.html %}
 </body>
 </html>

_site/assets/css/style.css

@@ -1357,3 +1357,13 @@ body { background-color: var(--background); }
         max-width: 300px;
     }
 }
+
+#comp-awards-card{
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    justify-content: center;
+    .card {
+        display: flex;
+        flex-direction: column;
+    }
+}