forked from mirror/_s
add typography mixins, google fonts helper
This commit is contained in:
parent
2adfce302f
commit
a833f5bf94
|
@ -139,6 +139,24 @@ function _s_widgets_init() {
|
||||||
}
|
}
|
||||||
add_action( 'widgets_init', '_s_widgets_init' );
|
add_action( 'widgets_init', '_s_widgets_init' );
|
||||||
|
|
||||||
|
function google_fonts() {
|
||||||
|
$google_fonts = apply_filters(
|
||||||
|
'storefront_google_font_families', array(
|
||||||
|
// 'source-sans-pro' => 'Source+Sans+Pro:400,300,300italic,400italic,600,700,900',
|
||||||
|
'montserrat' => 'Montserrat:400,600',
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
$query_args = array(
|
||||||
|
'family' => implode( '|', $google_fonts ),
|
||||||
|
'subset' => rawurlencode( 'latin,latin-ext' ),
|
||||||
|
);
|
||||||
|
|
||||||
|
$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
|
||||||
|
|
||||||
|
return $fonts_url;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Enqueue scripts and styles.
|
* Enqueue scripts and styles.
|
||||||
*/
|
*/
|
||||||
|
@ -146,6 +164,8 @@ function _s_scripts() {
|
||||||
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), _S_VERSION );
|
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), _S_VERSION );
|
||||||
wp_style_add_data( '_s-style', 'rtl', 'replace' );
|
wp_style_add_data( '_s-style', 'rtl', 'replace' );
|
||||||
|
|
||||||
|
wp_enqueue_style( '_s-google-fonts', google_fonts(), array(), null );
|
||||||
|
|
||||||
wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
|
wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
|
||||||
|
|
||||||
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
|
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
|
||||||
|
|
|
@ -1,3 +1,40 @@
|
||||||
|
@mixin font-1($weight) {
|
||||||
|
// see functions.php->google_fonts()
|
||||||
|
// and functions.php->_s_scripts()
|
||||||
|
font-family: "Montserrat", sans-serif;
|
||||||
|
@if $weight == regular {
|
||||||
|
font-weight: 400;
|
||||||
|
} @else if $weight == bold {
|
||||||
|
font-weight: 600;
|
||||||
|
} @else if $weight == extra-bold {
|
||||||
|
font-weight: 700;
|
||||||
|
} @else {
|
||||||
|
@error "font-weight #{$weight} not in valid font-weights for font-1: 'Montserrat'.";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin font-body($weight: regular) {
|
||||||
|
@include font-1($weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin font-title($weight: regular) {
|
||||||
|
@include font-1($weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin font-link($weight: regular) {
|
||||||
|
@include font-1($weight);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin font-code($weight: regular) {
|
||||||
|
font-family: $font-code;
|
||||||
|
font-weight: $weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin font-pre($weight: regular) {
|
||||||
|
font-family: $font-pre;
|
||||||
|
font-weight: $weight;
|
||||||
|
}
|
||||||
|
|
||||||
// Center block
|
// Center block
|
||||||
@mixin center-block {
|
@mixin center-block {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -7,5 +44,6 @@
|
||||||
|
|
||||||
// Column width with margin
|
// Column width with margin
|
||||||
@mixin column-width($numberColumns: 3) {
|
@mixin column-width($numberColumns: 3) {
|
||||||
width: map-get($columns, $numberColumns) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns );
|
width: map-get($columns, $numberColumns) -
|
||||||
|
(($columns__margin * ($numberColumns - 1)) / $numberColumns);
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@ select,
|
||||||
optgroup,
|
optgroup,
|
||||||
textarea {
|
textarea {
|
||||||
color: $color__text-main;
|
color: $color__text-main;
|
||||||
font-family: $font__main;
|
@include font-body;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: $font__line-height-body;
|
line-height: $font__line-height-body;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
// stylelint-disable value-keyword-case
|
// stylelint-disable value-keyword-case
|
||||||
$font__main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
$font__main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
|
||||||
|
Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
// stylelint-enable value-keyword-case
|
// stylelint-enable value-keyword-case
|
||||||
$font__code: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
|
$font__code: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
|
||||||
$font__pre: "Courier 10 Pitch", courier, monospace;
|
$font__pre: "Courier 10 Pitch", courier, monospace;
|
||||||
|
|
Reference in New Issue