champs-libres/chill_hugoplate
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

réglages

Browse Source
This commit is contained in:
Mathieu Jaumotte 2023-11-09 13:02:06 +01:00
parent 83678f8cb0
commit 64f945bb32
5 changed files with 107 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/images/svg/curve-2.svg
View File

@ -4,9 +4,9 @@
<g mask="url(&quot;#SvgjsMask1900&quot;)" fill="none" id="g2" transform="matrix(1,0,0,0.99256931,0,1.1145986)" style="display:inline"> <g mask="url(&quot;#SvgjsMask1900&quot;)" fill="none" id="g2" transform="matrix(1,0,0,0.99256931,0,1.1145986)" style="display:inline">
<path <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" 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 <path
d="M 0,7.4984182 C 279.30004,136.66106 461.78548,-19.058828 1440,16.877057 V -0.56147279 H 0 Z" 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> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 777 B

After

Width:  |  Height:  |  Size: 775 B

24
assets/images/svg/curve-4.svg Normal file
View 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(&quot;#SvgjsMask1900&quot;)"
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>
Side by Side

After

Width:  |  Height:  |  Size: 632 B

102
assets/scss/custom.scss
View File

@ -44,7 +44,7 @@ $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: -70px) {
position: relative; position: relative;
z-index: 1; z-index: 1;
&:before { &:before {
@ -52,7 +52,7 @@ $icon-yellow: #fcc958;
position: absolute; position: absolute;
width: 45px * $scale; width: 45px * $scale;
height: 45px * $scale; height: 45px * $scale;
left: -70px; left: $pos;
top: -20px; top: -20px;
background-color: $color; background-color: $color;
z-index: 0; z-index: 0;
@ -70,24 +70,24 @@ header.header {
background-color: $bg-dark-blue; background-color: $bg-dark-blue;
} }
main > section { main > section {
h2 {
width: fit-content;
}
&.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 { h1 { color: $text-green; }
color: $text-green;
}
} }
&.section-1 { &.section-1 {
li { li { font-weight: 600; }
font-weight: 600;
}
} }
&.section-2 { &.section-2 {
background-color: $bg-light-blue; background-color: transparentize($color: $text-green, $amount: 0.7)
} }
&.section-3 { &.section-3 {
background-color: $text-green; background-color: $text-green;
@include add-horizontal-curve(4, bottom);
h2 { h2 {
@include add-decorative-shape($icon-red, 'circle'); @include add-decorative-shape($icon-red, 'circle');
} }
@ -96,56 +96,79 @@ main > section {
@include add-horizontal-curve(2, bottom); @include add-horizontal-curve(2, bottom);
} }
&.section-5 { &.section-5 {
background-color: transparentize($color: $text-green, $amount: 0.7) background-color: transparentize($color: $text-green, $amount: 0.5)
} }
&.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: $bg-light-blue; background-color: $text-green;
h2 { h2 {
@include add-decorative-shape($icon-yellow); @include add-decorative-shape($icon-yellow);
} }
} }
} }
.dark > footer { .dark > footer {
margin-top: 4rem;
@include add-horizontal-curve(3, top); @include add-horizontal-curve(3, top);
&:before { &:before {
top: -70px; top: -70px;
} }
} }
section {
// Change bulletlists rendering in flex bloc // Change bulletlists rendering in flex bloc
section.section-1, &.li-block {
section.section-5, .container .row {
section.section-7 { & > div {
.container .row { &:last-child {
& > div { width: 100%;
&:last-child { }
width: 100%; h2, p {
} margin-left: auto;
h2, p { margin-right: auto;
//text-align: center; }
} ul {
ul { display: flex;
display: flex; li {
li { i:first-child {
i:first-child { display: none;
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; // Add custom colored icons on each item
//border: 1px solid #767676; &.section-1 {
border-radius: 4px; ul li {
background-color: white; &: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) // Dark context (homepage header, hero, footer)
@ -158,9 +181,16 @@ section.section-7 {
border: 1px solid $btn-orange; border: 1px solid $btn-orange;
border-radius: 2em; border-radius: 2em;
} }
}
// Dark but only in sections
section.dark {
p { p {
color: white; color: white;
font-weight: bolder; font-weight: bolder;
} }
}
.btn {
text-transform: unset;
} }

23
content/francais/_index.md
View File

@ -15,7 +15,7 @@ banner:
features: features:
- #1 - #1
class: class: section-sm li-block
image: /images/svg/curve-10.svg ## image: /images/svg/curve-10.svg ##
title: title:
content: content:
@ -30,8 +30,8 @@ features:
link: # link: #
- #2 - #2
class: class: section-sm big-text
image: /images/service-2.png image: /images/svg/curve-20.svg ##
title: title:
content: > 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.
@ -59,7 +59,7 @@ features:
link: # link: #
- #4 - #4
class: class: big-text
image: /images/bg/pattern-10.png ## image: /images/bg/pattern-10.png ##
title: title:
content: > content: >
@ -71,10 +71,11 @@ features:
link: start/user link: start/user
- #5 - #5
class: class: li-block
image: /images/svg/curve-30.svg ## image: /images/svg/curve-30.svg ##
title: title: Mais aussi...
content: 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: bulletpoints:
- "**Responsive et accessible depuis n’importe quel support informatique** (smartphone, ordinateur, tablette, etc.) afin de répondre aux enjeux de mobilité des travailleurs." - "**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." - "**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: # link: #
- #6 - #6
class: dark class: dark big-text
image: /images/service-3.png image: /images/service-3.png
title: title:
content: > 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> <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. 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> <br><br>
@ -101,8 +102,8 @@ features:
link: # link: #
- #7 - #7
class: class: li-block
image: /images/svg/curve-20.svg ## image: /images/svg/curve-40.svg ##
title: Ce qu'il faut retenir title: Ce qu'il faut retenir
content: content:
bulletpoints: bulletpoints:

6
themes/hugoplate/layouts/index.html
View File

@ -8,7 +8,7 @@
<h1 class="mb-4"> <h1 class="mb-4">
{{ .title | markdownify }} {{ .title | markdownify }}
</h1> </h1>
<p class="mb-8"> <p class="mb-8 text-lg">
{{ .content | markdownify }} {{ .content | markdownify }}
</p> </p>
{{ with .button }} {{ with .button }}
@ -31,7 +31,7 @@
<!-- Features --> <!-- Features -->
{{ range $i, $e:= .Params.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="container">
<div class="row items-center justify-between"> <div class="row items-center justify-between">
<div <div
@ -47,7 +47,7 @@
<h2 class="mb-4"> <h2 class="mb-4">
{{ .title | markdownify }} {{ .title | markdownify }}
</h2> </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 }} {{ .content | markdownify }}
</p> </p>
<ul> <ul>