add illustrations & icons

assets/sass/_custom.sass

@@ -36,8 +36,16 @@ body
     background-color: #edc883
     text-decoration: none
     color: $main-blue
+    display: flex
+    align-items: flex-start
+    gap: 5px
     &:visited
         color: $main-blue
+    svg
+        width: 20px
+        height: 20px
+        margin: 0
+        margin-top: 1px
 
 .excerpt:has(.communityGroup)
     display: flex
@@ -202,7 +210,9 @@ body
         font-size: 40px
     h3
         color: $main-blue
-        font-size: 25px
+        font-size: 18px
+        font-weight: bolder
+        width: 50%
 
 .post_link
     text-decoration: none
@@ -230,21 +240,55 @@ body
     padding: 0.2rem 0.75rem
     line-height: 1
 
-.membership_container
-    position: relative
-    h3
-        font-size: 20px
+.membership
+    &_container
+        position: relative
+        display: flex
+        align-items: center
+
+        h3
+        font-size: 18px
         margin: 0
-    p
-        font-size: 16px
-    div
+
+        p
+            font-size: 16px
+
+        .join_button
+            position: absolute
+            right: 0
+
+        figure
+            scale: 0.5
+
+    &_icon
+        width: 40px
+        margin-right: 10px
+        margin-left: 0
+
+    &_earth
+        width: 150px
+
+    &_section
         max-width: 75%
-        border-left: 3px solid $main-blue
         padding: 5px 10px
         margin: 20px
-    .join_button
-        position: absolute
-        right: 0
+
+        &_title
+            display: flex
+            align-items: center
+            margin-left: 0
+            padding-left: 0
+
+.backhome
+    &_link
+        display: flex
+        width: fit-content
+        text-decoration: none
+        gap: 10px
+        color: $main-blue
+    &_icon
+        width: 25px
+        margin: 0
 
 .post_body:has(#why-should-i-become-a-member) ul
         list-style: "+ "
@@ -277,8 +321,9 @@ td, th
     border-top: none
     border-bottom: 2px solid $text-color
 
-tbody tr:nth-child(even)
-    background-color: 
+.illustration_home
+    height: 500px
+    margin-right: 50px
 
 @media screen and (max-width: 900px)
     .grid-inverse

content/_index.md

@@ -8,6 +8,12 @@ tags: ["index"]
 <!-- Welcome to the EDRlab members directory! 
 <br/>You can search or browse members list by professions, services provided and collaboration to EDRLab mains activities. -->
 
+<div style="display: flex">
+
+<img src="./images/EDRLAB_ICONE-ILLU-WOM.svg" aria-hidden class="illustration_home" />
+
+<div>
+
 # EDRLab
 
 EDRLab is a network of professional organizations working in the domain of digital publishing. These organizations are publishers, ebook and audiobook distributors, booksellers, public and national libraries, or developers of reading applications or e-readers. Below are the reasons for such organizations to become membre of EDRLab.
@@ -18,28 +24,38 @@ This mini site allows you to browse the list of our current members.
 
 <div>
 
-### ONLINE MEMBER DIRECTORY
+<div class="membership_section">
+<div class="membership_section_title">
+<img src="./images/EDRLAB_ICONE-WEBINAIRE.svg" aria-hidden class="membership_icon"/>
+<h3>ONLINE MEMBER DIRECTORY</h3>
+</div>
 Be featured in our newly launched online catalogue, a dedicated page where members can showcase their organization. Update your information to make it your own.
 
 </div>
 
-<div>
-
-### COMMUNITY GROUPS
+<div class="membership_section">
+<div class="membership_section_title">
+<img src="./images/EDRLAB_ICONE-TEAM.svg" aria-hidden class="membership_icon" />
+<h3>COMMUNITY GROUPS</h3>
+</div>
 Enroll in our community groups focusing on key topics like Accessibily or LCP, stay updated and discuss with like--minded professionals.
 
 </div>
 
-<div>
-
-### INTERNATIONAL REPRESENTATION
+<div class="membership_section">
+<div class="membership_section_title">
+<img src="./images/EDRLAB_ICONE-MONDE.svg" aria-hidden class="membership_icon" />
+<h3>INTERNATIONAL REPRESENTATION</h3>
+</div>
 Present your company on an international stage. Have your documentation displayed at major book fairs, including the London Book Faire and the Frankfurt Book Fair.
 
 </div>
 
-<div>
-
-### NEWSLETTER SPOTLIGHT
+<div class="membership_section">
+<div class="membership_section_title">
+<img src="./images/EDRLAB_ICONE-MAIL-JAUNE.svg" aria-hidden class="membership_icon"/>
+<h3>NEWSLETTER SPOTLIGHT</h3>
+</div>
 Gain visibility to over 1000 industry professionals. Feature your news in our monthly newsletter.
 
 </div>
@@ -48,6 +64,12 @@ Gain visibility to over 1000 industry professionals. Feature your news in our mo
 
 </div>
 
+<img src="./images/EDRLAB_ICONE-MONDE-BIG.svg" aria-hidden class="membership_earth" />
+
+</div>
+</div>
+</div>
+
 
 
 <!-- ### Not yet a member?

content/igs/A11Y.md

@@ -1,5 +1,5 @@
 ---
-title: "Accessibility community group"
+title: "Accessibility"
 description: ""
 date: "2024-04-10"
 ig: ["Accessibility"]

content/igs/LCP.md

@@ -1,5 +1,5 @@
 ---
-title: "Licensed Content Protection (Readium LCP) community group"
+title: "Licensed Content Protection (Readium LCP)"
 description: "Readium LCP is a recent passphrase-based rights management solution, with support for different business models including library lending and bookstore sales. This is a simple but reliable solution for distributing protected content, based on rock solid encryption algorithms and classical PKI techniques."
 date: "2019-02-28"
 ig: ["LCP"]