suite
This commit is contained in:
parent
b2baa961ae
commit
5138027dd3
@ -1,7 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg version="1.1" width="1440" height="150" preserveAspectRatio="none" viewBox="0 0 1440 150" id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<defs id="defs2" />
|
||||
<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"
|
||||
@ -11,6 +10,3 @@
|
||||
fill="#ffffff" id="path2" transform="translate(0,-0.56147001)" />
|
||||
</g>
|
||||
</svg>
|
||||
<!--
|
||||
|
||||
-->
|
||||
|
Before Width: | Height: | Size: 796 B After Width: | Height: | Size: 777 B |
22
assets/images/svg/curve-3.svg
Normal file
22
assets/images/svg/curve-3.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
version="1.1"
|
||||
width="1440"
|
||||
height="96"
|
||||
preserveAspectRatio="none"
|
||||
viewBox="0 0 1440 96"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs3" />
|
||||
<g
|
||||
mask="url("#SvgjsMask1900")"
|
||||
fill="none"
|
||||
id="g1">
|
||||
<path
|
||||
d="M 0,0 80,5.3 C 160,11 320,21 480,32 640,43 800,53 960,53.3 1120,53 1280,43 1360,37.3 L 1440,32 V 96 H 0 Z"
|
||||
fill="#0d242e"
|
||||
id="path1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 548 B |
@ -21,14 +21,14 @@ $icon-yellow: #fcc958;
|
||||
// Pattern
|
||||
// hugo needs to precompile images in public dir, and make it automatically with images called from content.
|
||||
// here we need to use it in css, then need to generate it, calling it first from a content md file.
|
||||
@mixin apply-bgpattern-01() {
|
||||
@mixin add-bg-pattern($id) {
|
||||
background-repeat: repeat;
|
||||
background-position: top center;
|
||||
background-image: url('../images/bg/pattern-1.png');
|
||||
background-image: url('../images/bg/pattern-#{$id}.png');
|
||||
}
|
||||
|
||||
// Sections bg transitions
|
||||
@mixin curve-bottom($id) {
|
||||
@mixin add-horizontal-curve($id, $pos) {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
@ -37,26 +37,31 @@ $icon-yellow: #fcc958;
|
||||
height: 100%;
|
||||
background-image: url('../images/svg/curve-#{$id}.svg');
|
||||
background-size: contain;
|
||||
background-position: bottom center;
|
||||
background-position: $pos center;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
// Title design element, with colored circle
|
||||
@mixin circle-in-title($color) {
|
||||
// Colored design element: square or circle
|
||||
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
width: 45px * $scale;
|
||||
height: 45px * $scale;
|
||||
left: -70px;
|
||||
top: -20px;
|
||||
border-radius: 25px;
|
||||
background-color: $color;
|
||||
z-index: 0;
|
||||
@if $shape == 'circle' {
|
||||
border-radius: 25px;
|
||||
}
|
||||
@else {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,18 +72,13 @@ header.header {
|
||||
main > section {
|
||||
&.hero {
|
||||
background-color: $bg-dark-blue;
|
||||
@include apply-bgpattern-01();
|
||||
@include curve-bottom(1);
|
||||
@include add-bg-pattern(1);
|
||||
@include add-horizontal-curve(1, bottom);
|
||||
h1 {
|
||||
color: $text-green;
|
||||
}
|
||||
p {
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
&.section-1 {
|
||||
@include curve-bottom(2);
|
||||
li {
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -89,25 +89,33 @@ main > section {
|
||||
&.section-3 {
|
||||
background-color: $text-green;
|
||||
h2 {
|
||||
@include circle-in-title($icon-red);
|
||||
@include add-decorative-shape($icon-red, 'circle');
|
||||
}
|
||||
}
|
||||
&.section-4 {
|
||||
@include add-horizontal-curve(2, bottom);
|
||||
}
|
||||
&.section-5 {
|
||||
background-color: transparentize($color: $text-green, $amount: 0.7)
|
||||
}
|
||||
&.section-6 {
|
||||
background-color: $bg-dark-blue;
|
||||
@include apply-bgpattern-01();
|
||||
@include add-bg-pattern(1);
|
||||
}
|
||||
&.section-7 {
|
||||
background-color: $bg-light-blue;
|
||||
h2 {
|
||||
@include circle-in-title($icon-yellow);
|
||||
@include add-decorative-shape($icon-yellow);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark > footer {
|
||||
@include add-horizontal-curve(3, top);
|
||||
&:before {
|
||||
top: -70px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Change bulletlists rendering in flex bloc
|
||||
section.section-1,
|
||||
@ -150,4 +158,9 @@ section.section-7 {
|
||||
border: 1px solid $btn-orange;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
p {
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
@ -15,7 +15,7 @@ logo_height = "32px"
|
||||
logo_webp = true
|
||||
|
||||
# logo text will only show when logo is missing.
|
||||
logo_text = "Hugoplate"
|
||||
logo_text = "CHILL logo"
|
||||
|
||||
# navbar fixed to top
|
||||
navbar_fixed = false
|
||||
@ -40,6 +40,7 @@ custom_script = ""
|
||||
|
||||
# copyright
|
||||
copyright = "Designed & Developed by [Zeon Studio](https://zeon.studio)"
|
||||
#copyright = "Designed & Developed by [Yellow Studio]() and [Champs Libres]()"
|
||||
|
||||
# Preloader
|
||||
# preloader module: https://github.com/gethugothemes/hugo-modules/tree/master/components/preloader
|
||||
|
||||
@ -5,7 +5,7 @@ banner:
|
||||
image: /images/banner.png
|
||||
title: Le compagnon du travailleur social
|
||||
content: >
|
||||
CHILL est une application web open source, un logiciel métier dédié à l'accompagnement des personnes, pour améliorer et faciliter le travail social.
|
||||
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.
|
||||
bulletpoints:
|
||||
button:
|
||||
enable: true
|
||||
@ -16,7 +16,7 @@ features:
|
||||
|
||||
- #1
|
||||
class:
|
||||
image: /images/svg/curve-10.svg
|
||||
image: /images/svg/curve-10.svg ##
|
||||
title:
|
||||
content:
|
||||
bulletpoints:
|
||||
@ -60,7 +60,7 @@ features:
|
||||
|
||||
- #4
|
||||
class:
|
||||
image: /images/service-3.png
|
||||
image: /images/bg/pattern-10.png ##
|
||||
title:
|
||||
content: >
|
||||
Via les divers supports et manuels pédagogiques mis à disposition, CHILL permet l’autonomie des utilisateurs et des administrateurs, que ce soit pour l'utiliser ou pour le configurer.
|
||||
@ -71,8 +71,8 @@ features:
|
||||
link: start/user
|
||||
|
||||
- #5
|
||||
class: dark
|
||||
image: /images/svg/curve-20.svg
|
||||
class:
|
||||
image: /images/svg/curve-30.svg ##
|
||||
title:
|
||||
content:
|
||||
bulletpoints:
|
||||
@ -86,7 +86,7 @@ features:
|
||||
link: #
|
||||
|
||||
- #6
|
||||
class:
|
||||
class: dark
|
||||
image: /images/service-3.png
|
||||
title:
|
||||
content: >
|
||||
@ -102,7 +102,7 @@ features:
|
||||
|
||||
- #7
|
||||
class:
|
||||
image: /images/service-00.png
|
||||
image: /images/svg/curve-20.svg ##
|
||||
title: Ce qu'il faut retenir
|
||||
content:
|
||||
bulletpoints:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user