Typesetter/themes/Bootstrap4/_common/customizer_common_typography.scss
2021-09-08 19:52:21 +02:00

455 lines
15 KiB
SCSS

// Theme Bootstrap 4
//
// common stylesheet for typography
// this file needs to be imported by customizer.scss
//
$default_font_sans: $font-family-base !default; // Bootstrap default, see variables.scss
$default_font_serif: Georgia, 'Times New Roman', Times, serif !default;
$header_brand_font_family: default_sans !default;
$header_brand_font_size: 1.25rem !default;
$header_brand_font_weight: 400 !default;
$header_brand_uppercase: off !default;
$header_brand_letter_spacing: 0em !default;
$main_menu_font_family: default_sans !default;
$main_menu_font_size: 1rem !default;
$main_menu_font_weight: 400 !default;
$main_menu_uppercase: off !default;
$main_menu_letter_spacing: 0em !default;
$search_field_font_family: default_sans !default;
$search_field_font_size: 1rem !default;
$search_field_font_weight: 400 !default;
$complementary_header_font_family: default_sans !default;
$complementary_header_font_size: 1rem !default;
$complementary_header_font_weight: 400 !default;
$content_font_family: default_sans !default;
$content_font_size: 1rem !default;
$content_font_weight: 400 !default;
$sidebar_font_family: default_sans !default;
$sidebar_font_size: 1rem !default;
$sidebar_font_weight: 400 !default;
$sidebar_headings_font_family: default_sans !default;
$sidebar_headings_font_weight: 500 !default;
$sidebar_headings_uppercase: off !default;
$sidebar_headings_letter_spacing: 0em !default;
$footer_font_family: default_sans !default;
$footer_font_size: 1rem !default;
$footer_font_weight: 400 !default;
$footer_headings_font_family: default_sans !default;
$footer_headings_font_weight: 500 !default;
$footer_headings_uppercase: off !default;
$footer_headings_letter_spacing: 0em !default;
$h1_font_size: 2.5rem !default;
$h1_font_family: default_sans !default;
$h1_font_weight: 500 !default;
$h1_uppercase: off !default;
$h1_letter_spacing: 0em !default;
$h2_font_size: 2rem !default;
$h2_font_family: default_sans !default;
$h2_font_weight: 500 !default;
$h2_uppercase: off !default;
$h2_letter_spacing: 0em !default;
$h3_font_size: 1.75rem !default;
$h3_font_family: default_sans !default;
$h3_font_weight: 500 !default;
$h3_uppercase: off !default;
$h3_letter_spacing: 0em !default;
$h4_font_size: 1.5rem !default;
$h4_font_family: default_sans !default;
$h4_font_weight: 500 !default;
$h4_uppercase: off !default;
$h4_letter_spacing: 0em !default;
$h5_font_size: 1.25rem !default;
$h5_font_family: default_sans !default;
$h5_font_weight: 500 !default;
$h5_uppercase: off !default;
$h5_letter_spacing: 0em !default;
$h6_font_size: 1rem !default;
$h6_font_family: default_sans !default;
$h6_font_weight: 500 !default;
$h6_uppercase: off !default;
$h6_letter_spacing: 0em !default;
$web_font_names: (
// sans-serif
'alegreya_sans': 'Alegreya Sans',
'fira_sans': 'Fira Sans',
'inter': 'Inter',
'montserrat': 'Montserrat',
'nunito': 'Nunito',
'open_sans': 'Open Sans',
'raleway': 'Raleway',
'roboto': 'Roboto',
'source_sans_pro': 'Source Sans Pro',
'ubuntu': 'Ubuntu',
'work_sans': 'Work Sans',
// serif
'alegreya': 'Alegreya',
'bitter': 'Bitter',
'cinzel': 'Cinzel',
'cinzel_decorative': 'Cinzel Decorative',
'eb_garamond': 'EB Garamond',
'lora': 'Lora',
'merriweather': 'Merriweather',
'playfair_display': 'Playfair Display',
'roboto_slab': 'Roboto Slab',
'source_serif_pro': 'Source Serif Pro',
'zilla_slab': 'Zilla Slab'
);
$web_font_type: (
// sans-serif
'alegreya_sans': 'sans',
'fira_sans': 'sans',
'inter': 'sans',
'montserrat': 'sans',
'nunito': 'sans',
'open_sans': 'sans',
'raleway': 'sans',
'roboto': 'sans',
'source_sans_pro': 'sans',
'ubuntu': 'sans',
'work_sans': 'sans',
// serif
'alegreya': 'serif',
'bitter': 'serif',
'cinzel': 'serif',
'cinzel_decorative': 'serif',
'eb_garamond': 'serif',
'lora': 'serif',
'merriweather': 'serif',
'playfair_display': 'serif',
'roboto_slab': 'serif',
'source_serif_pro': 'serif',
'zilla_slab': 'serif'
);
// in urls replace all occurences of ; with %3b
$web_font_urls: (
// sans-serif
'alegreya_sans': 'https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100%3b0,300%3b0,400%3b0,500%3b0,700%3b0,800%3b0,900%3b1,300%3b1,400%3b1,500%3b1,700%3b1,800%3b1,900&display=swap',
'fira_sans': 'https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100%3b0,200%3b0,300%3b0,400%3b0,500%3b0,600%3b0,700%3b0,800%3b0,900%3b1,200%3b1,300%3b1,400%3b1,500%3b1,600%3b1,700%3b1,800%3b1,900&display=swap',
'inter': 'https://fonts.googleapis.com/css2?family=Inter:wght@100%3b200%3b300%3b400%3b500%3b600%3b700%3b800%3b900&display=swap',
'nunito': 'https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200%3b0,300%3b0,400%3b0,600%3b0,700%3b0,800%3b0,900%3b1,200%3b1,300%3b1,400%3b1,600%3b1,700%3b1,800%3b1,900&display=swap',
'open_sans': 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300%3b0,400%3b0,600%3b0,700%3b0,800%3b1,300%3b1,400%3b1,600%3b1,700%3b1,800&display=swap',
'montserrat': 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100%3b0,200%3b0,300%3b0,400%3b0,500%3b0,600%3b0,700%3b0,800%3b0,900%3b1,200%3b1,300%3b1,400%3b1,500%3b1,600%3b1,700%3b1,800%3b1,900&display=swap',
'raleway': 'https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100%3b0,200%3b0,300%3b0,400%3b0,500%3b0,600%3b0,700%3b0,800%3b0,900%3b1,200%3b1,300%3b1,400%3b1,500%3b1,600%3b1,700%3b1,800%3b1,900&display=swap',
'roboto': 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100%3b0,300%3b0,400%3b0,500%3b0,700%3b0,900%3b1,100%3b1,300%3b1,400%3b1,500%3b1,700%3b1,900&display=swap',
'source_sans_pro': 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200%3b0,300%3b0,400%3b0,600%3b0,700%3b0,900%3b1,200%3b1,300%3b1,400%3b1,600%3b1,700%3b1,900&display=swap',
'ubuntu': 'https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300%3b0,400%3b0,500%3b0,700%3b1,300%3b1,400%3b1,500%3b1,700&display=swap',
'work_sans': 'https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100%3b0,200%3b0,300%3b0,400%3b0,500%3b0,600%3b0,700%3b0,800%3b0,900%3b1,200%3b1,300%3b1,400%3b1,500%3b1,600%3b1,700%3b1,800%3b1,900&display=swap',
// serif
'alegreya': 'https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400%3b0,500%3b0,700%3b0,800%3b0,900%3b1,400%3b1,500%3b1,700%3b1,800%3b1,900&display=swap',
'bitter': 'https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100%3b0,200%3b0,300%3b0,400%3b0,500%3b0,600%3b0,700%3b0,800%3b0,900%3b1,200%3b1,300%3b1,400%3b1,500%3b1,600%3b1,700%3b1,800%3b1,900&display=swap',
'cinzel': 'https://fonts.googleapis.com/css2?family=Cinzel:wght@400%3b500%3b600%3b700%3b800%3b900&display=swap',
'cinzel_decorative': 'https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400%3b700%3b900&display=swap',
'eb_garamond': 'https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400%3b0,500%3b0,600%3b0,700%3b0,800%3b1,400%3b1,500%3b1,600%3b1,700%3b1,800&display=swap',
'lora': 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400%3b0,500%3b0,600%3b0,700%3b1,400%3b1,500%3b1,600%3b1,700&display=swap',
'merriweather': 'https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300%3b0,400%3b0,700%3b0,900%3b1,300%3b1,400%3b1,700%3b1,900&display=swap',
'playfair_display': 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400%3b0,500%3b0,600%3b0,700%3b0,800%3b0,900%3b1,400%3b1,500%3b1,600%3b1,700%3b1,800%3b1,900&display=swap',
'roboto_slab': 'https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100%3b200%3b300%3b400%3b500%3b600%3b700%3b800%3b900&display=swap',
'source_serif_pro': 'https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,200%3b0,300%3b0,400%3b0,600%3b0,700%3b0,900%3b1,200%3b1,300%3b1,400%3b1,600%3b1,700%3b1,900&display=swap',
'zilla_slab': 'https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300%3b0,400%3b0,500%3b0,600%3b0,700%3b1,300%3b1,400%3b1,500%3b1,600%3b1,700&display=swap'
);
/// Remove the unit of a length
/// from https://css-tricks.com/snippets/sass/strip-unit-function/
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
/// from https://hugogiraudel.com/2013/10/09/advanced-sass-list-functions-again/
@function remove-duplicates($list, $recursive: false) {
$result: ();
@each $item in $list {
@if not index($result, $item) {
@if length($item) > 1 and $recursive {
$result: append($result, remove-duplicates($item, $recursive));
} @else {
$result: append($result, $item);
}
}
}
@return $result;
}
// create font stack from name
@function get-font-stack($font_family) {
@if ( $font_family == 'default_sans' ) {
@return $default_font_sans;
}
@if ( $font_family == 'default_serif' ) {
@return $default_font_serif;
}
@if ( map_get($web_font_type, $font_family) == 'sans' ) {
$append_font_stack: $default_font_sans;
} @else {
$append_font_stack: $default_font_serif;
}
@return quote(map_get($web_font_names, $font_family)), $append_font_stack;
}
$font_list:
$header_brand_font_family, $main_menu_font_family,
$search_field_font_family,
$complementary_header_font_family,
$content_font_family,
$sidebar_font_family, $sidebar_headings_font_family,
$footer_font_family, $footer_headings_font_family,
$h1_font_family, $h2_font_family, $h3_font_family,
$h4_font_family, $h5_font_family, $h6_font_family;
// make list items uinque
$font_list_unique: remove-duplicates($font_list);
// import web fonts
@each $font_family in $font_list_unique {
@if ( $font_family != 'default_sans' and $font_family != 'default_serif' ) {
$web_font_path: quote(map_get($web_font_urls, $font_family));
@if ( $web_font_path != 'null' ) { // dunno why this happens
@import url("#{$web_font_path}");
}
}
}
// branding
.navbar-brand {
font-family: get-font-stack($header_brand_font_family);
font-size: $header_brand_font_size;
font-weight: $header_brand_font_weight;
@if ( $header_brand_uppercase == on ) {
text-transform: uppercase;
}
@if ( $header_brand_letter_spacing != 0em ) {
letter-spacing: $header_brand_letter_spacing;
}
}
// main menu
.navbar-nav {
font-family: get-font-stack($main_menu_font_family);
> li > a {
font-family: get-font-stack($main_menu_font_family);
font-size: $main_menu_font_size;
font-weight: $main_menu_font_weight;
@if ( $main_menu_uppercase == on ) {
text-transform: uppercase;
}
@if ( $main_menu_letter_spacing != 0em ) {
letter-spacing: $main_menu_letter_spacing;
}
}
}
// search field
.gpArea_Search,
.gpArea_Search-Gadget {
input.text {
font-family: get-font-stack($search_field_font_family) !important;
font-size: $search_field_font_size !important;
font-weight: $search_field_font_weight !important;
}
}
// complementary header
.complementary-header {
font-family: get-font-stack($complementary_header_font_family);
font-size: $complementary_header_font_size;
font-weight: $complementary_header_font_weight;
}
// content
.main-content {
font-family: get-font-stack($content_font_family);
font-size: $content_font_size;
font-weight: $content_font_weight;
// headings
h1, .h1 {
font-family: get-font-stack($h1_font_family);
font-size: $h1_font_size;
font-weight: $h1_font_weight;
@if ( $h1_uppercase == on ) {
text-transform: uppercase;
}
@if ( $h1_letter_spacing != 0em ) {
letter-spacing: $h1_letter_spacing;
}
}
h2, .h2 {
font-family: get-font-stack($h2_font_family);
font-size: $h2_font_size;
font-weight: $h2_font_weight;
@if ( $h2_uppercase == on ) {
text-transform: uppercase;
}
@if ( $h2_letter_spacing != 0em ) {
letter-spacing: $h2_letter_spacing;
}
}
h3, .h3 {
font-family: get-font-stack($h3_font_family);
font-size: $h3_font_size;
font-weight: $h3_font_weight;
@if ( $h3_uppercase == on ) {
text-transform: uppercase;
}
@if ( $h3_letter_spacing != 0em ) {
letter-spacing: $h3_letter_spacing;
}
}
h4, .h4 {
font-family: get-font-stack($h4_font_family);
font-size: $h4_font_size;
font-weight: $h4_font_weight;
@if ( $h4_uppercase == on ) {
text-transform: uppercase;
}
@if ( $h4_letter_spacing != 0em ) {
letter-spacing: $h4_letter_spacing;
}
}
h5, .h5 {
font-family: get-font-stack($h5_font_family);
font-size: $h5_font_size;
font-weight: $h5_font_weight;
@if ( $h5_uppercase == on ) {
text-transform: uppercase;
}
@if ( $h5_letter_spacing != 0em ) {
letter-spacing: $h5_letter_spacing;
}}
h6, .h6 {
font-family: get-font-stack($h6_font_family);
font-size: $h6_font_size;
font-weight: $h6_font_weight;
@if ( $h6_uppercase == on ) {
text-transform: uppercase;
}
@if ( $h6_letter_spacing != 0em ) {
letter-spacing: $h6_letter_spacing;
}
}
}
// sidebars
.sidebar {
font-family: get-font-stack($sidebar_font_family);
font-size: $sidebar_font_size;
font-weight: $sidebar_font_weight;
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: get-font-stack($sidebar_headings_font_family);
font-weight: $sidebar_headings_font_weight;
@if ( $sidebar_headings_uppercase == on ) {
text-transform: uppercase;
}
@if ( $sidebar_headings_letter_spacing != 0em ) {
letter-spacing: $sidebar_headings_letter_spacing;
}
}
$sidebar_font_size_multiplier: strip-unit($sidebar_font_size);
h1, .h1 {
font-size: $h1_font_size * $sidebar_font_size_multiplier;
}
h2, .h2 {
font-size: $h2_font_size * $sidebar_font_size_multiplier;
}
h3, .h3 {
font-size: $h3_font_size * $sidebar_font_size_multiplier;
}
h4, .h4 {
font-size: $h4_font_size * $sidebar_font_size_multiplier;
}
h5, .h5 {
font-size: $h5_font_size * $sidebar_font_size_multiplier;
}
h6, .h6 {
font-size: $h6_font_size * $sidebar_font_size_multiplier;
}
}
// footer
.main-footer {
font-family: get-font-stack($footer_font_family);
font-size: $footer_font_size;
font-weight: $footer_font_weight;
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: get-font-stack($footer_headings_font_family);
font-weight: $footer_headings_font_weight;
@if ( $footer_headings_uppercase == on ) {
text-transform: uppercase;
}
@if ( $footer_headings_letter_spacing != 0em ) {
letter-spacing: $footer_headings_letter_spacing;
}
}
$footer_font_size_multiplier: strip-unit($footer_font_size);
h1, .h1 {
font-size: $h1_font_size * $footer_font_size_multiplier;
}
h2, .h2 {
font-size: $h2_font_size * $footer_font_size_multiplier;
}
h3, .h3 {
font-size: $h3_font_size * $footer_font_size_multiplier;
}
h4, .h4 {
font-size: $h4_font_size * $footer_font_size_multiplier;
}
h5, .h5 {
font-size: $h5_font_size * $footer_font_size_multiplier;
}
h6, .h6 {
font-size: $h6_font_size * $footer_font_size_multiplier;
}
}