Varia: use font-family mixin for main-nav font family

This commit is contained in:
Andrés 2019-10-18 09:01:40 +02:00
parent 2f63861611
commit e73a05f972
7 changed files with 22 additions and 8 deletions

View file

@ -322,8 +322,10 @@ $config-header: (
),
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "secondary"),
"family-css-variable": '--font-base',
"family": (
"fallback": map-deep-get($config-global, "font", "family", "secondary"),
"css-var": '--font-base',
),
"size": map-deep-get($config-global, "font", "size", "md"),
"weight": normal,
"line-height": 1,

View file

@ -39,8 +39,7 @@
}
a {
font-family: #{map-deep-get($config-header, "main-nav", "font", "family")}; // For browsers without support for CSS variables.
font-family: var( #{map-deep-get($config-header, "main-nav", "font", "family-css-variable")}, #{map-deep-get($config-header, "main-nav", "font", "family")} );
@include font-family( map-deep-get( $config-header, "main-nav", "font", "family" ) );
font-weight: #{map-deep-get($config-header, "main-nav", "font", "weight")};
padding: #{map-deep-get($config-header, "main-nav", "link-padding")};

View file

@ -35,8 +35,10 @@ $config-header: (
),
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "primary"),
"family-css-variable": '--font-headings',
"family": (
"fallback": map-deep-get($config-global, "font", "family", "primary"),
"css-var": '--font-headings',
),
"size": map-deep-get($config-global, "font", "size", "md"),
"weight": bold,
"line-height": 1,

View file

@ -146,8 +146,7 @@
a {
color: #{map-deep-get($config-header, "main-nav", "color", "link")};
display: block;
font-family: #{map-deep-get($config-header, "main-nav", "font", "family")}; // For browsers without support for CSS variables.
font-family: var( #{map-deep-get($config-header, "main-nav", "font", "family-css-variable")}, #{map-deep-get($config-header, "main-nav", "font", "family")} );
@include font-family( map-deep-get($config-header, "main-nav", "font", "family" ) );
font-weight: #{map-deep-get($config-header, "main-nav", "font", "weight")};
padding: #{0.5 * map-deep-get($config-header, "main-nav", "link-padding")} 0;

View file

@ -112,6 +112,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* Crop Text Boundry
* - Sets a fixed-width on content within alignwide and alignfull blocks
*/
/**
* Add font-family using CSS variables.
* It also adds the proper fallback for browsers without support.
*/
/**
* Base
* - Reset the browser

View file

@ -135,6 +135,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* Crop Text Boundry
* - Sets a fixed-width on content within alignwide and alignfull blocks
*/
/**
* Add font-family using CSS variables.
* It also adds the proper fallback for browsers without support.
*/
/**
* Base
* - Reset the browser

View file

@ -135,6 +135,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
* Crop Text Boundry
* - Sets a fixed-width on content within alignwide and alignfull blocks
*/
/**
* Add font-family using CSS variables.
* It also adds the proper fallback for browsers without support.
*/
/**
* Base
* - Reset the browser