From b2baa961aeac40926dcd80771db64ec11bc3b778 Mon Sep 17 00:00:00 2001 From: Mathieu Jaumotte Date: Wed, 8 Nov 2023 18:01:29 +0100 Subject: [PATCH] test svg curve between sections --- .../images/bg/{dessin-3.png => pattern-1.png} | Bin assets/images/svg/curve-1.svg | 5 + assets/images/svg/curve-2.svg | 16 ++ assets/scss/custom.scss | 56 ++++++- content/francais/_index.md | 151 ++++++++++-------- content/notes.off/theme.txt | 6 + themes/hugoplate/layouts/index.html | 4 +- 7 files changed, 167 insertions(+), 71 deletions(-) rename assets/images/bg/{dessin-3.png => pattern-1.png} (100%) create mode 100644 assets/images/svg/curve-1.svg create mode 100644 assets/images/svg/curve-2.svg diff --git a/assets/images/bg/dessin-3.png b/assets/images/bg/pattern-1.png similarity index 100% rename from assets/images/bg/dessin-3.png rename to assets/images/bg/pattern-1.png diff --git a/assets/images/svg/curve-1.svg b/assets/images/svg/curve-1.svg new file mode 100644 index 0000000..5468988 --- /dev/null +++ b/assets/images/svg/curve-1.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/svg/curve-2.svg b/assets/images/svg/curve-2.svg new file mode 100644 index 0000000..526813d --- /dev/null +++ b/assets/images/svg/curve-2.svg @@ -0,0 +1,16 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index f3144fe..f225f4a 100755 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -23,12 +23,44 @@ $icon-yellow: #fcc958; // 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() { background-repeat: repeat; - background-position: bottom center; - background-image: url('../images/bg/dessin-3.png'); + background-position: top center; + background-image: url('../images/bg/pattern-1.png'); } +// Sections bg transitions +@mixin curve-bottom($id) { + position: relative; + &:before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-image: url('../images/svg/curve-#{$id}.svg'); + background-size: contain; + background-position: bottom center; + background-repeat: no-repeat; + z-index: 10; + } +} -// Theme Custom sections +// Title design element, with colored circle +@mixin circle-in-title($color) { + position: relative; + z-index: 1; + &:before { + content: ''; + position: absolute; + width: 45px; + height: 45px; + left: -70px; + top: -20px; + border-radius: 25px; + background-color: $color; + z-index: 0; + } +} + +// Theme custom sections header.header { background-color: $bg-dark-blue; } @@ -36,6 +68,7 @@ main > section { &.hero { background-color: $bg-dark-blue; @include apply-bgpattern-01(); + @include curve-bottom(1); h1 { color: $text-green; } @@ -45,12 +78,19 @@ main > section { } } &.section-1 { - background-color: $bg-light-blue; + @include curve-bottom(2); + li { + font-weight: 600; + } } &.section-2 { + background-color: $bg-light-blue; } &.section-3 { background-color: $text-green; + h2 { + @include circle-in-title($icon-red); + } } &.section-4 { } @@ -63,6 +103,9 @@ main > section { } &.section-7 { background-color: $bg-light-blue; + h2 { + @include circle-in-title($icon-yellow); + } } } @@ -76,7 +119,7 @@ section.section-7 { width: 100%; } h2, p { - text-align: center; + //text-align: center; } ul { display: flex; @@ -88,8 +131,9 @@ section.section-7 { margin: 0.5em; padding: 1.5em; text-align: center; - border: 1px solid #767676; + //border: 1px solid #767676; border-radius: 4px; + background-color: white; } } } diff --git a/content/francais/_index.md b/content/francais/_index.md index 73a1b68..fd3e44c 100755 --- a/content/francais/_index.md +++ b/content/francais/_index.md @@ -1,65 +1,78 @@ --- -# Banner banner: + class: dark - 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." + 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. + bulletpoints: button: enable: true - label: "Essayer la démo" - link: "http://demo.chill.social" + label: Essayer la démo + link: http://demo.chill.social -# Features features: - - - class: section-1 - image: "/images/service-10.png" + + - #1 + class: + image: /images/svg/curve-10.svg title: content: bulletpoints: - - "Conservez les traces de vos interactions au quotidien" - - "Recherchez et partagez les infos à propos des personnes que vous accompagnez" - - "Communiquez pour interagir en équipe" - - "Disposez à tout moment des statistiques" + - Conservez les traces de vos interactions au quotidien + - Recherchez et partagez les infos à propos des personnes que vous accompagnez + - Communiquez pour interagir en équipe + - Disposez à tout moment des statistiques + button: + enable: false + label: Button label + link: # - - - class: section-2 - image: "/images/service-20.png" + - #2 + class: + image: /images/service-2.png 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." - button: - enable: false - label: "Test button style" - link: "#" - - - - class: section-3 - image: "/images/service-1.png" - title: "Efficace, efficient et intuitif" - content: "Parmi ses fonctionnalités les plus appréciées, il vous permet en quelques clics:" + 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. bulletpoints: - - "de **retrouver** toutes les informations sur les personnes accompagnées ;" - - "de **générer** automatiquement une grande variété de documents et formulaires : attestation de rendez-vous, imprimés uniques, etc." - - "de **fixer** des rendez-vous aux personnes accompagnées avec des rappels par sms, et de synchroniser les agendas en ligne ;" - - "d’**effectuer** un suivi des décisions sur des documents et formulaires relevant de la décision de plusieurs membres du personnel ;" - - "de **joindre** des pièces et documents à n’importe quel dossier par simple glisser-déposer depuis sa boîte mail, son ordinateur, etc." - - "de **gérer** les droits d’accès aux dossiers d’usagers par service et localisation, voire de rendre complètement confidentielles certains dossiers ;" - - - - class: section-4 - image: "/images/service-3.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." button: enable: false - label: "Support et manuels" - link: "start/user" + label: Button label + link: # - - - class: section-5 dark - image: "/images/service-20.png" + - #3 + class: + image: /images/service-1.png + title: Efficace, efficient et intuitif + content: "Parmi ses fonctionnalités les plus appréciées, il vous permet en quelques clics :" + bulletpoints: + - de **retrouver** toutes les informations sur les personnes accompagnées ; + - "de **générer** automatiquement une grande variété de documents et formulaires : attestation de rendez-vous, imprimés uniques, etc ;" + - de **fixer** des rendez-vous aux personnes accompagnées avec des rappels par sms, et de synchroniser les agendas en ligne ; + - d’**effectuer** un suivi des décisions sur des documents et formulaires relevant de la décision de plusieurs membres du personnel ; + - de **joindre** des pièces et documents à n’importe quel dossier par simple glisser-déposer depuis sa boîte mail, son ordinateur, etc ; + - de **gérer** les droits d’accès aux dossiers d’usagers par service et localisation, voire de rendre complètement confidentielles certains dossiers. + button: + enable: false + label: Button label + link: # + + - #4 + class: + image: /images/service-3.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. + bulletpoints: + button: + enable: true + label: Support et manuels + link: start/user + + - #5 + class: dark + image: /images/svg/curve-20.svg title: content: bulletpoints: @@ -67,27 +80,39 @@ features: - "**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." - "**Respecte les principes du RGPD** de *privacy by design* et *security by design*, en offrant la possibilité aux administrateurs de paramétrer différents rôles, cercles d’utilisateurs et règles d’accès aux contenus." - "**S’inscrit dans la philosophie du logiciel libre** et dans un processus d’amélioration continue pour un code source restant ouvert, car l’argent public doit fabriquer du code public." + button: + enable: false + label: Button label + link: # - - - class: section-6 - image: "/images/service-30.png" + - #6 + class: + 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.** -

- 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. -

- " + content: > + **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. +

+ bulletpoints: + button: + enable: false + label: Button label + link: # - - - class: section-7 - image: "/images/service-30.png" - title: "Ce qu'il faut retenir" + - #7 + class: + image: /images/service-00.png + 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 " + - 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/notes.off/theme.txt b/content/notes.off/theme.txt index 868f3cc..f5caf76 100644 --- a/content/notes.off/theme.txt +++ b/content/notes.off/theme.txt @@ -40,3 +40,9 @@ } } } + + + + + + \ No newline at end of file diff --git a/themes/hugoplate/layouts/index.html b/themes/hugoplate/layouts/index.html index fd49061..15ccb6c 100755 --- a/themes/hugoplate/layouts/index.html +++ b/themes/hugoplate/layouts/index.html @@ -1,7 +1,7 @@ {{ define "main" }} {{ with .Params.banner }} -
+
@@ -31,7 +31,7 @@ {{ range $i, $e:= .Params.features }} -
+