champs-libres/chill_hugoplate
6
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Make adjustments to the homepage. Curved shapes for each section still posing a problem

Browse Source
This commit is contained in:
Julie Lenaerts
2023-12-20 16:18:25 +01:00
parent f751734121
commit bd7ccaf5c8
5 changed files with 45 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
assets/scss/custom.scss
View File

@@ -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 {}
}
}