From 64f945bb3252fdb2bfbd13d718ab295c707212df Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Thu, 9 Nov 2023 13:02:06 +0100 Subject: [PATCH] =?UTF-8?q?r=C3=A9glages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/images/svg/curve-2.svg | 4 +- assets/images/svg/curve-4.svg | 24 +++++++ assets/scss/custom.scss | 102 ++++++++++++++++++---------- content/francais/_index.md | 23 ++++--- themes/hugoplate/layouts/index.html | 6 +- 5 files changed, 107 insertions(+), 52 deletions(-) create mode 100644 assets/images/svg/curve-4.svg diff --git a/assets/images/svg/curve-2.svg b/assets/images/svg/curve-2.svg index 9a3cc20..8bdcf20 100644 --- a/assets/images/svg/curve-2.svg +++ b/assets/images/svg/curve-2.svg @@ -4,9 +4,9 @@ + fill="#43b29d" id="path1" /> + fill="white" id="path2" transform="translate(0,-0.56147001)" /> \ No newline at end of file diff --git a/assets/images/svg/curve-4.svg b/assets/images/svg/curve-4.svg new file mode 100644 index 0000000..9c580e9 --- /dev/null +++ b/assets/images/svg/curve-4.svg @@ -0,0 +1,24 @@ + + + + + + + diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index ad68b9d..a519e87 100755 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -44,7 +44,7 @@ $icon-yellow: #fcc958; } // Colored design element: square or circle -@mixin add-decorative-shape($color, $shape: 'square', $scale: 1) { +@mixin add-decorative-shape($color, $shape: 'square', $scale: 1 , $pos: -70px) { position: relative; z-index: 1; &:before { @@ -52,7 +52,7 @@ $icon-yellow: #fcc958; position: absolute; width: 45px * $scale; height: 45px * $scale; - left: -70px; + left: $pos; top: -20px; background-color: $color; z-index: 0; @@ -70,24 +70,24 @@ header.header { background-color: $bg-dark-blue; } main > section { + h2 { + width: fit-content; + } &.hero { background-color: $bg-dark-blue; @include add-bg-pattern(1); @include add-horizontal-curve(1, bottom); - h1 { - color: $text-green; - } + h1 { color: $text-green; } } &.section-1 { - li { - font-weight: 600; - } + li { font-weight: 600; } } &.section-2 { - background-color: $bg-light-blue; + background-color: transparentize($color: $text-green, $amount: 0.7) } &.section-3 { background-color: $text-green; + @include add-horizontal-curve(4, bottom); h2 { @include add-decorative-shape($icon-red, 'circle'); } @@ -96,56 +96,79 @@ main > section { @include add-horizontal-curve(2, bottom); } &.section-5 { - background-color: transparentize($color: $text-green, $amount: 0.7) + background-color: transparentize($color: $text-green, $amount: 0.5) } &.section-6 { background-color: $bg-dark-blue; @include add-bg-pattern(1); } &.section-7 { - background-color: $bg-light-blue; + background-color: $text-green; h2 { @include add-decorative-shape($icon-yellow); } } } .dark > footer { + margin-top: 4rem; @include add-horizontal-curve(3, top); &:before { top: -70px; } } - -// Change bulletlists rendering in flex bloc -section.section-1, -section.section-5, -section.section-7 { - .container .row { - & > div { - &:last-child { - width: 100%; - } - h2, p { - //text-align: center; - } - ul { - display: flex; - li { - i:first-child { - display: none; +section { + // Change bulletlists rendering in flex bloc + &.li-block { + .container .row { + & > div { + &:last-child { + width: 100%; + } + h2, p { + margin-left: auto; + margin-right: auto; + } + ul { + display: flex; + li { + i:first-child { + display: none; + } + flex: 1 0 0; + margin: 0.5em; + padding: 1.5em; + text-align: center; + border-radius: 4px; + background-color: #ffffff3b; } - flex: 1 0 0; - margin: 0.5em; - padding: 1.5em; - text-align: center; - //border: 1px solid #767676; - border-radius: 4px; - background-color: white; + } + } + } + // Add custom colored icons on each item + &.section-1 { + ul li { + &:nth-child(1) { + @include add-decorative-shape($text-green, 'square', 0.7, 110px); + } + &:nth-child(2) { + @include add-decorative-shape($icon-red, 'circle', 0.7, 110px); + } + &:nth-child(3) { + @include add-decorative-shape($chill-orange, 'square', 0.7, 110px); + } + &:nth-child(4) { + @include add-decorative-shape($icon-yellow, 'circle', 0.7, 110px); } } } } + // Only big centered text + &.big-text { + p.text-xl { + font-size: 1.4rem; + } + } } // Dark context (homepage header, hero, footer) @@ -158,9 +181,16 @@ section.section-7 { border: 1px solid $btn-orange; border-radius: 2em; } +} +// Dark but only in sections +section.dark { p { color: white; font-weight: bolder; } +} + +.btn { + text-transform: unset; } \ No newline at end of file diff --git a/content/francais/_index.md b/content/francais/_index.md index 531f143..7a8fc56 100755 --- a/content/francais/_index.md +++ b/content/francais/_index.md @@ -15,7 +15,7 @@ banner: features: - #1 - class: + class: section-sm li-block image: /images/svg/curve-10.svg ## title: content: @@ -30,8 +30,8 @@ features: link: # - #2 - class: - image: /images/service-2.png + class: section-sm big-text + image: /images/svg/curve-20.svg ## 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. @@ -59,7 +59,7 @@ features: link: # - #4 - class: + class: big-text image: /images/bg/pattern-10.png ## title: content: > @@ -71,10 +71,11 @@ features: link: start/user - #5 - class: + class: li-block image: /images/svg/curve-30.svg ## - title: - content: + title: Mais aussi... + content: > + my-content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu lobortis elementum nibh tellus molestie nunc. Vestibulum lorem sed risus ultricies tristique nulla aliquet. 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." @@ -86,11 +87,11 @@ features: link: # - #6 - class: dark + class: dark big-text image: /images/service-3.png title: content: > - **Flexible et adaptable à de nombreuses réalités, CHILL s'adapte à une diversité de grosses comme de petites structures.** + Flexible et adaptable à de nombreuses réalités, CHILL s'adapte à une diversité de grosses comme de petites structures.

CHILL a été développé dans le cadre d'un processus participatif avec les travailleurs sociaux de différents secteurs, afin que le logiciel réponde à leur besoin et à une diversité de réalités de terrain.

@@ -101,8 +102,8 @@ features: link: # - #7 - class: - image: /images/svg/curve-20.svg ## + class: li-block + image: /images/svg/curve-40.svg ## title: Ce qu'il faut retenir content: bulletpoints: diff --git a/themes/hugoplate/layouts/index.html b/themes/hugoplate/layouts/index.html index 15ccb6c..26738ec 100755 --- a/themes/hugoplate/layouts/index.html +++ b/themes/hugoplate/layouts/index.html @@ -8,7 +8,7 @@

{{ .title | markdownify }}

-

+

{{ .content | markdownify }}

{{ with .button }} @@ -31,7 +31,7 @@ {{ range $i, $e:= .Params.features }} -
+
{{ .title | markdownify }} -

+

{{ .content | markdownify }}