feat: move games into their own section

src/_includes/layouts/game.html

@@ -0,0 +1,40 @@
+---
+layout: "layouts/base"
+---
+
+{% from "macros/date.njk" import format %}
+{% from "macros/utils.njk" import stars %}
+<header class="media-meta-grid gap-1">
+    <div class="media-image">
+        <img src="{{ image }}" alt="" />
+    </div>
+    <div class="flow flex-col justify-center">
+        <div class="flex items-center gap-0.5 flex-wrap">
+            <h2>{{ title }}</h2>
+            <span class="pill">{{ platform }}</span>
+        </div>
+        {% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
+        {{ format(page.date) }}
+        {% if rating %}{{ stars(rating) }}{% endif %}
+        <ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
+            {% if year %}
+                <li class="flex-col">
+                    <strong>Released</strong><span>{{ year }}</span>
+                </li>
+            {% endif %}
+            {% if playtime %}
+                <li class="flex-col">
+                    <strong>Playtime</strong><span>{{ playtime }}</span>
+                </li>
+            {% endif %}
+            {% if pullquote %}
+                <li class="flex-col meta-grid--full">
+                    <strong>Pullquote</strong><span>{{ pullquote }}</span>
+                </li>
+            {% endif %}
+        </ul>
+    </div>
+</header>
+<section class="flow">
+    {{ content | safe }}
+</section>

src/_includes/macros/media-grid.njk

@@ -0,0 +1,14 @@
+{% macro grid(data, shape = "vertical") %}
+    <ul class="media-grid {{ shape }} list-none p-0">
+        {% for item in data %}
+            <li class="radius-0.5">
+                <a href="{{ item.url }}">
+                    {% if item.data.image %}<img src="{{ item.data.image }}" alt="" />{% endif %}
+                    <div class="meta font-size-s line-height-s flex items-end px-0.5 pb-0.5">
+                        <span class="meta-text">{{ item.data.title }}</span>
+                    </div>
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+{% endmacro %}

src/_includes/macros/utils.njk

@@ -1,12 +1,13 @@
 {% macro stars(number) %}
     {% set filledStars = number %}
     {% set emptyStars = 5 - number %}
-    <ul class="[ stars ] [ flex list-none p-0 m-0 text-primary ]" aria-description="{{ number }} out of 5 stars">
-    {% for i in range(0, filledStars) %}
-        <li class="[ star-filled ]">{% include "svgs/star.svg" %}</li>
-    {% endfor %}
-    {% for i in range(0, emptyStars) %}
-        <li class="[ star-empty ]">{% include "svgs/star-empty.svg" %}</li>
-    {% endfor %}
+    <ul class="[ stars ] [ flex list-none p-0 mb-0 text-primary ]"
+        aria-description="{{ number }} out of 5 stars">
+        {% for i in range(0, filledStars) %}
+            <li class="[ star-filled ]">{% include "svgs/star.svg" %}</li>
+        {% endfor %}
+        {% for i in range(0, emptyStars) %}
+            <li class="[ star-empty ]">{% include "svgs/star-empty.svg" %}</li>
+        {% endfor %}
     </ul>
 {% endmacro %}