Make adjustments to the homepage. Curved shapes for each section still posing a problem
This commit is contained in:
parent
f751734121
commit
bd7ccaf5c8
@ -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 {}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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:
|
||||
- <h4 class='mb-4'>Responsive et accessible depuis n’importe 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.
|
||||
@ -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: #
|
||||
|
||||
---
|
||||
---
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
enable: true
|
||||
title: "Ce qu'en disent les utilisateurs"
|
||||
description: "description"
|
||||
description:
|
||||
|
||||
# Testimonials
|
||||
testimonials:
|
||||
|
||||
@ -2,4 +2,4 @@
|
||||
<g mask="url("#SvgjsMask1900")" 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>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 404 B After Width: | Height: | Size: 405 B |
@ -44,10 +44,10 @@
|
||||
class="{{ if not (modBool $i 2) }}
|
||||
md:order-1
|
||||
{{ end }} md:col-7 lg:col-6">
|
||||
<h2 class="mb-4">
|
||||
<h2 class="mb-4 title">
|
||||
{{ .title | markdownify }}
|
||||
</h2>
|
||||
<p class="mb-8 {{ if and .class (in .class "big-text") }}text-xl{{ else }}text-lg{{ end }}">
|
||||
<p class="mb-8">
|
||||
{{ .content | markdownify }}
|
||||
</p>
|
||||
<ul>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user