suite

assets/scss/custom.scss

@@ -21,14 +21,14 @@ $icon-yellow: #fcc958;
 // Pattern
 // hugo needs to precompile images in public dir, and make it automatically with images called from content.
 // here we need to use it in css, then need to generate it, calling it first from a content md file.
-@mixin apply-bgpattern-01() {
+@mixin add-bg-pattern($id) {
     background-repeat: repeat;
     background-position: top center;
-    background-image: url('../images/bg/pattern-1.png'); 
+    background-image: url('../images/bg/pattern-#{$id}.png'); 
 }
 
 // Sections bg transitions
-@mixin curve-bottom($id) {
+@mixin add-horizontal-curve($id, $pos) {
     position: relative;
     &:before {
         content: '';
@@ -37,26 +37,31 @@ $icon-yellow: #fcc958;
         height: 100%;
         background-image: url('../images/svg/curve-#{$id}.svg');
         background-size: contain;
-        background-position: bottom center;
+        background-position: $pos center;
         background-repeat: no-repeat;
         z-index: 10;
     }
 }
 
-// Title design element, with colored circle
-@mixin circle-in-title($color) {
+// Colored design element: square or circle
+@mixin add-decorative-shape($color, $shape: 'square', $scale: 1) {
     position: relative;
     z-index: 1;
     &:before {
         content: '';
         position: absolute;
-        width: 45px; 
-        height: 45px;
+        width: 45px * $scale; 
+        height: 45px * $scale;
         left: -70px; 
         top: -20px;
-        border-radius: 25px;
         background-color: $color;
         z-index: 0;
+        @if $shape == 'circle' {
+            border-radius: 25px;
+          }
+        @else {
+            border-radius: 0;
+        }
     }
 }
 
@@ -67,18 +72,13 @@ header.header {
 main > section {
     &.hero {
         background-color: $bg-dark-blue;
-        @include apply-bgpattern-01();
-        @include curve-bottom(1);        
+        @include add-bg-pattern(1);
+        @include add-horizontal-curve(1, bottom);        
         h1 {
             color: $text-green;
         }
-        p {
-            color: white;
-            font-weight: bolder;
-        }
     }
     &.section-1 {
-        @include curve-bottom(2);
         li {
             font-weight: 600;
         }
@@ -89,25 +89,33 @@ main > section {
     &.section-3 {
         background-color: $text-green;
         h2 {
-            @include circle-in-title($icon-red);
+            @include add-decorative-shape($icon-red, 'circle');
         }
     }
     &.section-4 {
+        @include add-horizontal-curve(2, bottom);
     }
     &.section-5 {
         background-color: transparentize($color: $text-green, $amount: 0.7)
     }
     &.section-6 {
         background-color: $bg-dark-blue;
-        @include apply-bgpattern-01();        
+        @include add-bg-pattern(1);        
     }
     &.section-7 {
         background-color: $bg-light-blue;
         h2 {
-            @include circle-in-title($icon-yellow);
+            @include add-decorative-shape($icon-yellow);
         }
     }
 }
+.dark > footer {
+    @include add-horizontal-curve(3, top);
+    &:before {
+        top: -70px;
+    }
+}
+
 
 // Change bulletlists rendering in flex bloc
 section.section-1,
@@ -150,4 +158,9 @@ section.section-7 {
         border: 1px solid $btn-orange;
         border-radius: 2em;
     }
+
+    p {
+        color: white;
+        font-weight: bolder;
+    }
 }