From 5138027dd3f983a49afec44685874df1d5fc19d8 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Thu, 9 Nov 2023 11:38:03 +0100 Subject: [PATCH] suite --- assets/images/svg/curve-2.svg | 8 ++---- assets/images/svg/curve-3.svg | 22 +++++++++++++++ assets/scss/custom.scss | 51 ++++++++++++++++++++++------------- config/_default/params.toml | 3 ++- content/francais/_index.md | 14 +++++----- 5 files changed, 65 insertions(+), 33 deletions(-) create mode 100644 assets/images/svg/curve-3.svg diff --git a/assets/images/svg/curve-2.svg b/assets/images/svg/curve-2.svg index 526813d..9a3cc20 100644 --- a/assets/images/svg/curve-2.svg +++ b/assets/images/svg/curve-2.svg @@ -1,7 +1,6 @@ - + - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/images/svg/curve-3.svg b/assets/images/svg/curve-3.svg new file mode 100644 index 0000000..6a88fe8 --- /dev/null +++ b/assets/images/svg/curve-3.svg @@ -0,0 +1,22 @@ + + + + + + + diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index f225f4a..4ae13f3 100755 --- 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; + } } \ No newline at end of file diff --git a/config/_default/params.toml b/config/_default/params.toml index 94cbcd6..64cd885 100644 --- 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 diff --git a/content/francais/_index.md b/content/francais/_index.md index fd3e44c..531f143 100755 --- 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,
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: