feat: fix & improve games styling

content/en/games/the-guild.md

@@ -1,11 +1,10 @@
 ---
+title: The Guild
 picture: games/the-guild.png
 picture_alt: in-game screenshot of a cow-boy riding in wilderness
 website: https://the-guild.frog-collective.org
 ---
 
-### The Guild
-
 Saddle up, partner! Welcome to "Frontier Fortune: Prospector's Quest" where the
 dusty trails of the Old West lead to riches beyond your wildest dreams. In this
 thrilling adventure, you step into the boots of a rugged prospector, venturing

content/fr/games/the-guild.md

@@ -1,10 +1,9 @@
 ---
+title: The Guild
 picture: games/the-guild.png
 picture_alt: Image de jeux avec un cowboy
 website: https://the-guild.frog-collective.org
 ---
 
-### The Guild
-
-En selle, partenaire etcetera.
+Saddle up, partner! Welcome to "Frontier Fortune: Prospector's Quest" where the dusty trails of the Old West lead to riches beyond your wildest dreams. In this thrilling adventure, you step into the boots of a rugged prospector, venturing into uncharted territories to uncover precious resources for a greedy guild hungry for wealth and power.
 

src/lib/css/content.scss

@@ -17,6 +17,7 @@ body {
     box-shadow: var(--elevation-medium);
     padding: var(--space-large) var(--space-xlarge);
     border-radius: var(--border-radius-medium);
+    overflow: hidden;
 
     @media($mobile-breakpoint) {
         padding: var(--space-medium) var(--space-large);

src/lib/css/typo.scss

@@ -31,6 +31,7 @@ h1 {
 
     font-family: 'Knewave';
     font-size: var(--fz-1);
+    font-weight: bold;
     text-transform: uppercase;
 }
 
@@ -38,6 +39,7 @@ h2 {
     margin: 0 0 var(--space-medium) 0;
 
     font-size: var(--fz-2);
+    font-weight: bold;
     text-transform: uppercase;
 }
 
@@ -45,18 +47,18 @@ h3 {
     margin: 0 0 var(--space-small) 0;
 
     font-size: var(--fz-3);
+    font-weight: bold;
 }
 
 h4 {
     margin: 0 0 var(--space-small) 0;
 
     font-size: var(--fz-4);
+    font-weight: bold;
 }
 
 p {
     margin: 0 0 var(--space-small) 0;
-
-    margin-bottom: var(--space-medium);
 }
 
 @media ($mobile-breakpoint) {

src/lib/nav.scss

@@ -16,6 +16,8 @@
    // Put the logo up this number of pixel when scrolling
    --mobile-dock-logo-offset: -52px;
 
+    z-index: 1;
+
     position: sticky;
     top: 0;
     padding: 0;

src/lib/section.scss

@@ -2,7 +2,6 @@
     margin-bottom: var(--space-xlarge);
     display: flex;
     flex-direction: column;
-    align-items: center;
 
     @media ($mobile-breakpoint) {
         margin-bottom: var(--space-large);
@@ -14,6 +13,7 @@
         background: transparent;
         position: relative;
         margin-top: 110px;
+        align-self: center;
 
         &::before {
             z-index: -1;

src/pages/index/games.html

@@ -15,6 +15,9 @@
         >
         </img>
       </div>
+      <div class="game--title">
+        {{ game.meta.title }}
+      </div>
       <div class="game--description">
         {{ game }}
         <a class="game--more-button" href="{{ game.meta.website }}">Learn More</a>

src/pages/index/games.scss

@@ -1,12 +1,10 @@
 .game {
+    @extend %card;
+
     display: flex;
     flex-direction: column;
-
-    &::after {
-        content: "";
-        background: center / cover no-repeat url("/img/game-footer.png");
-        height: 13px;
-    }
+    background: var(--color-on-dark);
+    padding: 0;
 
     &--picture-wrapper {
         display: flex;
@@ -14,25 +12,26 @@
         overflow: hidden;
     }
 
+    &--title {
+        @extend h2;
+        margin: 0;
+        padding: var(--space-small);
+        background: var(--color-dark-gradient);
+        color: var(--color-on-dark);
+    }
+
     &--description {
-        padding: var(--space-large);
         display: flex;
         flex-direction: column;
-        align-items: center;
-        background: var(--primary);
-        color: var(--dark);
+        padding: var(--space-large) var(--space-xlarge);
+
+        @media($mobile-breakpoint) {
+            padding: var(--space-medium) var(--space-medium);
+        }
     }
 
     &--more-button {
-        background: var(--dark);
-        color: var(--primary);
-        padding: var(--space-small) var(--space-medium);
-        text-decoration: none;
-        font-family: Knewave;
-        font-size: var(--fz-4);
-
-        &:hover {
-            color: white;
-        }
+        @extend %button;
+        align-self: end;
     }
 }