separate class sections, chill-colors, texture as background

assets/scss/custom.scss

@@ -1,33 +1,72 @@
-// Add your own custom styles here
+///// HOMEPAGE
 
-section.section-sm {
+/// Chill colors
-    &.bisou {
+$chill-blue: #334d5c;
-        .container .row {
+$chill-green: #43b29d;
-            & > div {
+$chill-beige: #d3c7b1;
-                &:first-child {}
+$chill-red: #dc516d;
-                &:last-child {
+$chill-pink: #e57469;
-                    width: 100%;
+$chill-orange: #e89463;
-                }
+$chill-lightgray: #efefef;
-                h2, p {
+$chill-yellow: #f1d275;
-                    text-align: center;
-                }
-                ul {
-                    display: flex;
-                    li {
-                        i:first-child {
-                            display: none;
-                        }
-                        flex: 1 0 0;
-                        margin: 0.5em;
-                        padding: 1.5em;
-                        text-align: center;
-                        border: 1px solid #d1d1d1;
-                        border-radius: 4px;
 
+
+// Theme Custom sections
+header.header {
+    background-color: $chill-blue;
+}
+main > section {
+    &:first-child {
+        background-color: $chill-blue;
+    }
+    &.section-1 {
+    }
+    &.section-2 {
+    }
+    &.section-3 {
+    }
+    &.section-4 {
+    }
+    &.section-5 {
+    }
+    &.section-6 {
+        background-color: $chill-blue;
+        background-repeat: repeat;
+        background-position: bottom center;
+        background-image: url('../images/bg/dessin-3.png'); 
+        /* hugoplate needs to compile images in public, and make it automatically for images called from content.
+           we need to call first image from content md files, if we need to use it in css
+        */
+    }
+    &.section-7 {
+    }
+}
+
+// Change bulletlists rendering in flex bloc
+section.section-1,
+section.section-6 {
+    .container .row {
+        & > div {
+            &:last-child {
+                width: 100%;
+            }
+            h2, p {
+                text-align: center;
+            }
+            ul {
+                display: flex;
+                li {
+                    i:first-child {
+                        display: none;
                     }
+                    flex: 1 0 0;
+                    margin: 0.5em;
+                    padding: 1.5em;
+                    text-align: center;
+                    border: 1px solid #767676;
+                    border-radius: 4px;    
                 }
             }
-    
         }    
     }
 }

config/_default/params.toml

@@ -64,12 +64,12 @@ image = "images/og-image.png"
 
 # site verifications
 # verification module: https://github.com/gethugothemes/hugo-modules/tree/master/seo-tools/site-verifications
-[site_verification]
+# [site_verification]
-google = ""   # Your verification code
+# google = ""   # Your verification code
-bing = ""     # Your verification code
+# bing = ""     # Your verification code
-baidu = ""    # Your verification code
+# baidu = ""    # Your verification code
-facebook = "" # Your verification code
+# facebook = "" # Your verification code
-mastodon = "" # Your verification code
+# mastodon = "" # Your verification code
 
 # cookies
 # cookies module: https://github.com/gethugothemes/hugo-modules/tree/master/components/cookie-consent
@@ -83,19 +83,17 @@ button = "I Accept"
 [widgets]
 sidebar = ["categories", "tags"]
 
-
 # google map
-[google_map]
+# [google_map]
-enable = false
+# enable = false
-map_api_key = "AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU"
+# map_api_key = "AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU"
-map_latitude = "51.5223477"
+# map_latitude = "51.5223477"
-map_longitude = "-0.1622023"
+# map_longitude = "-0.1622023"
-map_marker = "images/marker.png"
+# map_marker = "images/marker.png"
-
 
 # Subscription
-[subscription]
+# [subscription]
-enable = false
+# enable = false
 # mailchimp subsciption
-mailchimp_form_action = "https://gmail.us4.list-manage.com/subscribe/post?u=463ee871f45d2d93748e77cad&id=a0a2c6d074" # replace this url with yours
+# mailchimp_form_action = "https://gmail.us4.list-manage.com/subscribe/post?u=463ee871f45d2d93748e77cad&id=a0a2c6d074" # replace this url with yours
-mailchimp_form_name = "b_463ee871f45d2d93748e77cad_a0a2c6d074"
+# mailchimp_form_name = "b_463ee871f45d2d93748e77cad_a0a2c6d074"

content/francais/_index.md

@@ -12,9 +12,9 @@ banner:
 # Features
 features:
   - 
+    class: section-1
     image: "/images/service-10.png"
     title: 
-    class: bisou
     content:
     bulletpoints: 
     - "Conservez les traces de vos interactions au quotidien"
@@ -23,10 +23,13 @@ features:
     - "Disposez à tout moment des statistiques"
 
   - 
+    class: section-2
     image: "/images/service-20.png"
+    title: 
     content: "CHILL nourrit les travailleurs sociaux des informations dont ils ont besoin au quotidien, tout en leur offrant une vision d’ensemble sur la situation de vie, les dossiers et les parcours sociaux des personnes accompagnées."
 
   - 
+    class: section-3
     image: "/images/service-1.png"
     title: "Efficace, efficient et intuitif"
     content: "Parmi ses fonctionnalités les plus appréciées, il vous permet en quelques clics:"
@@ -39,7 +42,9 @@ features:
     - "de **gérer** les droits d’accès aux dossiers d’usagers par service et localisation, voire de rendre complètement confidentielles certains dossiers ;"
 
   - 
+    class: section-4
     image: "/images/service-20.png"
+    title:
     content: "
     Via les divers supports et manuels pédagogiques mis à disposition, CHILL permet l’autonomie des utilisateurs et des administrateurs, que ce soit pour l'utiliser ou pour le configurer."
     button:
@@ -48,6 +53,7 @@ features:
       link: "start/user"
 
   - 
+    class: section-5
     image: "/images/service-30.png"
     title: 
     content: "
@@ -58,10 +64,10 @@ features:
     "
 
   - 
+    class: section-6
     image: "/images/service-20.png"
     title: 
     content: 
-    class: bisou
     bulletpoints: 
     - "**Responsive et accessible depuis n’importe quel support informatique** (smartphone, ordinateur, tablette, etc.) afin de répondre aux enjeux de mobilité des travailleurs."
     - "**Propose une solution clé en main** *backend-frontend* aux nombreuses possibilités de paramétrage, qui peut être adaptée et installée dans différentes infrastructures techniques."
@@ -69,6 +75,7 @@ features:
     - "**S’inscrit dans la philosophie du logiciel libre** et dans un processus d’amélioration continue pour un code source restant ouvert, car l’argent public doit fabriquer du code public."
 
   - 
+    class: section-7
     image: "/images/service-3.png" 
     title: "Ce qu'il faut retenir"
     content: