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

Mobile header and nav styles.

Browse source
This commit is contained in:
Jeff Ong 2020-08-13 11:41:46 -04:00
parent 426c9eabc7
commit 3dd11770b0
4 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
spearhead/assets/sass/_header.scss
View file

@ -1,11 +1,15 @@
.has-main-navigation {
.site-header {
@include media( mobile ){
padding: calc( 2 * var(--global--spacing-vertical) ) 0;
};
@include media( mobile-only ){
padding-top: 4px;
.site-description {
display: none;
}
}
}
}
.site-header {
display: flex;
justify-content: space-between;

8
spearhead/style-rtl.css
View file

@ -77,7 +77,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
}
.home .post .entry-title {
font-size: var(--global--font-size-xl);
font-size: var(--global--font-size-lg);
margin-bottom: 0;
}
@ -111,9 +111,9 @@ a {
font-weight: 500;
}
@media only screen and (min-width: 482px) {
.has-main-navigation .site-header {
padding: calc( 2 * var(--global--spacing-vertical)) 0;
@media only screen and (max-width: 481px) {
.has-main-navigation .site-header .site-description {
display: none;
}
}

7
spearhead/style.css
View file

@ -111,9 +111,12 @@ a {
font-weight: 500;
}
@media only screen and (min-width: 482px) {
@media only screen and (max-width: 481px) {
.has-main-navigation .site-header {
padding: calc( 2 * var(--global--spacing-vertical)) 0;
padding-top: 4px;
}
.has-main-navigation .site-header .site-description {
display: none;
}
}

7
spearhead/variables.css
View file

@ -53,10 +53,13 @@
--cover--color-foreground: var(--global--color-background);
--branding--title--font-size: var(--global--font-size-lg);
--branding--title--font-size-mobile: var(--global--font-size-root);
--primary-nav--justify-content: space-between;
--primary-nav--color-link: var(--global--color-secondary);
--primary-nav--padding: 0;
--primary-nav--font-family-mobile: var(--global--font-family-secondary);
--primary-nav--font-size-mobile: var(--global--font-size-sm);
--social-nav--padding: calc( .67 * var(--global--spacing-unit) );
@ -73,11 +76,11 @@
@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-h2: 64px;