183 lines
3.1 KiB
SCSS
183 lines
3.1 KiB
SCSS
///
|
|
/// Forty by HTML5 UP
|
|
/// html5up.net | @ajlkn
|
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
///
|
|
|
|
/* Tiles */
|
|
|
|
.tiles {
|
|
@include vendor('display', 'flex');
|
|
@include vendor('flex-wrap', 'wrap');
|
|
border-top: 0 !important;
|
|
|
|
& + * {
|
|
border-top: 0 !important;
|
|
}
|
|
|
|
article {
|
|
@include vendor('align-items', 'center');
|
|
@include vendor('display', 'flex');
|
|
@include vendor('transition', (
|
|
'transform 0.25s ease',
|
|
'opacity 0.25s ease',
|
|
'filter 1s ease',
|
|
'-webkit-filter 1s ease'
|
|
));
|
|
@include padding(4em, 4em);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
cursor: default;
|
|
height: 40vh;
|
|
max-height: 40em;
|
|
min-height: 23em;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 40%;
|
|
|
|
.image {
|
|
display: none;
|
|
}
|
|
|
|
header {
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.75em;
|
|
|
|
a {
|
|
&:hover {
|
|
color: inherit !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.link.primary {
|
|
border: 0;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 4;
|
|
}
|
|
|
|
&:before {
|
|
@include vendor('transition', 'opacity 0.5s ease');
|
|
bottom: 0;
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
opacity: 0.85;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
&:after {
|
|
background-color: transparentize(_palette(bg), 0.75);
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
&:hover {
|
|
&:before {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&.is-transitioning {
|
|
@include vendor('transform', 'scale(0.95)');
|
|
@include vendor('filter', 'blur(0.5em)');
|
|
opacity: 0;
|
|
}
|
|
|
|
&:nth-child(4n - 1),
|
|
&:nth-child(4n - 2) {
|
|
width: 60%;
|
|
}
|
|
|
|
&:nth-child(6n - 5) {
|
|
&:before {
|
|
background-color: _palette(accent1);
|
|
}
|
|
}
|
|
|
|
&:nth-child(6n - 4) {
|
|
&:before {
|
|
background-color: _palette(accent2);
|
|
}
|
|
}
|
|
|
|
&:nth-child(6n - 3) {
|
|
&:before {
|
|
background-color: _palette(accent3);
|
|
}
|
|
}
|
|
|
|
&:nth-child(6n - 2) {
|
|
&:before {
|
|
background-color: _palette(accent4);
|
|
}
|
|
}
|
|
|
|
&:nth-child(6n - 1) {
|
|
&:before {
|
|
background-color: _palette(accent5);
|
|
}
|
|
}
|
|
|
|
&:nth-child(6n) {
|
|
&:before {
|
|
background-color: _palette(accent6);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint(large) {
|
|
article {
|
|
@include padding(4em, 3em);
|
|
height: 30vh;
|
|
max-height: 30em;
|
|
min-height: 20em;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(medium) {
|
|
article {
|
|
width: 50% !important;
|
|
}
|
|
}
|
|
|
|
@include breakpoint(small) {
|
|
article {
|
|
@include padding(3em, 1.5em);
|
|
height: 16em;
|
|
max-height: none;
|
|
min-height: 0;
|
|
|
|
h3 {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint(xsmall) {
|
|
display: block;
|
|
|
|
article {
|
|
height: 20em;
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
} |