feat: put presentation in a card to avoid background image tampering with text

src/lib/css/content.scss

@@ -18,3 +18,13 @@ body {
     max-width: 1100px;
 }
 
+%card {
+    background: white;
+    box-shadow: var(--elevation-medium);
+    padding: var(--space-large) var(--space-xlarge);
+    border-radius: var(--border-radius-medium);
+
+    @media($mobile-breakpoint) {
+        padding: var(--space-medium) var(--space-large);
+    }
+}

src/lib/css/typo.scss

@@ -36,6 +36,7 @@ h4 {
 }
 
 p {
+    margin: 0 0 var(--space-small) 0;
     margin-bottom: var(--space-medium);
 }
 

src/lib/css/variables.scss

@@ -29,6 +29,7 @@ $mobile-breakpoint: "max-width: 768px";
     --border-radius-small: 3px;
     --border-radius-medium: 7px;
     --elevation-high: 0px 5px 5px 0px rgba(22, 22, 22, 0.5);
+    --elevation-medium: 0px 2px 7px 0px rgba(22, 22, 22, 0.3);
 
     --transitions-duration: 0.2s;
 }

src/pages/index/presentation.html

@@ -1,52 +1,54 @@
 {% from "lib/section.html" import section %}
 
 {% call section(gettext("Collective"), "/img/section-collective.png", "/img/section-collective-hover.png") %}
-  <p>
+  <div class="presentation--content">
-    {% trans %}
+    <p>
-      Welcome to the cozy world of the Frog Collective, where big dreams come
+      {% trans %}
-      in small packages! We're not your typical gaming behemoth with a massive
+        Welcome to the cozy world of the Frog Collective, where big dreams come
-      team and towering office buildings. Nope, we're just two passionate souls
+        in small packages! We're not your typical gaming behemoth with a massive
-      huddled around a couple of computers, fueled by an insatiable love for
+        team and towering office buildings. Nope, we're just two passionate souls
-      crafting little nuggets of joy that won't break the bank.
+        huddled around a couple of computers, fueled by an insatiable love for
-    {% endtrans %}
+        crafting little nuggets of joy that won't break the bank.
-  </p>
+      {% endtrans %}
-
+    </p>
-  <p>
-    {% trans %}
-      Here we specialize in creating bite-sized adventures that anyone can pick
-      up and play, but only the true gaming aficionados can conquer. Think of
-      us as the David to the Goliaths of the gaming industry. Our games might
-      be small, but they will keep you coming back for more. Now, you might be
-      wondering, how on earth do two people manage to steer the ship in this
-      vast ocean of pixels? Well, let me tell you, it's all about that sweet,
-      sweet collective decision-making magic. We're like yin and yang,
-      balancing each other's quirks and strengths as we navigate the
-      treacherous waters of game development.
-    {% endtrans %}
-  </p>
 
     <p>
-    {% trans %}
+      {% trans %}
-      Whether it's brainstorming ideas over a late-night pizza session or
+        Here we specialize in creating bite-sized adventures that anyone can pick
-      duking it out over the perfect shade of blue for our protagonist's cape,
+        up and play, but only the true gaming aficionados can conquer. Think of
-      every decision is a team effort. And hey, when you've only got two heads
+        us as the David to the Goliaths of the gaming industry. Our games might
-      in the game, you learn to trust each other's instincts real quick. So, if
+        be small, but they will keep you coming back for more. Now, you might be
-      you're tired of the same old cookie-cutter games and fancy a little dose
+        wondering, how on earth do two people manage to steer the ship in this
-      of indie charm, strap in and join us on this wild ride through the
+        vast ocean of pixels? Well, let me tell you, it's all about that sweet,
-      pixelated cosmos. Who knows, you might just discover your new favorite
+        sweet collective decision-making magic. We're like yin and yang,
-      addiction in the unlikeliest of places. Welcome to Frog Collective –
+        balancing each other's quirks and strengths as we navigate the
-      where small is mighty, and fun knows no bounds! 
+        treacherous waters of game development.
-    {% endtrans %}
+      {% endtrans %}
-  </p>
+    </p>
 
-  <h3>{{ gettext('Members') }}</h3>
+      <p>
-  <div class="members">
+      {% trans %}
-    {% for member in load("presentation/members.yaml") | yaml %}
+        Whether it's brainstorming ideas over a late-night pizza session or
-      <div class="member">
+        duking it out over the perfect shade of blue for our protagonist's cape,
-        <img class="member--avatar" src="{{ member.avatar | load | write }}"></img>
+        every decision is a team effort. And hey, when you've only got two heads
-        <h4 class="member--name">{{ member.name }}</h4>
+        in the game, you learn to trust each other's instincts real quick. So, if
-        <div class="member--description">{{ member.description }}</div>
+        you're tired of the same old cookie-cutter games and fancy a little dose
-      </div>
+        of indie charm, strap in and join us on this wild ride through the
-    {% endfor %}
+        pixelated cosmos. Who knows, you might just discover your new favorite
+        addiction in the unlikeliest of places. Welcome to Frog Collective –
+        where small is mighty, and fun knows no bounds! 
+      {% endtrans %}
+    </p>
+
+    <h3>{{ gettext('Members') }}</h3>
+    <div class="members">
+      {% for member in load("presentation/members.yaml") | yaml %}
+        <div class="member">
+          <img class="member--avatar" src="{{ member.avatar | load | write }}"></img>
+          <h4 class="member--name">{{ member.name }}</h4>
+          <div class="member--description">{{ member.description }}</div>
+        </div>
+      {% endfor %}
+    </div>
   </div>
 {% endcall %}

src/pages/index/presentation.scss

@@ -1,3 +1,8 @@
+.presentation--content {
+    @extend %card;
+    background: white;
+}
+
 .members {
     display: flex;
     justify-content: center;