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