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

work on styling

Browse Source
This commit is contained in:
Julie Lenaerts 2024-01-17 08:58:19 +01:00
parent dc48f5fd43
commit 7ea0d95b66
6 changed files with 57 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
assets/scss/custom.scss
View File

@ -42,7 +42,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, $pos-top: -35%, $pos-left: 50%) { @mixin add-decorative-shape($color, $shape: 'square', $scale: 1, $pos-top: -60%, $pos-left: 47%) {
position: relative; position: relative;
z-index: 1; z-index: 1;
&:before { &:before {
@ -56,7 +56,7 @@ $icon-yellow: #fcc958;
background-color: $color; background-color: $color;
z-index: 0; z-index: 0;
@if $shape == 'circle' { @if $shape == 'circle' {
border-radius: 35px; border-radius: 50px;
} }
@else { @else {
border-radius: 0; border-radius: 0;
@ -70,20 +70,25 @@ header.header {
} }
main > section { main > section {
&.hero { &.hero {
background-color: $bg-dark-blue; height: 84vh;
//@include add-bg-pattern(1); background-color: $bg-dark-blue;
//@include add-horizontal-curve(1, bottom); //@include add-bg-pattern(1);
h1 { color: $text-green; }
#curve-1 { h1 { color: $text-green; }
position: absolute; .hero-img {
bottom: 0; padding-top: 3rem;
} }
} }
&.section-1 { &.section-1 {
padding-top: 27rem;
li { font-weight: 600; } li { font-weight: 600; }
} }
&.section-2 { &.section-2 {
background-color: transparentize($color: $text-green, $amount: 0.7) .container {
color: $bg-dark-blue;
text-align: center;
}
background-color: transparentize($color: $text-green, $amount: 0.7)
} }
&.section-3 { &.section-3 {
background-color: $text-green; background-color: $text-green;
@ -109,9 +114,20 @@ main > section {
} }
} }
} }
.hero-relative {
position: relative;
}
.curve {
position: absolute;
top: 500px;
z-index: -1;
}
.dark > footer { .dark > footer {
margin-top: 4rem; margin-top: 4rem;
@include add-horizontal-curve(3, top); //@include add-horizontal-curve(3, top);
&:before { &:before {
top: -100px; top: -100px;
} }
@ -157,10 +173,10 @@ section {
display: none; display: none;
} }
flex: 1 0 0; flex: 1 0 0;
margin: 0.5em; margin: 0.5em 2rem 0.5em 2rem;
padding: 1.5em; padding: 2.5em 1em 1em 1em;
text-align: center; text-align: center;
border-radius: 4px; border-radius: 20px;
background-color: #ffffff3b; background-color: #ffffff3b;
} }
} }
@ -173,16 +189,19 @@ section {
font-weight: 500; font-weight: 500;
font-size: large; font-size: large;
&:nth-child(1) { &: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) { &:nth-child(2) {
@include add-decorative-shape($icon-red, 'circle', 0.7); @include add-decorative-shape($icon-red, 'circle', 1);
} }
&:nth-child(3) { &:nth-child(3) {
@include add-decorative-shape($chill-orange, 'square', 0.7); @include add-decorative-shape($chill-orange, 'square', 1);
} }
&:nth-child(4) { &: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 { 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; }
} }
} }

2
content/english/_index.md
View File

@ -3,7 +3,7 @@
banner: banner:
title: "The software partner for social professionals" 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." 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: button:
enable: true enable: true
label: "Try the demo" label: "Try the demo"

12
content/francais/_index.md
View File

@ -2,10 +2,10 @@
banner: banner:
class: dark class: dark
image: /images/banner.png image: /images/illustrations/hero-image.png
title: Le compagnon du travailleur social title: Le compagnon du travailleur social
content: > 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: bulletpoints:
button: button:
enable: true enable: true
@ -32,7 +32,7 @@ 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: 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: > 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: bulletpoints:
@ -43,7 +43,7 @@ features:
- #3 - #3
class: class:
image: /images/service-1.png image: /images/illustrations/efficient.png
title: Efficace, efficient et intuitif title: Efficace, efficient et intuitif
content: "Parmi ses fonctionnalités les plus appréciées, il vous permet en quelques clics :" content: "Parmi ses fonctionnalités les plus appréciées, il vous permet en quelques clics :"
bulletpoints: bulletpoints:
@ -76,8 +76,8 @@ features:
title: Mais aussi... title: Mais aussi...
content: #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 n’importe 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</h4> Chill répond 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'>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'>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. - <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: button:

6
static/images/svg/curve-1.svg
View File

@ -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"> <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>
<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>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 405 B

After

Width:  |  Height:  |  Size: 720 B

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

@ -20,13 +20,16 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>
<div class="col-12"> <div class="hero-img col-12">
{{ partial "image" (dict "Src" .image "Alt" "Banner image" "Loading" "eager" "Class" "mx-auto" "Size" "800x") }} {{ partial "image" (dict "Src" .image "Alt" "Banner image" "Loading" "eager" "Class" "mx-auto" "Size" "400x") }}
</div> </div>
</div> </div>
</div> </div>
</section> </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 --> <!-- /Banner -->
<!-- Features --> <!-- Features -->

12
themes/hugoplate/layouts/partials/page-header.html
View File

@ -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="container text-center">
<div class="px-8 py-14 dark:from-darkmode-body dark:to-darkmode-theme-light"> <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 --> <!-- bg-gradient-to-b from-body to-theme-light rounded-2xl -->
<h1>{{ .Title }}</h1><!-- | title --> <h1>{{ .Title }}</h1><!-- | title -->
{{ partial "components/breadcrumb" (dict "Context" . "Class" "mt-6") }} {{ partial "components/breadcrumb" (dict "Context" . "Class" "mt-6") }}
</div> </div>
<!--
{{ $image:= .Params.image }}
{{ if $image }}
<div class="mb-10">
{{ partial "image" (dict "Src" $image "Alt" .Title "Class" "w-full rounded") }}
</div>
{{ end }}
-->
</div> </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> </section>