You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
3.0 KiB
153 lines
3.0 KiB
/* ==========================================================================
|
|
Helpers and Utility Classes
|
|
========================================================================== */
|
|
|
|
.wrap {
|
|
@include outer-container;
|
|
}
|
|
|
|
.come-in {
|
|
@include transform(translateY(20px));
|
|
@include animation(pop 0.5s ease forwards);
|
|
}
|
|
|
|
.already-visible {
|
|
@include transform(translateY(0));
|
|
@include animation(none);
|
|
}
|
|
|
|
/*
|
|
Hide
|
|
========================================================================== */
|
|
|
|
.hidden,
|
|
.load {
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
No scrollbars
|
|
========================================================================== */
|
|
|
|
.no-scroll {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
Inline button(s) wrapper
|
|
========================================================================== */
|
|
|
|
.inline-btn {
|
|
@include clearfix;
|
|
a, btn {
|
|
display: inline-block;
|
|
margin-right: $gutter / 2;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
Shorten measure of text to improve readability
|
|
========================================================================== */
|
|
|
|
@include media($medium) {
|
|
.shorten {
|
|
width: percentage(8/12);
|
|
}
|
|
}
|
|
|
|
/*
|
|
Center align text
|
|
========================================================================== */
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
/*
|
|
Align image to the right
|
|
========================================================================== */
|
|
|
|
.image-right {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
@include media($medium) {
|
|
float: right;
|
|
margin-left: $gutter;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Thumbnail grid (default)
|
|
========================================================================== */
|
|
|
|
.th-grid {
|
|
@include row($direction: LTR);
|
|
@include clearfix;
|
|
margin: 0;
|
|
padding: 0;
|
|
li {
|
|
list-style: none;
|
|
@include span-columns(3);
|
|
@include omega(4n);
|
|
margin-bottom: flex-gutter($grid-columns);
|
|
}
|
|
a {
|
|
img {
|
|
// Image hover animation
|
|
&:hover {
|
|
@include animation(pop .3s 0 linear);
|
|
box-shadow: 0 0 10px rgba($black, .20);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
Thumbnail grid (oversized)
|
|
========================================================================== */
|
|
|
|
.th-grid-full {
|
|
@include clearfix;
|
|
margin: 0;
|
|
padding: 0;
|
|
@include media($large) {
|
|
margin-right: -29em; // magic number ugh
|
|
}
|
|
@at-root {
|
|
.archive-wrap & {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
li {
|
|
list-style: none;
|
|
margin-bottom: flex-gutter($grid-columns);
|
|
@include media($micro) {
|
|
@include span-columns(3);
|
|
@include omega(4n);
|
|
}
|
|
@media screen and (min-width: em(480)) and (max-width: em(999)) {
|
|
@include span-columns(3);
|
|
@include omega(4n);
|
|
}
|
|
@include media($large) {
|
|
float: left;
|
|
width: 6.575em;
|
|
margin-right: .25em; // magic number ugh
|
|
margin-bottom: .25em; // magic number ugh
|
|
@include omega(9n);
|
|
}
|
|
}
|
|
a {
|
|
img {
|
|
// Image hover animation
|
|
&:hover {
|
|
@include animation(pop .3s 0 linear);
|
|
box-shadow: 0 0 10px rgba($black, .20);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|