From 531d8552c1655ff609aaf0783882c319ad2754e6 Mon Sep 17 00:00:00 2001
From: Florian Michaut <florianmichaut@gmail.com>
Date: Mon, 9 Dec 2024 16:52:13 +0100
Subject: [PATCH] fix(css): handle title + lists in bio

---
 src/members/laurelene-hard.md    | 11 ++++-----
 src/scss/components/_member.scss | 41 +++++++++++++++++++++++++++-----
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/members/laurelene-hard.md b/src/members/laurelene-hard.md
index 5af2208..d3accc2 100644
--- a/src/members/laurelene-hard.md
+++ b/src/members/laurelene-hard.md
@@ -10,27 +10,24 @@ socialLinkedin: 'https://www.linkedin.com/in/laurelenehard/'
 #socialMastodon: 'https://framapiaf.org/@AstrolabeCAE'
 url: '/members/laurelene-hard'
 emailSlug: 'laurelene.hard'
-tags: [ web, design, graphisme, creation ]
+tags: [web, design, graphisme, creation]
 location: [48.10517, -1.680833]
 ---
 
-# Vous avez un projet digital en tête, mais vous ne savez pas par où commencer ?
+## Vous avez un projet digital en tête, mais vous ne savez pas par où commencer ?
 
-
-## Je vous accompagne dès les premières étapes de votre projet :
+### Je vous accompagne dès les premières étapes de votre projet :
 
 - En vous proposant un accompagnement en UX design, de la phase de recherche à celle des tests et des itérations, pour vous fournir les clés nécessaires à l’adhésion de vos utilisateurs.
 
 - En réalisant un audit UX de votre site, application mobile ou logiciel, afin de vous aider à mieux convertir vos utilisateurs.
 
-
-## Je peux également intervenir dans :
+### Je peux également intervenir dans :
 
 - La création de votre identité visuelle (logo, charte graphique, branding sur LinkedIn) pour que vous soyez immédiatement reconnaissable.
 
 - La conception ou la refonte de votre site, application mobile ou logiciel.
 
-
 Avec 10 ans d'expérience dans le domaine de l'optique, un secteur à la fois médical et commercial, je peux également vous apporter des conseils avisés si votre projet touche à ces domaines.
 
 En tant qu’ancienne manager, d’équipes allant jusqu’à 10 collaborateurs, vous pourrez vous attendre à une collaboration structurée et rigoureuse, avec des points d'avancement réguliers (méthode agile) et un espace personnel dédié sur Notion.
diff --git a/src/scss/components/_member.scss b/src/scss/components/_member.scss
index ebe8e6e..3f78f0d 100644
--- a/src/scss/components/_member.scss
+++ b/src/scss/components/_member.scss
@@ -14,7 +14,7 @@
 
   &__wrapper {
     display: grid;
-    grid-template-columns: .4fr .6fr;
+    grid-template-columns: 0.4fr 0.6fr;
     grid-template-rows: 1fr;
     grid-column-gap: 1.5rem;
     grid-row-gap: 0;
@@ -59,13 +59,42 @@
       }
     }
   }
-  
+
   &__bio {
     position: relative;
 
-    + p,
-    p + p {
-      margin-top: 1.5rem;
+    p:not(:last-child),
+    ul:not(:last-child) {
+      margin-bottom: 1.5rem;
+    }
+
+    h2:not(:first-child) {
+      margin-top: 1.1428em;
+    }
+
+    h3:not(:first-child) {
+      margin-top: 1.3333em;
+    }
+
+    h1 {
+      margin-bottom: 0.5em;
+    }
+
+    h2 {
+      margin-bottom: 0.5714em;
+    }
+
+    h3 {
+      margin-bottom: 0.6666em;
+    }
+
+    ul {
+      list-style: disc outside;
+      margin-inline-start: 2em;
+    }
+
+    li + li {
+      margin-top: 0.5em;
     }
 
     &:not(.member-contact)::before {
@@ -91,7 +120,7 @@
   .member {
     margin-top: 3rem;
     margin-bottom: 8rem;
-    
+
     &__wrapper {
       display: block;
     }