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

Use css grid to style the side nav

Browse source
This commit is contained in:
Enej Bajgoric 2020-12-09 21:54:32 -08:00 committed by Maggie Cabrera
parent d672b1958b
commit 58728625ce
29 changed files with 708 additions and 309 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
alves/sass/_config-child-theme-deep.scss
View file

@ -132,6 +132,7 @@ $config-global: (
/* Border radius */
"border-radius": (
"xs": (0.25 * $typescale-root),
"sm": (0.5 * $typescale-root),
"md": (0.75 * $typescale-root),
"lg": $typescale-root,

1
alves/sass/_extra-child-theme.scss
View file

@ -574,5 +574,4 @@ body:not(.fse-enabled) {
}
// Updates the Mobile Navigation to be next to the site title.
$mobile-nav-side-right-margin: 145px;
@import "../../varia/sass/components/header/_site-mobile-nav-side";

58
alves/style-rtl.css
View file

@ -4447,29 +4447,53 @@ body:not(.fse-enabled) #masthead {
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-left: 145px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.86806rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
left: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
right: 16px;
background: #fafafa;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #9B6A36;
border-radius: 4px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-right: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

58
alves/style.css
View file

@ -4476,29 +4476,53 @@ body:not(.fse-enabled) #masthead {
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-right: 145px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.86806rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
right: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
left: 16px;
background: #fafafa;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #9B6A36;
border-radius: 4px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-left: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

1
barnsbury/sass/_config-child-theme-deep.scss
View file

@ -132,6 +132,7 @@ $config-global: (
/* Border radius */
"border-radius": (
"xs": ( 0.25 * $typescale-root ),
"sm": (0.5 * $typescale-root),
"md": (0.75 * $typescale-root),
"lg": $typescale-root,

1
barnsbury/sass/_extra-child-theme.scss
View file

@ -394,5 +394,4 @@ a {
}
}
// Updates the Mobile Navigation to be next to the site title.
$mobile-nav-side-right-margin: 100px;
@import "../../varia/sass/components/header/_site-mobile-nav-side";

58
barnsbury/style-rtl.css
View file

@ -4392,29 +4392,53 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-left: 100px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.71818rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
left: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
right: 16px;
background: #FDF9EC;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #3C2323;
border-radius: 5px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-right: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

58
barnsbury/style.css
View file

@ -4421,29 +4421,53 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-right: 100px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.71818rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
right: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
left: 16px;
background: #FDF9EC;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #3C2323;
border-radius: 5px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-left: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

1
dalston/sass/_config-child-theme-deep.scss
View file

@ -132,6 +132,7 @@ $config-global: (
/* Border radius */
"border-radius": (
"xs": (0.25 * $typescale-root),
"sm": (0.5 * $typescale-root),
"md": (0.75 * $typescale-root),
"lg": $typescale-root,

1
dalston/sass/_extra-child-theme.scss
View file

@ -320,7 +320,6 @@ a {
// Updates the Mobile Navigation to be next to the site title.
$mobile-nav-side-right-margin: 90px;
@import "../../varia/sass/components/header/_site-mobile-nav-side";
.mobile-nav-side .main-navigation {

58
dalston/style-rtl.css
View file

@ -4269,29 +4269,53 @@ a {
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-left: 90px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.75614rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
left: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
right: 16px;
background: #FAFAFA;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #CCCCCC;
border-radius: 4.75px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-right: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

58
dalston/style.css
View file

@ -4298,29 +4298,53 @@ a {
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-right: 90px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.75614rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
right: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
left: 16px;
background: #FAFAFA;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #CCCCCC;
border-radius: 4.75px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-left: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

1
hever/sass/_config-child-theme-deep.scss
View file

@ -132,6 +132,7 @@ $config-global: (
/* Border radius */
"border-radius": (
"xs": (0.25 * $typescale-root),
"sm": (0.25 * $typescale-root),
"md": (0.5 * $typescale-root),
"lg": (0.75 * $typescale-root),

1
hever/sass/_extra-child-theme.scss
View file

@ -493,5 +493,4 @@ article .entry-header .entry-title,
}
// Updates the Mobile Navigation to be next to the site title.
$mobile-nav-side-right-margin: 110px;
@import "../../varia/sass/components/header/_site-mobile-nav-side";

58
hever/style-rtl.css
View file

@ -4469,29 +4469,53 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-left: 110px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.75614rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
left: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
right: 16px;
background: #F8F8F8;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #C5C5C5;
border-radius: 5px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-right: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

58
hever/style.css
View file

@ -4498,29 +4498,53 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-right: 110px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.75614rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
right: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
left: 16px;
background: #F8F8F8;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #C5C5C5;
border-radius: 5px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-left: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

1
mayland/sass/_config-child-theme-deep.scss
View file

@ -132,6 +132,7 @@ $config-global: (
/* Border radius */
"border-radius": (
"xs": (0.25 * $typescale-root),
"sm": (0.25 * $typescale-root),
"md": (0.5 * $typescale-root),
"lg": $typescale-root,

1
mayland/sass/_extra-child-theme.scss
View file

@ -311,7 +311,6 @@ a {
}
// Updates the Mobile Navigation to be next to the site title.
$mobile-nav-side-right-margin: 90px;
@import "../../varia/sass/components/header/_site-mobile-nav-side";
.mobile-nav-side .has-menu .site-title {

58
mayland/style-rtl.css
View file

@ -4298,29 +4298,53 @@ strong {
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-left: 90px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.69444rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
left: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
right: 16px;
background: #f2f2f2;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #e6e6e6;
border-radius: 5px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-right: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

58
mayland/style.css
View file

@ -4327,29 +4327,53 @@ strong {
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-right: 90px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.69444rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
right: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
left: 16px;
background: #f2f2f2;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #e6e6e6;
border-radius: 5px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-left: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

1
morden/sass/_config-child-theme-deep.scss
View file

@ -132,6 +132,7 @@ $config-global: (
/* Border radius */
"border-radius": (
"xs": (0.25 * $typescale-root),
"sm": (0.25 * $typescale-root),
"md": (0.5 * $typescale-root),
"lg": (0.75 * $typescale-root),

69
morden/sass/_extra-child-theme.scss
View file

@ -611,17 +611,68 @@ article .entry-header .entry-title,
}
// Updates the Mobile Navigation to be next to the site title.
$mobile-nav-side-right-margin: 115px;
@import "../../varia/sass/components/header/_site-mobile-nav-side";
@include media(mobile-only) {
.mobile-nav-side {
.site-header-wrap.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
.mobile-nav-side .main-navigation {
@include media(mobile-only) {
#toggle-menu {
top: 0; /** Specific to Morden **/
right: 0; /** Specific to Morden **/
& > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0!important;
}
.site-title {
align-self: end;
}
.site-description {
align-self: start;
}
}
.menu-main-menu-container {
background: transparent;
.site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: 1;
grid-row-end: 3;
margin: 0;
justify-self: end;
#toggle-menu {
padding: (1.5 * $baseline-unit);
display: inline-block;
text-align: center;
font-size: #{map-deep-get($config-global, "font", "size", "xs" )};
}
.menu-main-menu-container {
margin-top: $baseline-unit;
position: absolute;
z-index: 100;
right: 0;
left: 0;
font-weight: normal;
background: #{map-deep-get($config-global, "color", "foreground", "dark") };
padding: 0 (2 * $baseline-unit) $baseline-unit;
border-radius: #{map-deep-get($config-global, "border-radius", "xs" )};
}
.menu-main-menu-container {
a {
padding: $baseline-unit 0;
line-height: 1;
font-weight: normal;
}
}
}
}
}

75
morden/style-rtl.css
View file

@ -4562,43 +4562,56 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-left: 115px;
.mobile-nav-side .site-header-wrap.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header-wrap.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0 !important;
}
.mobile-nav-side .site-header-wrap.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header-wrap.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: 1;
grid-row-end: 3;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.75614rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
left: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: #F8F8F8;
margin: 0 -16px;
z-index: 100;
left: 0;
right: 0;
font-weight: normal;
background: #101010;
padding: 0 16px 8px;
border-radius: 5px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-right: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
top: 0;
/** Specific to Morden **/
left: 0;
/** Specific to Morden **/
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: transparent;
font-weight: normal;
}
}

75
morden/style.css
View file

@ -4591,43 +4591,56 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-right: 115px;
.mobile-nav-side .site-header-wrap.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header-wrap.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0 !important;
}
.mobile-nav-side .site-header-wrap.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header-wrap.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: 1;
grid-row-end: 3;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.75614rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
right: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: #F8F8F8;
margin: 0 -16px;
z-index: 100;
right: 0;
left: 0;
font-weight: normal;
background: #101010;
padding: 0 16px 8px;
border-radius: 5px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-left: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
top: 0;
/** Specific to Morden **/
right: 0;
/** Specific to Morden **/
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
background: transparent;
font-weight: normal;
}
}

1
rivington/sass/_config-child-theme-deep.scss
View file

@ -132,6 +132,7 @@ $config-global: (
/* Border radius */
"border-radius": (
"xs": (0.25 * $typescale-root),
"sm": (0.25 * $typescale-root),
"md": (0.5 * $typescale-root),
"lg": $typescale-root,

1
rivington/sass/_extra-child-theme.scss
View file

@ -459,5 +459,4 @@ a {
}
// Updates the Mobile Navigation to be next to the site title.
$mobile-nav-side-right-margin: 90px;
@import "../../varia/sass/components/header/_site-mobile-nav-side";

57
rivington/style-rtl.css
View file

@ -4425,29 +4425,52 @@ p:not(.site-title) a:hover {
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-left: 90px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.64rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
left: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
right: 16px;
background: #0d1f55;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #353a46;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-right: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

57
rivington/style.css
View file

@ -4454,29 +4454,52 @@ p:not(.site-title) a:hover {
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
margin-right: 90px;
.mobile-nav-side .site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
}
@media only screen and (max-width: 559px) {
.mobile-nav-side .main-navigation #toggle-menu {
.mobile-nav-side .site-header.has-menu > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.mobile-nav-side .site-header.has-menu .site-title {
align-self: end;
}
.mobile-nav-side .site-header.has-menu .site-description {
align-self: start;
}
.mobile-nav-side .site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
}
.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
padding: 12px;
display: inline-block;
text-align: center;
font-size: 0.64rem;
}
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
margin-top: 8px;
position: absolute;
top: 16px;
z-index: 100;
right: 16px;
}
.mobile-nav-side .main-navigation .menu-main-menu-container {
left: 16px;
background: #0d1f55;
margin: 0 -16px;
padding: 0 16px 8px;
border: 1px solid #353a46;
}
.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
padding-left: 16px;
/** todo: variable */
}
.mobile-nav-side .main-navigation .menu-main-menu-container a {
.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
padding: 8px 0;
line-height: 1;
}

91
varia/sass/components/header/_site-mobile-nav-side.scss
View file

@ -1,31 +1,66 @@
// Updates the Mobile Navigation to be next to the site title.
.mobile-nav-side .has-menu .site-logo,
.mobile-nav-side .has-menu .site-title,
.mobile-nav-side .has-menu .site-description {
@include media(mobile-only) {
margin-right: $mobile-nav-side-right-margin;
}
@include media(mobile-only) {
.mobile-nav-side {
.site-header.has-menu {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
& > * {
grid-column-start: 1;
grid-column-end: span 3;
margin: 0;
}
.site-title {
align-self: end;
}
.site-description {
align-self: start;
}
}
.site-header .main-navigation ~ * {
grid-column-start: 1;
grid-column-end: span col4-end;
}
.site-header #site-navigation.main-navigation {
grid-column-start: 4;
grid-column-end: col4-end;
grid-row-start: row1-start;
grid-row-end: 4;
margin: 0;
justify-self: end;
#toggle-menu {
padding: (1.5 * $baseline-unit);
display: inline-block;
text-align: center;
font-size: #{map-deep-get($config-global, "font", "size", "xs" )};
}
.menu-main-menu-container {
margin-top: $baseline-unit;
position: absolute;
z-index: 100;
right: 2 * $baseline-unit;
left: 2 * $baseline-unit;
background: #{map-deep-get($config-global, "color", "background", "light") };
padding: 0 (2 * $baseline-unit) $baseline-unit;
border: 1px solid #{map-deep-get( $config-global,"color","border","default")};
border-radius: #{map-deep-get($config-global, "border-radius", "xs" )};
}
.menu-main-menu-container {
a {
padding: $baseline-unit 0;
line-height: 1;
}
}
}
}
}
.mobile-nav-side .main-navigation {
@include media(mobile-only) {
#toggle-menu {
position: absolute;
top: 2 * $baseline-unit;
right: 2 * $baseline-unit;
}
.menu-main-menu-container {
background: #{map-deep-get($config-global, "color", "background", "light") };
margin:0 (-2 * $baseline-unit );
padding: 0 (2 * $baseline-unit) $baseline-unit;
.sub-menu {
padding-left: 2 * $baseline-unit; /** todo: variable */
}
a {
padding: $baseline-unit 0;
line-height: 1;
}
}
}
}