réglages
This commit is contained in:
parent
83678f8cb0
commit
64f945bb32
@ -4,9 +4,9 @@
|
||||
<g mask="url("#SvgjsMask1900")" fill="none" id="g2" transform="matrix(1,0,0,0.99256931,0,1.1145986)" style="display:inline">
|
||||
<path
|
||||
d="m 0,90.877057 c 144,11.800003 432,56.400003 719.99999,59.000003 288.00001,2.6 576.00001,-36.8 720.00001,-46 V -1.1229428 H 0 Z"
|
||||
fill="#184a7e" id="path1" />
|
||||
fill="#43b29d" id="path1" />
|
||||
<path
|
||||
d="M 0,7.4984182 C 279.30004,136.66106 461.78548,-19.058828 1440,16.877057 V -0.56147279 H 0 Z"
|
||||
fill="#ffffff" id="path2" transform="translate(0,-0.56147001)" />
|
||||
fill="white" id="path2" transform="translate(0,-0.56147001)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 777 B After Width: | Height: | Size: 775 B |
24
assets/images/svg/curve-4.svg
Normal file
24
assets/images/svg/curve-4.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
version="1.1"
|
||||
width="1440"
|
||||
height="180"
|
||||
preserveAspectRatio="none"
|
||||
viewBox="0 0 1440 180"
|
||||
id="svg4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<g
|
||||
mask="url("#SvgjsMask1900")"
|
||||
fill="none"
|
||||
id="g4"
|
||||
transform="matrix(-1,0,0,0.99256931,1440,1.114599)"
|
||||
style="display:inline;fill:#ffffff">
|
||||
<path
|
||||
d="M 1440,54.288803 C 1029.7929,-51.934711 370.34866,55.72286 0,44.910164 V 180.22459 h 1440 z"
|
||||
fill="white"
|
||||
id="path2" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 632 B |
@ -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;
|
||||
}
|
||||
@ -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.
|
||||
<br><br>
|
||||
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.
|
||||
<br><br>
|
||||
@ -101,8 +102,8 @@ features:
|
||||
link: #
|
||||
|
||||
- #7
|
||||
class:
|
||||
image: /images/svg/curve-20.svg ##
|
||||
class: li-block
|
||||
image: /images/svg/curve-40.svg ##
|
||||
title: Ce qu'il faut retenir
|
||||
content:
|
||||
bulletpoints:
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<h1 class="mb-4">
|
||||
{{ .title | markdownify }}
|
||||
</h1>
|
||||
<p class="mb-8">
|
||||
<p class="mb-8 text-lg">
|
||||
{{ .content | markdownify }}
|
||||
</p>
|
||||
{{ with .button }}
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
<!-- Features -->
|
||||
{{ range $i, $e:= .Params.features }}
|
||||
<section class="section-sm section-{{ add $i 1 }} {{ with .class }}{{ . }}{{ end }}">
|
||||
<section class="section section-{{ add $i 1 }} {{ with .class }}{{ . }}{{ end }}">
|
||||
<div class="container">
|
||||
<div class="row items-center justify-between">
|
||||
<div
|
||||
@ -47,7 +47,7 @@
|
||||
<h2 class="mb-4">
|
||||
{{ .title | markdownify }}
|
||||
</h2>
|
||||
<p class="mb-8 text-lg">
|
||||
<p class="mb-8 {{ if and .class (in .class "big-text") }}text-xl{{ else }}text-lg{{ end }}">
|
||||
{{ .content | markdownify }}
|
||||
</p>
|
||||
<ul>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user