From bd7ccaf5c83fbd5ff1a1f2fdbb0b398d4296bf59 Mon Sep 17 00:00:00 2001 From: Julie Lenaerts Date: Wed, 20 Dec 2023 16:18:25 +0100 Subject: [PATCH] Make adjustments to the homepage. Curved shapes for each section still posing a problem --- assets/scss/custom.scss | 59 ++++++++++++++---------- content/francais/_index.md | 27 +++-------- content/francais/sections/testimonial.md | 2 +- static/images/svg/curve-1.svg | 2 +- themes/hugoplate/layouts/index.html | 4 +- 5 files changed, 45 insertions(+), 49 deletions(-) diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index 1ba222e..dde207d 100755 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -22,7 +22,7 @@ $icon-yellow: #fcc958; @mixin add-bg-pattern($id) { background-repeat: repeat; background-position: top center; - background-image: url('/images/bg/pattern-#{$id}.png'); + background-image: url('/images/bg/pattern-#{$id}.png'); } // Sections bg transitions @@ -31,7 +31,7 @@ $icon-yellow: #fcc958; &:before { content: ''; position: absolute; - width: 100%; + width: 100%; height: 100%; background-image: url('/images/svg/curve-#{$id}.svg'); background-size: contain; @@ -42,21 +42,21 @@ $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-top: -35%, $pos-left: 50%) { position: relative; z-index: 1; &:before { content: ''; position: absolute; - width: 45px * $scale; - height: 45px * $scale; - left: 50%; - top: -7%; - margin-left: -14px; + width: 100px * $scale; + height: 100px * $scale; + left: $pos-left; + top: $pos-top; + margin-left: -35px; background-color: $color; z-index: 0; @if $shape == 'circle' { - border-radius: 25px; + border-radius: 35px; } @else { border-radius: 0; @@ -71,9 +71,13 @@ header.header { main > section { &.hero { background-color: $bg-dark-blue; - @include add-bg-pattern(1); - @include add-horizontal-curve(1, bottom); + //@include add-bg-pattern(1); + //@include add-horizontal-curve(1, bottom); h1 { color: $text-green; } + #curve-1 { + position: absolute; + bottom: 0; + } } &.section-1 { li { font-weight: 600; } @@ -85,7 +89,7 @@ main > section { background-color: $text-green; //@include add-horizontal-curve(4, bottom); h2 { - @include add-decorative-shape($icon-red, 'circle'); + @include add-decorative-shape($icon-red, 'circle', .7, -30%, -10%); } } &.section-4 { @@ -96,12 +100,12 @@ main > section { } &.section-6 { background-color: $bg-dark-blue; - @include add-bg-pattern(1); + @include add-bg-pattern(1); } &.section-7 { background-color: $text-green; h2 { - @include add-decorative-shape($icon-yellow); + @include add-decorative-shape($icon-yellow, 'square', .7, -30%, -15%); } } } @@ -109,11 +113,14 @@ main > section { margin-top: 4rem; @include add-horizontal-curve(3, top); &:before { - top: -70px; + top: -100px; } } section { + h2.title { + color: #0c362d; + } // Centered text &.big-text, &.li-block { @@ -121,7 +128,7 @@ section { width: fit-content; margin-left: auto; margin-right: auto; - } + } } &.big-text { .container .row { @@ -153,13 +160,13 @@ section { margin: 0.5em; padding: 1.5em; text-align: center; - border-radius: 4px; + border-radius: 4px; background-color: #ffffff3b; } } - } + } } - // Add custom colored icons on each item + // Add custom colored icons on each item &.section-1 { //text-transform: uppercase; ul li { @@ -178,7 +185,11 @@ section { @include add-decorative-shape($icon-yellow, 'circle', 0.7); } } - } + } + // button styling + a.btn-chill { + background-color: #fc3636; + } } } @@ -213,7 +224,7 @@ main > section { &.page-hero { background-color: $bg-dark-blue; @include add-bg-pattern(1); - @include add-horizontal-curve(1, bottom); + @include add-horizontal-curve(1, bottom); h1 { color: $text-green; } } } @@ -237,12 +248,12 @@ figure.image { margin-left: 1.5em; } &.center { - display: flex; - justify-content: center; + display: flex; + justify-content: center; align-items: center; } img { margin-bottom: 0; } figcaption {} -} \ No newline at end of file +} diff --git a/content/francais/_index.md b/content/francais/_index.md index 8108845..086a472 100755 --- a/content/francais/_index.md +++ b/content/francais/_index.md @@ -15,7 +15,7 @@ banner: features: - #1 - class: section-sm li-block + class: section-md li-block image: /images/svg/curve-10.svg ## title: content: @@ -32,9 +32,9 @@ features: - #2 class: section-sm big-text image: /images/svg/curve-20.svg ## - title: + title: 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. 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. +# 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. bulletpoints: button: enable: false @@ -73,8 +73,8 @@ features: - #5 class: li-block image: /images/svg/curve-30.svg ## - title: #Mais aussi... - content: texte #CHILL est un logiciel professionnel conçu selon les standards de développement actuels. + title: Mais aussi... + content: #CHILL est un logiciel professionnel conçu selon les standards de développement actuels. 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. @@ -100,19 +100,4 @@ features: label: Button label link: # - - #7 - class: li-block - image: /images/svg/curve-40.svg ## - title: Ce qu'il faut retenir - content: - bulletpoints: - - une application qui facilite et améliore l’accompagnement social - - un logiciel libre et clé en main, flexible et adaptable à de nombreuses réalités - - un compagnon efficace, efficient et intuitif - - une interface intuitive, rapide et facile au quotidien - button: - enable: false - label: Button label - link: # - ---- \ No newline at end of file +--- diff --git a/content/francais/sections/testimonial.md b/content/francais/sections/testimonial.md index 28d855d..6e528ff 100644 --- a/content/francais/sections/testimonial.md +++ b/content/francais/sections/testimonial.md @@ -1,7 +1,7 @@ --- enable: true title: "Ce qu'en disent les utilisateurs" -description: "description" +description: # Testimonials testimonials: diff --git a/static/images/svg/curve-1.svg b/static/images/svg/curve-1.svg index 5468988..362f5e2 100644 --- a/static/images/svg/curve-1.svg +++ b/static/images/svg/curve-1.svg @@ -2,4 +2,4 @@ - \ No newline at end of file + diff --git a/themes/hugoplate/layouts/index.html b/themes/hugoplate/layouts/index.html index 26738ec..bbd7acc 100755 --- a/themes/hugoplate/layouts/index.html +++ b/themes/hugoplate/layouts/index.html @@ -44,10 +44,10 @@ class="{{ if not (modBool $i 2) }} md:order-1 {{ end }} md:col-7 lg:col-6"> -

+

{{ .title | markdownify }}

-

+

{{ .content | markdownify }}