beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Leven: migrate to use font-family mixin

Browse source
This commit is contained in:
Andrés 2019-10-18 12:53:10 +02:00
parent 08629ac084
commit 3270428a42
7 changed files with 75 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
leven/sass/_config-child-theme-deep.scss
View file

@ -20,10 +20,19 @@ $config-global: (
"font": (
/* Font Family */
"family": (
"primary": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
"secondary": "\"Crimson Text\", sans-serif",
"primary": (
"fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
"css-var": '--font-headings',
),
"secondary": (
"fallback": "\"Crimson Text\", sans-serif",
"css-var": '--font-base',
),
"code": "monospace, monospace",
"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
"ui": (
"fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
"css-var": '--font-base',
),
),
/* Font Size */
"size": (
@ -140,7 +149,10 @@ $config-elements: (
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "secondary"),
"family": (
"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
),
"line-height": map-deep-get($config-global, "font", "line-height", "md"),
"size": map-deep-get($config-global, "font", "size", "md"),
"weight": bold,
@ -169,7 +181,10 @@ $config-button: (
),
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "ui"),
"family": (
"fallback": map-deep-get($config-global, "font", "family", "ui", "fallback"),
"css-var": map-deep-get($config-global, "font", "family", "ui", "css-var"),
),
"size": map-deep-get($config-global, "font", "size", "md"),
"weight": 700,
"line-height": 1,
@ -202,7 +217,10 @@ $config-heading: (
// Fonts & Typography
"font": (
// Family
"family": map-deep-get($config-global, "font", "family", "primary"),
"family": (
"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
),
// Size
"size": (
"h6": map-deep-get($config-global, "font", "size", "md"),
@ -241,7 +259,10 @@ $config-heading: (
$config-list: (
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "primary"),
"family": (
"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
),
),
);
@ -251,7 +272,10 @@ $config-list: (
$config-pullquote: (
// Font
"font": (
"family": #{map-deep-get($config-heading, "font", "family")},
"family": (
"fallback": map-deep-get($config-heading, "font", "family", "fallback"),
"css-var": map-deep-get($config-heading, "font", "family", "css-var"),
),
),
// Border
"color": (
@ -270,7 +294,10 @@ $config-pullquote: (
$config-quote: (
// Font
"font": (
"family": #{map-deep-get($config-heading, "font", "family")},
"family": (
"fallback": map-deep-get($config-heading, "font", "family", "fallback"),
"css-var": map-deep-get($config-heading, "font", "family", "css-var"),
),
),
);
@ -298,7 +325,10 @@ $config-header: (
"title": (
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "primary"),
"family": (
"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
),
"size": map-deep-get($config-global, "font", "size", "md"),
"weight": bold,
"line-height": 1,
@ -308,7 +338,10 @@ $config-header: (
"description": (
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "primary"),
"family": (
"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
),
"size": map-deep-get($config-global, "font", "size", "sm"),
),
),
@ -323,7 +356,10 @@ $config-header: (
),
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "primary"),
"family": (
"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
),
"family-css-variable": '--font-headings',
"size": map-deep-get($config-global, "font", "size", "base"),
"weight": bold,
@ -354,7 +390,10 @@ $config-footer: (
),
// Fonts
"font": (
"family": map-deep-get($config-global, "font", "family", "primary"),
"family": (
"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
),
"size": map-deep-get($config-global, "font", "size", "sm"),
"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
),

10
leven/sass/_config-child-theme.scss
View file

@ -6,8 +6,8 @@
// @import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i|Roboto:400,400i,700&display=swap');
$config-global: map-deep-set($config-global, "font" "size" "root", "20px");
$config-global: map-deep-set($config-global, "font" "family" "primary", "\'Playfair Display\', serif");
$config-global: map-deep-set($config-global, "font" "family" "secondary", "\'Roboto\', sans-serif");
$config-global: map-deep-set($config-global, "font" "family" "primary", "fallback", "\'Playfair Display\', serif");
$config-global: map-deep-set($config-global, "font" "family" "secondary","fallback", "\'Roboto\', sans-serif");
$config-global: map-deep-set($config-global, "color" "primary" "default", pink);
$config-global: map-deep-set($config-global, "font" "size" "root", "20px");
@ -15,12 +15,12 @@ $config-global: map-deep-set($config-global, "font" "size" "root", "20px");
$config-button: map-deep-set($config-button, "color" "background", orange);
// Headings
$config-heading: map-deep-set($config-heading, "font" "family", "\'Playfair Display\', serif");
$config-heading: map-deep-set($config-heading, "font" "family", "fallback", "\'Playfair Display\', serif");
$config-heading: map-deep-set($config-heading, "font" "weight", 200);
// Header
$config-header: map-deep-set($config-header, "branding" "title" "font" "family", "\'Playfair Display\', serif");
$config-header: map-deep-set($config-header, "branding" "title" "font" "family", "fallback", "\'Playfair Display\', serif");
$config-header: map-deep-set($config-header, "branding" "title" "font" "weight", 200);
$config-header: map-deep-set($config-header, "branding" "description" "font" "family", "\'Roboto\', sans-serif");
$config-header: map-deep-set($config-header, "branding" "description" "font" "family", "fallback", "\'Roboto\', sans-serif");
$config-header: map-deep-set($config-header, "branding" "color" "link", orange);
$config-header: map-deep-set($config-header, "main-nav" "color" "link", orange);

3
leven/sass/_extra-child-theme.scss
View file

@ -7,8 +7,7 @@ html {
}
.has-small-font-size {
font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without support for CSS custom properties.
font-family: var( --font-headings, #{map-deep-get($config-global, "font", "family", "primary")} );
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
}
a {

3
leven/sass/style-child-theme-editor.scss
View file

@ -38,6 +38,5 @@
*/
.has-small-font-size {
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
font-family: var( --font-headings, #{map-deep-get($config-global, "font", "family", "primary")} );
@include font-family( map-deep-get($config-global, "font", "family", "primary") );
}

4
leven/style-editor.css
View file

@ -115,6 +115,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.
*/
/**
* Child Theme Name
*/

8
leven/style-rtl.css
View file

@ -136,6 +136,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.
*/
/**
* Child Theme Deep
*/
@ -1637,7 +1641,7 @@ img {
ul,
ol {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
margin: 0;
padding-right: 32px;
}
@ -2376,7 +2380,7 @@ table th,
.site-description {
color: currentColor;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
}
body:not(.fse-enabled) .site-title {

8
leven/style.css
View file

@ -136,6 +136,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.
*/
/**
* Child Theme Deep
*/
@ -1637,7 +1641,7 @@ img {
ul,
ol {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
margin: 0;
padding-left: 32px;
}
@ -2393,7 +2397,7 @@ table th,
.site-description {
color: currentColor;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
}
body:not(.fse-enabled) .site-title {