Make adjustments to the homepage. Curved shapes for each section still posing a problem

This commit is contained in:
Julie Lenaerts 2023-12-20 16:18:25 +01:00
parent f751734121
commit bd7ccaf5c8
5 changed files with 45 additions and 49 deletions

View File

@ -22,7 +22,7 @@ $icon-yellow: #fcc958;
@mixin add-bg-pattern($id) { @mixin add-bg-pattern($id) {
background-repeat: repeat; background-repeat: repeat;
background-position: top center; background-position: top center;
background-image: url('/images/bg/pattern-#{$id}.png'); background-image: url('/images/bg/pattern-#{$id}.png');
} }
// Sections bg transitions // Sections bg transitions
@ -31,7 +31,7 @@ $icon-yellow: #fcc958;
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url('/images/svg/curve-#{$id}.svg'); background-image: url('/images/svg/curve-#{$id}.svg');
background-size: contain; background-size: contain;
@ -42,21 +42,21 @@ $icon-yellow: #fcc958;
} }
// Colored design element: square or circle // 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; position: relative;
z-index: 1; z-index: 1;
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
width: 45px * $scale; width: 100px * $scale;
height: 45px * $scale; height: 100px * $scale;
left: 50%; left: $pos-left;
top: -7%; top: $pos-top;
margin-left: -14px; margin-left: -35px;
background-color: $color; background-color: $color;
z-index: 0; z-index: 0;
@if $shape == 'circle' { @if $shape == 'circle' {
border-radius: 25px; border-radius: 35px;
} }
@else { @else {
border-radius: 0; border-radius: 0;
@ -71,9 +71,13 @@ header.header {
main > section { main > section {
&.hero { &.hero {
background-color: $bg-dark-blue; background-color: $bg-dark-blue;
@include add-bg-pattern(1); //@include add-bg-pattern(1);
@include add-horizontal-curve(1, bottom); //@include add-horizontal-curve(1, bottom);
h1 { color: $text-green; } h1 { color: $text-green; }
#curve-1 {
position: absolute;
bottom: 0;
}
} }
&.section-1 { &.section-1 {
li { font-weight: 600; } li { font-weight: 600; }
@ -85,7 +89,7 @@ main > section {
background-color: $text-green; background-color: $text-green;
//@include add-horizontal-curve(4, bottom); //@include add-horizontal-curve(4, bottom);
h2 { h2 {
@include add-decorative-shape($icon-red, 'circle'); @include add-decorative-shape($icon-red, 'circle', .7, -30%, -10%);
} }
} }
&.section-4 { &.section-4 {
@ -96,12 +100,12 @@ main > section {
} }
&.section-6 { &.section-6 {
background-color: $bg-dark-blue; background-color: $bg-dark-blue;
@include add-bg-pattern(1); @include add-bg-pattern(1);
} }
&.section-7 { &.section-7 {
background-color: $text-green; background-color: $text-green;
h2 { 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; margin-top: 4rem;
@include add-horizontal-curve(3, top); @include add-horizontal-curve(3, top);
&:before { &:before {
top: -70px; top: -100px;
} }
} }
section { section {
h2.title {
color: #0c362d;
}
// Centered text // Centered text
&.big-text, &.big-text,
&.li-block { &.li-block {
@ -121,7 +128,7 @@ section {
width: fit-content; width: fit-content;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
} }
&.big-text { &.big-text {
.container .row { .container .row {
@ -153,13 +160,13 @@ section {
margin: 0.5em; margin: 0.5em;
padding: 1.5em; padding: 1.5em;
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
background-color: #ffffff3b; background-color: #ffffff3b;
} }
} }
} }
} }
// Add custom colored icons on each item // Add custom colored icons on each item
&.section-1 { &.section-1 {
//text-transform: uppercase; //text-transform: uppercase;
ul li { ul li {
@ -178,7 +185,11 @@ section {
@include add-decorative-shape($icon-yellow, 'circle', 0.7); @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 { &.page-hero {
background-color: $bg-dark-blue; background-color: $bg-dark-blue;
@include add-bg-pattern(1); @include add-bg-pattern(1);
@include add-horizontal-curve(1, bottom); @include add-horizontal-curve(1, bottom);
h1 { color: $text-green; } h1 { color: $text-green; }
} }
} }
@ -237,12 +248,12 @@ figure.image {
margin-left: 1.5em; margin-left: 1.5em;
} }
&.center { &.center {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
img { img {
margin-bottom: 0; margin-bottom: 0;
} }
figcaption {} figcaption {}
} }

View File

@ -15,7 +15,7 @@ banner:
features: features:
- #1 - #1
class: section-sm li-block class: section-md li-block
image: /images/svg/curve-10.svg ## image: /images/svg/curve-10.svg ##
title: title:
content: content:
@ -32,9 +32,9 @@ features:
- #2 - #2
class: section-sm big-text class: section-sm big-text
image: /images/svg/curve-20.svg ## 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 densemble sur la situation de vie, les dossiers et les parcours sociaux des personnes accompagnées.
content: > content: >
CHILL nourrit les travailleurs sociaux des informations dont ils ont besoin au quotidien, tout en leur offrant une vision densemble 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 densemble sur la situation de vie, les dossiers et les parcours sociaux des personnes accompagnées.
bulletpoints: bulletpoints:
button: button:
enable: false enable: false
@ -73,8 +73,8 @@ features:
- #5 - #5
class: li-block class: li-block
image: /images/svg/curve-30.svg ## image: /images/svg/curve-30.svg ##
title: #Mais aussi... title: Mais aussi...
content: texte #CHILL est un logiciel professionnel conçu selon les standards de développement actuels. content: #CHILL est un logiciel professionnel conçu selon les standards de développement actuels.
bulletpoints: bulletpoints:
- <h4 class='mb-4'>Responsive et accessible depuis nimporte quel support informatique</h4> (smartphone, ordinateur, tablette, etc.) afin de répondre aux enjeux de mobilité des travailleurs. - <h4 class='mb-4'>Responsive et accessible depuis nimporte quel support informatique</h4> (smartphone, ordinateur, tablette, etc.) afin de répondre aux enjeux de mobilité des travailleurs.
- <h4 class='mb-4'>Propose une solution clé en main</h4> <i>backend-frontend</i> aux nombreuses possibilités de paramétrage, qui peut être adaptée et installée dans différentes infrastructures techniques. - <h4 class='mb-4'>Propose une solution clé en main</h4> <i>backend-frontend</i> 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 label: Button label
link: # 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 laccompagnement 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: #
---

View File

@ -1,7 +1,7 @@
--- ---
enable: true enable: true
title: "Ce qu'en disent les utilisateurs" title: "Ce qu'en disent les utilisateurs"
description: "description" description:
# Testimonials # Testimonials
testimonials: testimonials:

View File

@ -2,4 +2,4 @@
<g mask="url(&quot;#SvgjsMask1900&quot;)" fill="none"> <g mask="url(&quot;#SvgjsMask1900&quot;)" fill="none">
<path d="m0 96 80-5.3C160 85 320 75 480 64s320-21 480-21.3c160 .3 320 10.3 400 16l80 5.3V0H0v96Z" fill="#0d242e"></path> <path d="m0 96 80-5.3C160 85 320 75 480 64s320-21 480-21.3c160 .3 320 10.3 400 16l80 5.3V0H0v96Z" fill="#0d242e"></path>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 404 B

After

Width:  |  Height:  |  Size: 405 B

View File

@ -44,10 +44,10 @@
class="{{ if not (modBool $i 2) }} class="{{ if not (modBool $i 2) }}
md:order-1 md:order-1
{{ end }} md:col-7 lg:col-6"> {{ end }} md:col-7 lg:col-6">
<h2 class="mb-4"> <h2 class="mb-4 title">
{{ .title | markdownify }} {{ .title | markdownify }}
</h2> </h2>
<p class="mb-8 {{ if and .class (in .class "big-text") }}text-xl{{ else }}text-lg{{ end }}"> <p class="mb-8">
{{ .content | markdownify }} {{ .content | markdownify }}
</p> </p>
<ul> <ul>