diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index 1ba222e..dde207d 100755 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -22,7 +22,7 @@ $icon-yellow: #fcc958; @mixin add-bg-pattern($id) { background-repeat: repeat; background-position: top center; - background-image: url('/images/bg/pattern-#{$id}.png'); + background-image: url('/images/bg/pattern-#{$id}.png'); } // Sections bg transitions @@ -31,7 +31,7 @@ $icon-yellow: #fcc958; &:before { content: ''; position: absolute; - width: 100%; + width: 100%; height: 100%; background-image: url('/images/svg/curve-#{$id}.svg'); background-size: contain; @@ -42,21 +42,21 @@ $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-top: -35%, $pos-left: 50%) { position: relative; z-index: 1; &:before { content: ''; position: absolute; - width: 45px * $scale; - height: 45px * $scale; - left: 50%; - top: -7%; - margin-left: -14px; + width: 100px * $scale; + height: 100px * $scale; + left: $pos-left; + top: $pos-top; + margin-left: -35px; background-color: $color; z-index: 0; @if $shape == 'circle' { - border-radius: 25px; + border-radius: 35px; } @else { border-radius: 0; @@ -71,9 +71,13 @@ header.header { main > section { &.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; } + #curve-1 { + position: absolute; + bottom: 0; + } } &.section-1 { li { font-weight: 600; } @@ -85,7 +89,7 @@ main > section { background-color: $text-green; //@include add-horizontal-curve(4, bottom); h2 { - @include add-decorative-shape($icon-red, 'circle'); + @include add-decorative-shape($icon-red, 'circle', .7, -30%, -10%); } } &.section-4 { @@ -96,12 +100,12 @@ main > section { } &.section-6 { background-color: $bg-dark-blue; - @include add-bg-pattern(1); + @include add-bg-pattern(1); } &.section-7 { background-color: $text-green; h2 { - @include add-decorative-shape($icon-yellow); + @include add-decorative-shape($icon-yellow, 'square', .7, -30%, -15%); } } } @@ -109,11 +113,14 @@ main > section { margin-top: 4rem; @include add-horizontal-curve(3, top); &:before { - top: -70px; + top: -100px; } } section { + h2.title { + color: #0c362d; + } // Centered text &.big-text, &.li-block { @@ -121,7 +128,7 @@ section { width: fit-content; margin-left: auto; margin-right: auto; - } + } } &.big-text { .container .row { @@ -153,13 +160,13 @@ section { margin: 0.5em; padding: 1.5em; text-align: center; - border-radius: 4px; + border-radius: 4px; background-color: #ffffff3b; } } - } + } } - // Add custom colored icons on each item + // Add custom colored icons on each item &.section-1 { //text-transform: uppercase; ul li { @@ -178,7 +185,11 @@ section { @include add-decorative-shape($icon-yellow, 'circle', 0.7); } } - } + } + // button styling + a.btn-chill { + background-color: #fc3636; + } } } @@ -213,7 +224,7 @@ main > section { &.page-hero { background-color: $bg-dark-blue; @include add-bg-pattern(1); - @include add-horizontal-curve(1, bottom); + @include add-horizontal-curve(1, bottom); h1 { color: $text-green; } } } @@ -237,12 +248,12 @@ figure.image { margin-left: 1.5em; } &.center { - display: flex; - justify-content: center; + display: flex; + justify-content: center; align-items: center; } img { margin-bottom: 0; } figcaption {} -} \ No newline at end of file +} diff --git a/content/francais/_index.md b/content/francais/_index.md index 8108845..086a472 100755 --- a/content/francais/_index.md +++ b/content/francais/_index.md @@ -15,7 +15,7 @@ banner: features: - #1 - class: section-sm li-block + class: section-md li-block image: /images/svg/curve-10.svg ## title: content: @@ -32,9 +32,9 @@ features: - #2 class: section-sm big-text image: /images/svg/curve-20.svg ## - title: + 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. 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: button: enable: false @@ -73,8 +73,8 @@ features: - #5 class: li-block image: /images/svg/curve-30.svg ## - title: #Mais aussi... - content: texte #CHILL est un logiciel professionnel conçu selon les standards de développement actuels. + title: Mais aussi... + content: #CHILL est un logiciel professionnel conçu selon les standards de développement actuels. bulletpoints: -
+
{{ .content | markdownify }}