diff --git a/alves/sass/_config-child-theme-deep.scss b/alves/sass/_config-child-theme-deep.scss index 5d2e7ac3a..ae726e791 100644 --- a/alves/sass/_config-child-theme-deep.scss +++ b/alves/sass/_config-child-theme-deep.scss @@ -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, diff --git a/alves/sass/_extra-child-theme.scss b/alves/sass/_extra-child-theme.scss index 561d7ba7a..915978530 100644 --- a/alves/sass/_extra-child-theme.scss +++ b/alves/sass/_extra-child-theme.scss @@ -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"; diff --git a/alves/style-rtl.css b/alves/style-rtl.css index 2e57c0c8c..748ca34ee 100644 --- a/alves/style-rtl.css +++ b/alves/style-rtl.css @@ -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; } diff --git a/alves/style.css b/alves/style.css index f7e406929..b0529a604 100644 --- a/alves/style.css +++ b/alves/style.css @@ -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; } diff --git a/barnsbury/sass/_config-child-theme-deep.scss b/barnsbury/sass/_config-child-theme-deep.scss index 096c61d22..95562ca8b 100644 --- a/barnsbury/sass/_config-child-theme-deep.scss +++ b/barnsbury/sass/_config-child-theme-deep.scss @@ -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, diff --git a/barnsbury/sass/_extra-child-theme.scss b/barnsbury/sass/_extra-child-theme.scss index 89c5dc56f..56504587f 100644 --- a/barnsbury/sass/_extra-child-theme.scss +++ b/barnsbury/sass/_extra-child-theme.scss @@ -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"; diff --git a/barnsbury/style-rtl.css b/barnsbury/style-rtl.css index 9b39ce409..689b9b6d3 100644 --- a/barnsbury/style-rtl.css +++ b/barnsbury/style-rtl.css @@ -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; } diff --git a/barnsbury/style.css b/barnsbury/style.css index 97e7754ea..992336fd2 100644 --- a/barnsbury/style.css +++ b/barnsbury/style.css @@ -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; } diff --git a/dalston/sass/_config-child-theme-deep.scss b/dalston/sass/_config-child-theme-deep.scss index 131c45a07..c7674bb1d 100644 --- a/dalston/sass/_config-child-theme-deep.scss +++ b/dalston/sass/_config-child-theme-deep.scss @@ -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, diff --git a/dalston/sass/_extra-child-theme.scss b/dalston/sass/_extra-child-theme.scss index df0bfd38c..169044f68 100644 --- a/dalston/sass/_extra-child-theme.scss +++ b/dalston/sass/_extra-child-theme.scss @@ -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 { diff --git a/dalston/style-rtl.css b/dalston/style-rtl.css index 4f6c2be52..32bd0d2f0 100644 --- a/dalston/style-rtl.css +++ b/dalston/style-rtl.css @@ -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; } diff --git a/dalston/style.css b/dalston/style.css index d7a622c63..2cfaa8f00 100644 --- a/dalston/style.css +++ b/dalston/style.css @@ -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; } diff --git a/hever/sass/_config-child-theme-deep.scss b/hever/sass/_config-child-theme-deep.scss index 009d59d05..d80d957bb 100644 --- a/hever/sass/_config-child-theme-deep.scss +++ b/hever/sass/_config-child-theme-deep.scss @@ -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), diff --git a/hever/sass/_extra-child-theme.scss b/hever/sass/_extra-child-theme.scss index cd039186b..90cd28c18 100644 --- a/hever/sass/_extra-child-theme.scss +++ b/hever/sass/_extra-child-theme.scss @@ -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"; diff --git a/hever/style-rtl.css b/hever/style-rtl.css index 09b0b4758..066adb81e 100644 --- a/hever/style-rtl.css +++ b/hever/style-rtl.css @@ -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; } diff --git a/hever/style.css b/hever/style.css index 63bd0788c..10518ed5b 100644 --- a/hever/style.css +++ b/hever/style.css @@ -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; } diff --git a/mayland/sass/_config-child-theme-deep.scss b/mayland/sass/_config-child-theme-deep.scss index 94282eddf..8b78c5d4b 100644 --- a/mayland/sass/_config-child-theme-deep.scss +++ b/mayland/sass/_config-child-theme-deep.scss @@ -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, diff --git a/mayland/sass/_extra-child-theme.scss b/mayland/sass/_extra-child-theme.scss index 16bd37b7a..a6dde782f 100644 --- a/mayland/sass/_extra-child-theme.scss +++ b/mayland/sass/_extra-child-theme.scss @@ -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 { diff --git a/mayland/style-rtl.css b/mayland/style-rtl.css index 557f0f301..b727caa59 100644 --- a/mayland/style-rtl.css +++ b/mayland/style-rtl.css @@ -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; } diff --git a/mayland/style.css b/mayland/style.css index 1b634ab09..00d348cea 100644 --- a/mayland/style.css +++ b/mayland/style.css @@ -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; } diff --git a/morden/sass/_config-child-theme-deep.scss b/morden/sass/_config-child-theme-deep.scss index 8e1333b87..a2081ab51 100644 --- a/morden/sass/_config-child-theme-deep.scss +++ b/morden/sass/_config-child-theme-deep.scss @@ -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), diff --git a/morden/sass/_extra-child-theme.scss b/morden/sass/_extra-child-theme.scss index 2a2db2269..33d57d52f 100644 --- a/morden/sass/_extra-child-theme.scss +++ b/morden/sass/_extra-child-theme.scss @@ -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; + } + } } } } diff --git a/morden/style-rtl.css b/morden/style-rtl.css index 2d6a9d08f..61dbdc35e 100644 --- a/morden/style-rtl.css +++ b/morden/style-rtl.css @@ -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; } } diff --git a/morden/style.css b/morden/style.css index 37ff8a98b..49937c118 100644 --- a/morden/style.css +++ b/morden/style.css @@ -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; } } diff --git a/rivington/sass/_config-child-theme-deep.scss b/rivington/sass/_config-child-theme-deep.scss index cbd565b78..b1ec82c8c 100644 --- a/rivington/sass/_config-child-theme-deep.scss +++ b/rivington/sass/_config-child-theme-deep.scss @@ -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, diff --git a/rivington/sass/_extra-child-theme.scss b/rivington/sass/_extra-child-theme.scss index dd15a30c8..aa42695f0 100644 --- a/rivington/sass/_extra-child-theme.scss +++ b/rivington/sass/_extra-child-theme.scss @@ -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"; diff --git a/rivington/style-rtl.css b/rivington/style-rtl.css index 1e92022dd..7773ce3eb 100644 --- a/rivington/style-rtl.css +++ b/rivington/style-rtl.css @@ -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; } diff --git a/rivington/style.css b/rivington/style.css index 8f94f383d..6a29baeba 100644 --- a/rivington/style.css +++ b/rivington/style.css @@ -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; } diff --git a/varia/sass/components/header/_site-mobile-nav-side.scss b/varia/sass/components/header/_site-mobile-nav-side.scss index 5e715be29..c30418ace 100644 --- a/varia/sass/components/header/_site-mobile-nav-side.scss +++ b/varia/sass/components/header/_site-mobile-nav-side.scss @@ -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; - } - } - } -}