Add base color, typography, and header styles.
This commit is contained in:
Jeff Ong
parent
1e7d6aed21
commit
7c22a7641d
11 changed files with 321 additions and 161 deletions
|
|
@ -4,64 +4,8 @@
|
|||
{
|
||||
name: "core/group",
|
||||
options: {
|
||||
name: "outline",
|
||||
label: "Outline",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "core/cover",
|
||||
options: {
|
||||
name: "duotone",
|
||||
label: "Duotone",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "core/gallery",
|
||||
options: {
|
||||
name: "duotone",
|
||||
label: "Duotone",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "core/image",
|
||||
options: {
|
||||
name: "duotone",
|
||||
label: "Duotone",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "core/latest-posts",
|
||||
options: {
|
||||
name: "duotone",
|
||||
label: "Duotone",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "core/paragraph",
|
||||
options: {
|
||||
name: "border-top",
|
||||
label: "Border Top",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "core/media-text",
|
||||
options: {
|
||||
name: "duotone",
|
||||
label: "Duotone",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "core/heading",
|
||||
options: {
|
||||
name: "border-top",
|
||||
label: "Border Top",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "core/paragraph",
|
||||
options: {
|
||||
name: "text-indent",
|
||||
label: "Indent",
|
||||
name: "test",
|
||||
label: "Test",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,8 +1,2 @@
|
|||
@import "block-extends/button";
|
||||
@import "block-extends/cover";
|
||||
@import "block-extends/image";
|
||||
@import "block-extends/latest-posts";
|
||||
@import "block-extends/media-text";
|
||||
@import "block-extends/pullquote";
|
||||
@import "block-extends/gallery";
|
||||
@import "block-extends/group";
|
||||
// Import the block extends
|
||||
@import "block-extends/button";
|
||||
|
|
@ -1,26 +1,29 @@
|
|||
.has-main-navigation {
|
||||
.site-header {
|
||||
@include media( mobile ){
|
||||
padding-top: 0;
|
||||
padding: calc( 2 * var(--global--spacing-vertical) ) 0;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: var(--responsive--alignwide-width);
|
||||
|
||||
.site-branding {
|
||||
flex-grow: 1;
|
||||
@include media( mobile ){
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--global--spacing-unit);
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// margin-top: var(--global--spacing-unit);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
// letter-spacing: 1px;
|
||||
// margin-bottom: 0;
|
||||
// text-transform: uppercase;
|
||||
> a {
|
||||
background: inherit;
|
||||
text-shadow: none;
|
||||
|
|
@ -28,23 +31,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.navigation-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.main-navigation {
|
||||
margin-top: 0;
|
||||
.menu-item {
|
||||
margin-right: calc( 2 * var(--global--spacing-unit) );
|
||||
a {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
.primary-navigation {
|
||||
flex-grow: 4;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.current-menu-item, .current-page-item {
|
||||
border-bottom: 3px solid var(--global--color-border);
|
||||
}
|
||||
}
|
||||
.primary-navigation > div > ul li, .woo-navigation > div > ul li {
|
||||
color: var(--global--color-secondary);
|
||||
margin: 6px calc( var(--global--spacing-horizontal) / 2);
|
||||
}
|
||||
}
|
||||
|
|
@ -10,8 +10,8 @@ $horizontal_space: var(--global--spacing-horizontal);
|
|||
|
||||
$breakpoint_sm: 482px;
|
||||
$breakpoint_md: 592px;
|
||||
$breakpoint_lg: 794px; // default width + the margins
|
||||
$breakpoint_xl: 1178px;
|
||||
$breakpoint_lg: calc( 780px + 48px ); // default width + the margins
|
||||
$breakpoint_xl: calc( 1247px + 48px ); // wide width + the margins
|
||||
$breakpoint_xxl: 1440px;
|
||||
|
||||
// Responsive breakpoints mixin
|
||||
|
|
|
|||
|
|
@ -1,40 +1,15 @@
|
|||
:root {
|
||||
.has-xs-font-size {
|
||||
font-size: var(--global--font-size-xs);
|
||||
}
|
||||
.has-xl-font-size {
|
||||
font-size: var(--global--font-size-xl);
|
||||
line-height: var(--global--line-height-heading);
|
||||
}
|
||||
.has-huge-font-size {
|
||||
font-size: var(--global--font-size-xxl);
|
||||
line-height: var(--global--line-height-heading);
|
||||
}
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, h5, h6 {
|
||||
&.is-style-border-top {
|
||||
border-top: 3px solid var(--global--color-border);
|
||||
display: inline-block;
|
||||
padding-top: var(--global--spacing-unit);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
&.is-style-text-indent {
|
||||
text-indent: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 2px solid currentColor;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.entry-content a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.post .entry-title {
|
||||
font-size: var(--global--font-size-xl);
|
||||
}
|
||||
|
||||
// These styles to limit the paragraph may eventually apply to blog page template
|
||||
// .entry-content,
|
||||
// .entry-content [class*="inner-container"] {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
// Button block styles go here
|
||||
.wp-block-button__link {
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
min-width: 264px;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
|
|
@ -14,6 +14,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
|
|||
*/
|
||||
|
||||
@import "responsive";
|
||||
@import "header";
|
||||
@import "text";
|
||||
@import "header";
|
||||
@import "block-extends";
|
||||
|
|
@ -79,12 +79,17 @@ if ( ! function_exists( 'spearhead_setup' ) ) :
|
|||
array(
|
||||
'name' => __( 'Primary', 'spearhead' ),
|
||||
'slug' => 'primary',
|
||||
'color' => '#DB0042',
|
||||
),
|
||||
array(
|
||||
'name' => __( 'Foreground', 'spearhead' ),
|
||||
'slug' => 'foreground',
|
||||
'color' => '#000000',
|
||||
),
|
||||
array(
|
||||
'name' => __( 'Background', 'spearhead' ),
|
||||
'slug' => 'background',
|
||||
'color' => '#BFF5A5',
|
||||
'color' => '#FFFFFF',
|
||||
),
|
||||
)
|
||||
);
|
||||
|
|
@ -104,7 +109,6 @@ add_filter( 'seedlet_content_width', 'spearhead_content_width' );
|
|||
* Enqueue scripts and styles.
|
||||
*/
|
||||
function spearhead_scripts() {
|
||||
|
||||
// enqueue Google fonts, if necessary
|
||||
wp_enqueue_style( 'spearhead-fonts', spearhead_fonts_url(), array(), null );
|
||||
|
||||
|
|
@ -116,7 +120,6 @@ function spearhead_scripts() {
|
|||
|
||||
// enqueue child RTL styles
|
||||
wp_style_add_data( 'spearhead-style', 'rtl', 'replace' );
|
||||
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'spearhead_scripts', 11 );
|
||||
|
||||
|
|
@ -141,8 +144,8 @@ function spearhead_fonts_url() : string {
|
|||
$fonts_url = '';
|
||||
|
||||
$font_families = array();
|
||||
$font_families[] = 'family=Red+Hat+Display:ital,wght@0,900;1,900';
|
||||
$font_families[] = 'family=Red+Hat+Text:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700';
|
||||
$font_families[] = 'family=Libre+Franklin:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700';
|
||||
$font_families[] = 'family=IBM+Plex+Mono:wght@400;700';
|
||||
$font_families[] = 'display=swap';
|
||||
|
||||
// Make a single request for the theme fonts.
|
||||
|
|
|
|||
123
spearhead/style-rtl.css
Normal file
123
spearhead/style-rtl.css
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
/*
|
||||
Theme Name: Spearhead
|
||||
Theme URI: https://github.com/Automattic/themes/root-child
|
||||
Author: Automattic
|
||||
Author URI: https://automattic.com/
|
||||
Description: Share your podcast with the world using Spearhead.
|
||||
Requires at least: WordPress 5.4
|
||||
Version: 1.2.1
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: LICENSE
|
||||
Template: seedlet
|
||||
Text Domain: spearhead
|
||||
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
|
||||
*/
|
||||
/**
|
||||
* Repsonsive Styles
|
||||
*/
|
||||
/**
|
||||
* Required Variables
|
||||
*/
|
||||
/**
|
||||
* Root Media Query Variables
|
||||
*/
|
||||
:root {
|
||||
--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal));
|
||||
--responsive--aligndefault-width: 100%;
|
||||
--responsive--alignwide-width: 100%;
|
||||
--responsive--alignfull-width: 100%;
|
||||
--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
|
||||
--responsive--alignright-margin: var(--global--spacing-horizontal);
|
||||
--responsive--alignleft-margin: var(--global--spacing-horizontal);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 482px) {
|
||||
:root {
|
||||
--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignwide-width: calc(482px - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 592px) {
|
||||
:root {
|
||||
--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignwide-width: calc(592px - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: calc( 780px + 48px)) {
|
||||
:root {
|
||||
--responsive--aligndefault-width: calc(592px - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignwide-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: calc( 1247px + 48px)) {
|
||||
:root {
|
||||
--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1440px) {
|
||||
:root {
|
||||
--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.entry-content a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 482px) {
|
||||
.has-main-navigation .site-header {
|
||||
padding: calc( 2 * var(--global--spacing-vertical)) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: var(--responsive--alignwide-width);
|
||||
}
|
||||
|
||||
.site-header .site-branding {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 482px) {
|
||||
.site-header .site-branding {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.site-header .site-branding .site-title > a {
|
||||
background: inherit;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.site-header .primary-navigation {
|
||||
flex-grow: 4;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
|
||||
color: var(--global--color-secondary);
|
||||
margin: 6px calc( var(--global--spacing-horizontal) / 2);
|
||||
}
|
||||
127
spearhead/style.css
Normal file
127
spearhead/style.css
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
/*
|
||||
Theme Name: Spearhead
|
||||
Theme URI: https://github.com/Automattic/themes/root-child
|
||||
Author: Automattic
|
||||
Author URI: https://automattic.com/
|
||||
Description: Share your podcast with the world using Spearhead.
|
||||
Requires at least: WordPress 5.4
|
||||
Version: 1.2.1
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: LICENSE
|
||||
Template: seedlet
|
||||
Text Domain: spearhead
|
||||
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
|
||||
*/
|
||||
/**
|
||||
* Repsonsive Styles
|
||||
*/
|
||||
/**
|
||||
* Required Variables
|
||||
*/
|
||||
/**
|
||||
* Root Media Query Variables
|
||||
*/
|
||||
:root {
|
||||
--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal));
|
||||
--responsive--aligndefault-width: 100%;
|
||||
--responsive--alignwide-width: 100%;
|
||||
--responsive--alignfull-width: 100%;
|
||||
--responsive--alignwide-width-multiplier: calc(16 * var(--global--spacing-horizontal));
|
||||
--responsive--alignright-margin: var(--global--spacing-horizontal);
|
||||
--responsive--alignleft-margin: var(--global--spacing-horizontal);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 482px) {
|
||||
:root {
|
||||
--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignwide-width: calc(482px - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 592px) {
|
||||
:root {
|
||||
--responsive--aligndefault-width: calc(482px - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignwide-width: calc(592px - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: calc( 780px + 48px)) {
|
||||
:root {
|
||||
--responsive--aligndefault-width: calc(592px - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignwide-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: calc( 1247px + 48px)) {
|
||||
:root {
|
||||
--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1440px) {
|
||||
:root {
|
||||
--responsive--aligndefault-width: calc(calc( 780px + 48px) - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignwide-width: calc(calc( 1247px + 48px) - var(--responsive--spacing-horizontal));
|
||||
--responsive--alignright-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
--responsive--alignleft-margin: calc( 0.5 * (100vw - var(--responsive--aligndefault-width)));
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.entry-content a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.post .entry-title {
|
||||
font-size: var(--global--font-size-xl);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 482px) {
|
||||
.has-main-navigation .site-header {
|
||||
padding: calc( 2 * var(--global--spacing-vertical)) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: var(--responsive--alignwide-width);
|
||||
}
|
||||
|
||||
.site-header .site-branding {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 482px) {
|
||||
.site-header .site-branding {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.site-header .site-branding .site-title > a {
|
||||
background: inherit;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.site-header .primary-navigation {
|
||||
flex-grow: 4;
|
||||
justify-content: flex-end;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
|
||||
color: var(--global--color-secondary);
|
||||
margin: 6px calc( var(--global--spacing-horizontal) / 2);
|
||||
}
|
||||
|
|
@ -1,36 +1,37 @@
|
|||
:root {
|
||||
/* Globals */
|
||||
/* Font Family */
|
||||
--global--font-primary: 'Red Hat Display', sans-serif;
|
||||
--global--font-secondary: 'Red Hat Text', sans-serif;
|
||||
--global--color-primary: #000000;
|
||||
--global--color-primary-hover: #333333;
|
||||
--global--color-secondary: #000000;
|
||||
--global--font-primary: 'IBM Plex Mono', sans-serif;
|
||||
--global--font-secondary: 'Libre Franklin', sans-serif;
|
||||
--global--color-primary: #DB0042;
|
||||
--global--color-primary-hover: #DB0042;
|
||||
--global--color-secondary: #555555;
|
||||
--global--color-secondary-hover: #333333;
|
||||
--global--color-foreground: #000000;
|
||||
--global--color-foreground-light: #333333;
|
||||
--global--color-background: #BFF5A5;
|
||||
--global--color-background-dark: #BFF5A5;
|
||||
--global--color-background: #fff;
|
||||
--global--color-border: var(--global--color-secondary);
|
||||
/* Font Size */
|
||||
--global--font-size-xs: 14px;
|
||||
--global--font-size-sm: 16px;
|
||||
--global--font-size-root: 18px;
|
||||
--global--font-size-md: 18px;
|
||||
--global--font-size-lg: 20px;
|
||||
--global--font-size-xl: 24px;
|
||||
--global--font-size-xxl: 36px;
|
||||
--global--font-size-lg: 22px;
|
||||
--global--font-size-xl: 48px;
|
||||
/* Spacing */
|
||||
--global--spacing-horizontal: 24px;
|
||||
/* Line Height */
|
||||
--global--line-height-base: 1;
|
||||
--global--line-height-body: 1.7;
|
||||
--global--line-height-heading: 1.3;
|
||||
--heading--font-family: var(--global--font-primary);
|
||||
--heading--font-family: var(--global--font-secondary);
|
||||
--heading--font-weight: bold;
|
||||
--heading--font-size-h1: 48px;
|
||||
--heading--font-size-h2: 36px;
|
||||
--heading--font-size-h3: 30px;
|
||||
--heading--font-size-h4: 20px;
|
||||
--heading--font-size-h5: 16px;
|
||||
--heading--font-size-h6: 14px;
|
||||
--heading--font-size-h2: 22px;
|
||||
--heading--font-size-h3: 18px;
|
||||
--heading--font-size-h4: 16px;
|
||||
--heading--font-size-h5: 14px;
|
||||
--heading--font-size-h6: 12px;
|
||||
--heading--line-height: 1.2;
|
||||
--heading--letter-spacing-h4: 0.1em;
|
||||
--heading--letter-spacing-h5: 0.1em;
|
||||
|
|
@ -38,7 +39,9 @@
|
|||
--heading--line-height-h1: 1.2;
|
||||
--heading--line-height-h2: 1.4;
|
||||
--heading--line-height-h3: 1.4;
|
||||
--entry-header--font-size: var(--heading--font-size-h1);
|
||||
|
||||
--entry-header--font-size: var(--heading--font-size-h2);
|
||||
--entry-header--color: var(--global--color-foreground);
|
||||
|
||||
--button--border-radius: 0px;
|
||||
--button--color-text: var(--global--color-background);
|
||||
|
|
@ -52,9 +55,8 @@
|
|||
--branding--title--font-size: var(--global--font-size-lg);
|
||||
|
||||
--primary-nav--justify-content: space-between;
|
||||
--primary-nav--font-family: var(--global--font-primary);
|
||||
--primary-nav--font-weight: bold;
|
||||
--primary-nav--padding: 0 0 6px 0;
|
||||
--primary-nav--color-link: var(--global--color-secondary);
|
||||
--primary-nav--padding: 0;
|
||||
|
||||
--social-nav--padding: calc( .67 * var(--global--spacing-unit) );
|
||||
|
||||
|
|
@ -72,17 +74,17 @@
|
|||
@media ( min-width: 482px ){
|
||||
:root {
|
||||
/* Font Size */
|
||||
--global--font-size-root: 20px;
|
||||
/* --global--font-size-root: 20px;
|
||||
--global--font-size-md: 20px;
|
||||
--global--font-size-lg: 24px;
|
||||
--global--font-size-xl: 36px;
|
||||
--global--font-size-xxl: 48px;
|
||||
--global--font-size-xxl: 48px; */
|
||||
/* Line Height */
|
||||
--heading--font-size-h1: 72px;
|
||||
/* --heading--font-size-h1: 72px;
|
||||
--heading--font-size-h2: 64px;
|
||||
--heading--font-size-h3: 48px;
|
||||
--heading--line-height-h1: 1.2;
|
||||
--heading--line-height-h2: 1.2;
|
||||
--heading--line-height-h3: 1.4;
|
||||
--heading--line-height-h3: 1.4; */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue