champs-libres/chill_hugoplate
6
0
Fork 0
Code Issues 1 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
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">
<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>
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
@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;
}