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
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1 , $pos: -70px) {
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1) {
position: relative;
z-index: 1;
&:before {
content: '';
position: absolute;
width: 45px * $scale;
width: 45px * $scale;
height: 45px * $scale;
left: $pos;
top: -20px;
left: 50%;
top: -7%;
margin-left: -14px;
background-color: $color;
z-index: 0;
@if $shape == 'circle' {
@ -165,16 +166,16 @@ section {
font-weight: 500;
font-size: large;
&: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) {
@include add-decorative-shape($icon-red, 'circle', 0.7, 105px);
@include add-decorative-shape($icon-red, 'circle', 0.7);
}
&: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) {
@include add-decorative-shape($icon-yellow, 'circle', 0.7, 105px);
@include add-decorative-shape($icon-yellow, 'circle', 0.7);
}
}
}