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

Center icons in section 2

Browse Source
This commit is contained in:
Julie Lenaerts 2023-12-20 14:34:03 +01:00
parent 4fce93b16e
commit f751734121
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/scss/custom.scss
View File

@ -42,16 +42,17 @@ $icon-yellow: #fcc958;
} }
// Colored design element: square or circle // Colored design element: square or circle
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1 , $pos: -70px) { @mixin add-decorative-shape($color, $shape: 'square', $scale: 1) {
position: relative; position: relative;
z-index: 1; z-index: 1;
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
width: 45px * $scale; width: 45px * $scale;
height: 45px * $scale; height: 45px * $scale;
left: $pos; left: 50%;
top: -20px; top: -7%;
margin-left: -14px;
background-color: $color; background-color: $color;
z-index: 0; z-index: 0;
@if $shape == 'circle' { @if $shape == 'circle' {
@ -165,16 +166,16 @@ section {
font-weight: 500; font-weight: 500;
font-size: large; font-size: large;
&:nth-child(1) { &:nth-child(1) {
@include add-decorative-shape($text-green, 'square', 0.7, 105px); @include add-decorative-shape($text-green, 'square', 0.7);
} }
&:nth-child(2) { &:nth-child(2) {
@include add-decorative-shape($icon-red, 'circle', 0.7, 105px); @include add-decorative-shape($icon-red, 'circle', 0.7);
} }
&:nth-child(3) { &:nth-child(3) {
@include add-decorative-shape($chill-orange, 'square', 0.7, 105px); @include add-decorative-shape($chill-orange, 'square', 0.7);
} }
&:nth-child(4) { &:nth-child(4) {
@include add-decorative-shape($icon-yellow, 'circle', 0.7, 105px); @include add-decorative-shape($icon-yellow, 'circle', 0.7);
} }
} }
} }