diff --git a/alves/sass/_config-child-theme-deep.scss b/alves/sass/_config-child-theme-deep.scss index 5d2e7ac3a09227f7a10fb9b4748a29e758bf0ce9..ae726e79137a2724a346bcb33a525de0d54d9ce9 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 561d7ba7acca0d58843e50a538d2639612663463..915978530707cba95c0fa4c1fc22cfdc47273c4d 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 2e57c0c8c09ba3c4052fb9919558d67f0c57d20f..748ca34ee6770aa1b194583943884970e62edfa0 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 f7e406929c6a0c84da0ac14c94ecfb8198f70720..b0529a6048586dc4e3cfcd9c9aaacbdd5bb5cc4b 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 096c61d2210627432a3d5bff19916ab712a3c742..95562ca8bcbe340ea555d510c1543d86fe836ac1 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 89c5dc56f73d0f28da65a8c9347ee13f091ae4c0..56504587f143237aac347b78e93d33ccf7ae96b8 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 9b39ce4096e7eb908f1ea586e427af170d4fc398..689b9b6d348830c8bba3d12a077c778727255957 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 97e7754ea1863546a8690607348e8fb4562b3eab..992336fd2f8f90c6278de5c7ac548a8b357e2929 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 131c45a0797a0f7488380c5af006a35e410328aa..c7674bb1d3b5b457d02711f5344350105d605995 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 df0bfd38c3f5cf7e3cfd49d3adb87131ea8a5ac1..169044f68e52ffc6b36bd1787d753be629f85cec 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 4f6c2be522dcbf33674914f34712e9c0266153c8..32bd0d2f061f63572bd1ea09f002e3baa345d218 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 d7a622c63c75223dd5be8be01412bc153ee72fe3..2cfaa8f00a61ddcf5b6f9bb8f690f57a9a90df74 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 009d59d052a14babd4e6c109efb78a0cb084df99..d80d957bb7628b76b6f46ad1de5f7750203c0ff0 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 cd039186ba15450a855fb8ccc9f2a3021d04530c..90cd28c18b4c0e30950ae267a70ced345005516a 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 09b0b4758351b31e8d412b57f67ba85153d16920..066adb81e96820a61ddc4649452493216f852ddc 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 63bd0788c199f34c735f45eb9c71ca68ce641616..10518ed5be918e94817ff0602e8ff797296828b3 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 94282eddf14c264f4fb49bfc2ace545072e02afc..8b78c5d4b3c5192274ac68f94f62210412a7499f 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 16bd37b7a5523efc28d950e03d5669106d2fe033..a6dde782f24f3e4762787797faa39649d3f29d80 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 557f0f301e5c676e0981dbe0acb0c7284697fe66..b727caa594fcb62803b56c51c02ad2b743db5dbf 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 1b634ab093800b1aa5002fd3c3deed150fd1b448..00d348cea75c5de0033b7b6db4628b76d0068b75 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 8e1333b8725e073fed5b24adcfdd1468dc6083ff..a2081ab518f12132798148e3d19ab635a7232eb0 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 2a2db22690cf50ed72ca0752ca81cd1577771d1f..33d57d52f894c0434b8c2d269048c1ac095de413 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; + } + } + + .site-header .main-navigation ~ * { + grid-column-start: 1; + grid-column-end: span col4-end; } - .menu-main-menu-container { - background: transparent; + + .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 2d6a9d08fc8db71520672887dc7d48778b7c4a0f..61dbdc35e1178838d5a937506eaf123c270fb3fe 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 { - position: absolute; - top: 16px; - left: 16px; + .mobile-nav-side .site-header-wrap.has-menu > * { + grid-column-start: 1; + grid-column-end: span 3; + margin: 0 !important; } - .mobile-nav-side .main-navigation .menu-main-menu-container { - background: #F8F8F8; - margin: 0 -16px; - padding: 0 16px 8px; + .mobile-nav-side .site-header-wrap.has-menu .site-title { + align-self: end; } - .mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu { - padding-right: 16px; - /** todo: variable */ + .mobile-nav-side .site-header-wrap.has-menu .site-description { + align-self: start; } - .mobile-nav-side .main-navigation .menu-main-menu-container a { - padding: 8px 0; - line-height: 1; + .mobile-nav-side .site-header .main-navigation ~ * { + grid-column-start: 1; + grid-column-end: span col4-end; } -} - -@media only screen and (max-width: 559px) { - .mobile-nav-side .main-navigation #toggle-menu { - top: 0; - /** Specific to Morden **/ + .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; + z-index: 100; left: 0; - /** Specific to Morden **/ + right: 0; + font-weight: normal; + background: #101010; + padding: 0 16px 8px; + border-radius: 5px; } - .mobile-nav-side .main-navigation .menu-main-menu-container { - background: transparent; + .mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a { + padding: 8px 0; + line-height: 1; + font-weight: normal; } } diff --git a/morden/style.css b/morden/style.css index 37ff8a98bea34eeb33acd44262cfa21be50eaf33..49937c1181f0ff2d4aa04b90dc6038d06447f520 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 { - position: absolute; - top: 16px; - right: 16px; + .mobile-nav-side .site-header-wrap.has-menu > * { + grid-column-start: 1; + grid-column-end: span 3; + margin: 0 !important; } - .mobile-nav-side .main-navigation .menu-main-menu-container { - background: #F8F8F8; - margin: 0 -16px; - padding: 0 16px 8px; + .mobile-nav-side .site-header-wrap.has-menu .site-title { + align-self: end; } - .mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu { - padding-left: 16px; - /** todo: variable */ + .mobile-nav-side .site-header-wrap.has-menu .site-description { + align-self: start; } - .mobile-nav-side .main-navigation .menu-main-menu-container a { - padding: 8px 0; - line-height: 1; + .mobile-nav-side .site-header .main-navigation ~ * { + grid-column-start: 1; + grid-column-end: span col4-end; } -} - -@media only screen and (max-width: 559px) { - .mobile-nav-side .main-navigation #toggle-menu { - top: 0; - /** Specific to Morden **/ + .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; + z-index: 100; right: 0; - /** Specific to Morden **/ + left: 0; + font-weight: normal; + background: #101010; + padding: 0 16px 8px; + border-radius: 5px; } - .mobile-nav-side .main-navigation .menu-main-menu-container { - background: transparent; + .mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a { + padding: 8px 0; + line-height: 1; + font-weight: normal; } } diff --git a/rivington/sass/_config-child-theme-deep.scss b/rivington/sass/_config-child-theme-deep.scss index cbd565b78fbf69ea5e87e14fda6ac047a69a2021..b1ec82c8cbfd1b1ddb7e50dfa275f7980b51fe5e 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 dd15a30c83d045adaff9590c612a209cf43cdf85..aa42695f05b144f3a06d5dd7476030d40d5cfb86 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 1e92022dd1513ba2d4233bd7adac87ddb681eddf..7773ce3eba9ebca9ac08dba55eb496eb3e5f21d3 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 8f94f383d6cf2db863ed9c3bb7b44b374bfb7c4d..6a29baebae197b60d8a8cfd75ff768bd92d684b2 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 5e715be29d00a6bc2b9cfda06632429735c86b90..c30418ace551442c3a6b0112cc9f0ad489d88b79 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; + } -.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; - } - } - } + .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; + } + } + } + } } +