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,6 +1,7 @@
 {% from "lib/section.html" import section %}
 
 {% call section(gettext("Collective"), "/img/section-collective.png", "/img/section-collective-hover.png") %}
+  <div class="presentation--content">
     <p>
       {% trans %}
         Welcome to the cozy world of the Frog Collective, where big dreams come
@@ -49,4 +50,5 @@
         </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;