This repository has been archived on 2023-02-03. You can view files and clone it, but cannot push or open issues or pull requests.
autonomic.zone/src/assets/styles/components/_spotlight.scss

72 lines
1.0 KiB
SCSS
Raw Normal View History

/* Spotlight */
.spotlight {
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
.image {
@include vendor('order', '1');
border-radius: 0;
width: 40%;
img {
border-radius: 0;
width: 100%;
}
}
.content {
@include padding(2em, 4em);
@include vendor('order', '2');
max-width: 48em;
width: 60%;
}
&:nth-child(2n) {
@include vendor('flex-direction', 'row-reverse');
}
@for $i from 1 through _misc(max-spotlights) {
$j: 0.075 * $i;
&:nth-child(#{$i}) {
background-color: rgba(0,0,0, $j);
}
}
@include breakpoint(large) {
.image {
width: 45%;
}
.content {
width: 55%;
}
}
@include breakpoint(medium) {
display: block;
br {
display: none;
}
.image {
width: 100%;
}
.content {
@include padding(4em, 3em);
max-width: none;
text-align: center;
width: 100%;
}
}
@include breakpoint(small) {
.content {
@include padding(3em, 2em);
}
}
}