Add flexibility to end tiles
This commit is contained in:
Andrew Banchich
parent
548b8385f2
commit
10a9b45f6e
|
|
@ -1,183 +1,183 @@
|
|||
///
|
||||
/// 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;
|
||||
}
|
||||
}
|
||||
///
|
||||
/// 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) {
|
||||
flex: 1 auto;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue