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

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;
}