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 {
-    &.bisou {
-        .container .row {
-            & > div {
-                &:first-child {}
-                &: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 #d1d1d1;
-                        border-radius: 4px;
-    
+/// Chill colors
+$chill-blue: #334d5c;
+$chill-green: #43b29d;
+$chill-beige: #d3c7b1;
+$chill-red: #dc516d;
+$chill-pink: #e57469;
+$chill-orange: #e89463;
+$chill-lightgray: #efefef;
+$chill-yellow: #f1d275;
+
+
+// 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;    
                 }
             }
-    
-        }
+        }    
     }
 }