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.