devol.it/assets/sass/components/_tiles.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;
}
}
}