133 lines
2.7 KiB
SCSS
133 lines
2.7 KiB
SCSS
|
// Rem output with px fallback
|
||
|
|
@mixin font-size($sizeValue: 1) {
|
||
|
|
font-size: ($sizeValue * 16) * 1px;
|
||
|
|
font-size: $sizeValue * 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Center block
|
||
|
|
@mixin center-block {
|
||
|
|
display: block;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Clearfix
|
||
|
|
@mixin clearfix() {
|
||
|
|
content: "";
|
||
|
|
display: table;
|
||
|
|
table-layout: fixed;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Clear after (not all clearfix need this also)
|
||
|
|
@mixin clearfix-after() {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Column width with margin
|
||
|
|
@mixin column-width($numberColumns: 3) {
|
||
|
|
width: map-get($columns, $numberColumns) - (($columns__margin * ($numberColumns - 1)) / $numberColumns);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin filter-duotone {
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
background: $color__link;
|
||
|
|
mix-blend-mode: screen;
|
||
|
|
opacity: 0.1;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:after {
|
||
|
|
background: $color__link;
|
||
|
|
mix-blend-mode: multiply;
|
||
|
|
opacity: .8;
|
||
|
|
z-index: 3;
|
||
|
|
|
||
|
|
/* Browsers supporting mix-blend-mode don't need opacity < 1 */
|
||
|
|
@supports (mix-blend-mode: multiply) {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin filter-grayscale {
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
filter: grayscale(100%);
|
||
|
|
z-index: 1;
|
||
|
|
|
||
|
|
&:after {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin post-section-dash {
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
background: $color__text-light;
|
||
|
|
content: "\020";
|
||
|
|
display: block;
|
||
|
|
height: 2px;
|
||
|
|
margin: $size__spacing-unit 0;
|
||
|
|
width: 1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
|
||
|
|
* since its edges can look jagged due to lack of antialiasing. In this case, we are several
|
||
|
|
* layers of box-shadow to add the border visually, which will render the border smoother. */
|
||
|
|
|
||
|
|
@mixin box-shadow( $size ) {
|
||
|
|
box-shadow:
|
||
|
|
0 0 0 $size $color__text-light inset, // Original border.
|
||
|
|
0 0 0 ($size + 1px) $color__text-light inset, // Antialiasing, inner edge.
|
||
|
|
0 0 1px 0 rgba( $color__text-light, 0.7 ); // Antialiasing, outer edge.
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Calculates maximum width for post content */
|
||
|
|
@mixin postContentMaxWidth() {
|
||
|
|
|
||
|
|
@include media(tablet) {
|
||
|
|
max-width: $size__site-tablet-content;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include media(desktop) {
|
||
|
|
max-width: $size__site-desktop-content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Nested sub-menu padding: 10 levels deep */
|
||
|
|
@mixin nestedSubMenuPadding() {
|
||
|
|
|
||
|
|
ul {
|
||
|
|
counter-reset: submenu;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul > li > a::before {
|
||
|
|
font-family: $font__body;
|
||
|
|
font-weight: normal;
|
||
|
|
content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
|
||
|
|
counter-increment: submenu
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Ensure all font family declarations come with non-latin fallbacks */
|
||
|
|
@mixin font-family( $font_family: $font__body ) {
|
||
|
|
font-family: $font_family;
|
||
|
|
@extend %non-latin-fonts;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Build our non-latin font styles */
|
||
|
|
%non-latin-fonts {
|
||
|
|
@each $lang, $font__fallback in $font__fallbacks {
|
||
|
|
&:lang(#{$lang}) {
|
||
|
|
font-family: unquote( $font__fallback );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@import "utilities";
|