spaCy/website/assets/css/_components/_asides.sass

42 lines
883 B
Sass

//- 💫 CSS > COMPONENTS > ASIDES
//- Aside container
.c-aside
position: relative
//- Aside content
.c-aside__content
background: $color-front
z-index: 10
@include breakpoint(min, md)
@include position(absolute, top, left, -3rem, calc(100% + 5.5rem))
width: calc(#{$aside-width} + 2rem)
// Banner effect
&:after
$triangle-size: 2rem
@include position(absolute, bottom, left, -$triangle-size / 2, 0)
@include size(0)
border-color: transparent
border-style: solid
border-top-color: $color-dark
border-width: $triangle-size / 2 0 0 $triangle-size
content: ""
@include breakpoint(max, sm)
display: block
margin: 2rem 0
//- Aside text
.c-aside__text
color: $color-back
padding: 1.5rem 2.5rem 3rem 2rem