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