suite

2023-11-09 11:38:03 +01:00 · 2023-11-09 11:38:03 +01:00 · 5138027dd3
commit 5138027dd3
parent b2baa961ae
5 changed files with 65 additions and 33 deletions
--- a/assets/images/svg/curve-2.svg
+++ b/assets/images/svg/curve-2.svg
@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg version="1.1" width="1440" height="150" preserveAspectRatio="none" viewBox="0 0 1440 150" id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs2" />
+  <defs id="defs2" />
  <g mask="url(&quot;#SvgjsMask1900&quot;)" fill="none" id="g2" transform="matrix(1,0,0,0.99256931,0,1.1145986)" style="display:inline">
    <path
       d="m 0,90.877057 c 144,11.800003 432,56.400003 719.99999,59.000003 288.00001,2.6 576.00001,-36.8 720.00001,-46 V -1.1229428 H 0 Z"
@ -10,7 +9,4 @@
       d="M 0,7.4984182 C 279.30004,136.66106 461.78548,-19.058828 1440,16.877057 V -0.56147279 H 0 Z"
       fill="#ffffff" id="path2" transform="translate(0,-0.56147001)" />
  </g>
-</svg>
-<!--
-    
-->
+</svg>
--- a/assets/images/svg/curve-3.svg
+++ b/assets/images/svg/curve-3.svg
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="1440"
+   height="96"
+   preserveAspectRatio="none"
+   viewBox="0 0 1440 96"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3" />
+  <g
+     mask="url(&quot;#SvgjsMask1900&quot;)"
+     fill="none"
+     id="g1">
+    <path
+       d="M 0,0 80,5.3 C 160,11 320,21 480,32 640,43 800,53 960,53.3 1120,53 1280,43 1360,37.3 L 1440,32 V 96 H 0 Z"
+       fill="#0d242e"
+       id="path1" />
+  </g>
+</svg>
--- a/assets/scss/custom.scss
+++ b/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;
+    }
 }
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@ -15,7 +15,7 @@ logo_height = "32px"
 logo_webp = true

 # logo text will only show when logo is missing.
-logo_text = "Hugoplate"
+logo_text = "CHILL logo"

 # navbar fixed to top
 navbar_fixed = false
@ -40,6 +40,7 @@ custom_script = ""

 # copyright
 copyright = "Designed & Developed by [Zeon Studio](https://zeon.studio)"
+#copyright = "Designed & Developed by [Yellow Studio]() and [Champs Libres]()"

 # Preloader
 # preloader module: https://github.com/gethugothemes/hugo-modules/tree/master/components/preloader
--- a/content/francais/_index.md
+++ b/content/francais/_index.md
@ -5,7 +5,7 @@ banner:
  image: /images/banner.png
  title: Le compagnon du travailleur social
  content: > 
-    CHILL est une application web open source, un logiciel métier dédié à l'accompagnement des personnes, pour améliorer et faciliter le travail social.
+    CHILL est une application web open source, <br>un logiciel métier dédié à l'accompagnement des personnes, pour améliorer et faciliter le travail social.
  bulletpoints: 
  button:
    enable: true
@ -16,7 +16,7 @@ features:

  - #1
    class: 
-    image: /images/svg/curve-10.svg
+    image: /images/svg/curve-10.svg ##
    title: 
    content:
    bulletpoints: 
@ -60,7 +60,7 @@ features:

  - #4
    class: 
-    image: /images/service-3.png
+    image: /images/bg/pattern-10.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.
@ -71,8 +71,8 @@ features:
      link: start/user

  - #5
-    class: dark
-    image: /images/svg/curve-20.svg
+    class: 
+    image: /images/svg/curve-30.svg ##
    title: 
    content: 
    bulletpoints: 
@ -86,7 +86,7 @@ features:
      link: #

  - #6
-    class: 
+    class: dark
    image: /images/service-3.png
    title: 
    content: > 
@ -102,7 +102,7 @@ features:

  - #7
    class: 
-    image: /images/service-00.png 
+    image: /images/svg/curve-20.svg ##
    title: Ce qu'il faut retenir
    content:
    bulletpoints: