work on styling
This commit is contained in:
parent
dc48f5fd43
commit
7ea0d95b66
@ -42,7 +42,7 @@ $icon-yellow: #fcc958;
|
||||
}
|
||||
|
||||
// Colored design element: square or circle
|
||||
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1, $pos-top: -35%, $pos-left: 50%) {
|
||||
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1, $pos-top: -60%, $pos-left: 47%) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:before {
|
||||
@ -56,7 +56,7 @@ $icon-yellow: #fcc958;
|
||||
background-color: $color;
|
||||
z-index: 0;
|
||||
@if $shape == 'circle' {
|
||||
border-radius: 35px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
@else {
|
||||
border-radius: 0;
|
||||
@ -70,19 +70,24 @@ header.header {
|
||||
}
|
||||
main > section {
|
||||
&.hero {
|
||||
height: 84vh;
|
||||
background-color: $bg-dark-blue;
|
||||
//@include add-bg-pattern(1);
|
||||
//@include add-horizontal-curve(1, bottom);
|
||||
|
||||
h1 { color: $text-green; }
|
||||
#curve-1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
.hero-img {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
}
|
||||
&.section-1 {
|
||||
padding-top: 27rem;
|
||||
li { font-weight: 600; }
|
||||
}
|
||||
&.section-2 {
|
||||
.container {
|
||||
color: $bg-dark-blue;
|
||||
text-align: center;
|
||||
}
|
||||
background-color: transparentize($color: $text-green, $amount: 0.7)
|
||||
}
|
||||
&.section-3 {
|
||||
@ -109,9 +114,20 @@ main > section {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.curve {
|
||||
position: absolute;
|
||||
top: 500px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.dark > footer {
|
||||
margin-top: 4rem;
|
||||
@include add-horizontal-curve(3, top);
|
||||
//@include add-horizontal-curve(3, top);
|
||||
&:before {
|
||||
top: -100px;
|
||||
}
|
||||
@ -157,10 +173,10 @@ section {
|
||||
display: none;
|
||||
}
|
||||
flex: 1 0 0;
|
||||
margin: 0.5em;
|
||||
padding: 1.5em;
|
||||
margin: 0.5em 2rem 0.5em 2rem;
|
||||
padding: 2.5em 1em 1em 1em;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
border-radius: 20px;
|
||||
background-color: #ffffff3b;
|
||||
}
|
||||
}
|
||||
@ -173,16 +189,19 @@ section {
|
||||
font-weight: 500;
|
||||
font-size: large;
|
||||
&:nth-child(1) {
|
||||
@include add-decorative-shape($text-green, 'square', 0.7);
|
||||
@include add-decorative-shape($text-green, 'square', 1);
|
||||
&:after {
|
||||
content: "\f4d7";
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
@include add-decorative-shape($icon-red, 'circle', 0.7);
|
||||
@include add-decorative-shape($icon-red, 'circle', 1);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
@include add-decorative-shape($chill-orange, 'square', 0.7);
|
||||
@include add-decorative-shape($chill-orange, 'square', 1);
|
||||
}
|
||||
&:nth-child(4) {
|
||||
@include add-decorative-shape($icon-yellow, 'circle', 0.7);
|
||||
@include add-decorative-shape($icon-yellow, 'circle', 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -223,8 +242,8 @@ section.dark {
|
||||
main > section {
|
||||
&.page-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; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
banner:
|
||||
title: "The software partner for social professionals"
|
||||
content: "Chill is a web application for social professionals, focused on supporting people. Chill is 100% free and open-source."
|
||||
image: "/images/banner.png"
|
||||
image: "/images/illustrations/hero-image.png"
|
||||
button:
|
||||
enable: true
|
||||
label: "Try the demo"
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
banner:
|
||||
|
||||
class: dark
|
||||
image: /images/banner.png
|
||||
image: /images/illustrations/hero-image.png
|
||||
title: Le compagnon du travailleur social
|
||||
content: >
|
||||
CHILL est une application web open source, <br>un logiciel métier dédié à l'accompagnement des personnes, pour améliorer et faciliter le travail social.
|
||||
Une application web open source dédié à faciliter le travail social.
|
||||
bulletpoints:
|
||||
button:
|
||||
enable: true
|
||||
@ -32,7 +32,7 @@ features:
|
||||
- #2
|
||||
class: section-sm big-text
|
||||
image: /images/svg/curve-20.svg ##
|
||||
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.
|
||||
title: CHILL. L'application est là pour vous offrir une administration plus facile et une vue d'ensemble de votre travail à tout moment.
|
||||
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:
|
||||
@ -43,7 +43,7 @@ features:
|
||||
|
||||
- #3
|
||||
class:
|
||||
image: /images/service-1.png
|
||||
image: /images/illustrations/efficient.png
|
||||
title: Efficace, efficient et intuitif
|
||||
content: "Parmi ses fonctionnalités les plus appréciées, il vous permet en quelques clics :"
|
||||
bulletpoints:
|
||||
@ -76,8 +76,8 @@ features:
|
||||
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.
|
||||
- <h4 class='mb-4'>Responsive et accessible</h4> Chill répond aux enjeux de mobilité des travailleurs.
|
||||
- <h4 class='mb-4'>Une solution clé en main</h4> Nombreuses possibilités de paramétrage pour répondre à vos besoins.
|
||||
- <h4 class='mb-4'>Respecte les principes du RGPD</h4> de <i>privacy by design</i> et <i>security by design</i>, en offrant la possibilité aux administrateurs de paramétrer différents rôles, cercles d’utilisateurs et règles d’accès aux contenus.
|
||||
- <h4 class='mb-4'>S’inscrit dans la philosophie du logiciel libre</h4> et dans un processus d’amélioration continue pour un code source restant ouvert, car l’argent public doit fabriquer du code public.
|
||||
button:
|
||||
|
||||
@ -1,5 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1440" height="96" preserveAspectRatio="none" viewBox="0 0 1440 96">
|
||||
<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 width="100%" height="100%" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="curve transition duration-300 ease-in-out delay-150"><path d="M 0,400 L 0,150 C 88.60714285714286,142.64285714285714 177.21428571428572,135.28571428571428 303,143 C 428.7857142857143,150.71428571428572 591.7499999999999,173.50000000000003 732,192 C 872.2500000000001,210.49999999999997 989.7857142857144,224.7142857142857 1104,217 C 1218.2142857142856,209.2857142857143 1329.1071428571427,179.64285714285717 1440,150 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="#0d242e" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 200)"></path></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 405 B After Width: | Height: | Size: 720 B |
@ -20,13 +20,16 @@
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{{ partial "image" (dict "Src" .image "Alt" "Banner image" "Loading" "eager" "Class" "mx-auto" "Size" "800x") }}
|
||||
<div class="hero-img col-12">
|
||||
{{ partial "image" (dict "Src" .image "Alt" "Banner image" "Loading" "eager" "Class" "mx-auto" "Size" "400x") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="curve transition duration-300 ease-in-out delay-150"><path d="M 0,400 L 0,150 C 88.60714285714286,142.64285714285714 177.21428571428572,135.28571428571428 303,143 C 428.7857142857143,150.71428571428572 591.7499999999999,173.50000000000003 732,192 C 872.2500000000001,210.49999999999997 989.7857142857144,224.7142857142857 1104,217 C 1218.2142857142856,209.2857142857143 1329.1071428571427,179.64285714285717 1440,150 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="#0d242e" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 200)"></path></svg>
|
||||
|
||||
{{ end }}
|
||||
|
||||
<!-- /Banner -->
|
||||
|
||||
<!-- Features -->
|
||||
|
||||
@ -1,17 +1,11 @@
|
||||
<section class="dark page-hero pt-14 mb-14">
|
||||
<section class="dark hero-relative page-hero pt-14 mb-14">
|
||||
<div class="container text-center">
|
||||
<div class="px-8 py-14 dark:from-darkmode-body dark:to-darkmode-theme-light">
|
||||
<!-- bg-gradient-to-b from-body to-theme-light rounded-2xl -->
|
||||
<h1>{{ .Title }}</h1><!-- | title -->
|
||||
{{ partial "components/breadcrumb" (dict "Context" . "Class" "mt-6") }}
|
||||
</div>
|
||||
<!--
|
||||
{{ $image:= .Params.image }}
|
||||
{{ if $image }}
|
||||
<div class="mb-10">
|
||||
{{ partial "image" (dict "Src" $image "Alt" .Title "Class" "w-full rounded") }}
|
||||
</div>
|
||||
{{ end }}
|
||||
-->
|
||||
</div>
|
||||
<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 390" xmlns="http://www.w3.org/2000/svg" class="curve transition duration-300 ease-in-out delay-150"><path d="M 0,400 L 0,150 C 88.60714285714286,142.64285714285714 177.21428571428572,135.28571428571428 303,143 C 428.7857142857143,150.71428571428572 591.7499999999999,173.50000000000003 732,192 C 872.2500000000001,210.49999999999997 989.7857142857144,224.7142857142857 1104,217 C 1218.2142857142856,209.2857142857143 1329.1071428571427,179.64285714285717 1440,150 L 1440,400 L 0,400 Z" stroke="none" stroke-width="0" fill="#0d242e" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 200)"></path></svg>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user