You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
1.4 KiB
SCSS
82 lines
1.4 KiB
SCSS
///
|
|
/// Atmosphere by Pixelarity
|
|
/// pixelarity.com | hello@pixelarity.com
|
|
/// License: pixelarity.com/license
|
|
///
|
|
|
|
/* Spotlights */
|
|
|
|
.spotlights {
|
|
@include vendor('display', 'flex');
|
|
@include vendor('flex-wrap', 'wrap');
|
|
@include vendor('justify-content', 'center');
|
|
margin-bottom: (_size(element-margin) * 2);
|
|
|
|
article {
|
|
@include padding(3.5em, 4em);
|
|
box-shadow: 0 1em 5em rgba(#000, 0.05);
|
|
margin-bottom: (_size(element-margin) * 1.5);
|
|
width: 48%;
|
|
|
|
&:nth-child(even) {
|
|
margin-left: 4%;
|
|
}
|
|
|
|
header.major {
|
|
&:after {
|
|
margin-left: -4em;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=medium') {
|
|
article {
|
|
@include padding(2em, 2em);
|
|
width: 100%;
|
|
|
|
&:nth-child(even) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
header.major {
|
|
&:after {
|
|
margin-left: -2em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=small') {
|
|
margin-bottom: _size(element-margin);
|
|
}
|
|
|
|
@include breakpoint('<=xsmall') {
|
|
article {
|
|
@include padding(1.5em, 1.5em);
|
|
|
|
header.major {
|
|
&:after {
|
|
margin-left: -1.5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin color-spotlights($p: null) {
|
|
$highlight: _palette($p, highlight);
|
|
|
|
.spotlights {
|
|
article {
|
|
@if $p == $highlight {
|
|
background-color: _palette($p, border-bg);
|
|
}
|
|
@else {
|
|
background-color: _palette($highlight, fg-bold);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include color-spotlights;
|