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

Mayland: Update the header layout to horizontal

Browse source
This commit is contained in:
Danny Dudzic 2019-09-02 18:01:41 +02:00
parent f8fb5acbea
commit 82d59a56be
3 changed files with 28 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -37,6 +37,12 @@ a {
@include media(mobile) {
padding: #{1.5 * $spacing_unit} $spacing_vertical;
}
.site-branding {
.site-description {
display: none;
}
}
}
/**
@ -44,13 +50,7 @@ a {
*/
@include media(mobile) {
.site-header {
align-items: center;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
grid-template-areas:
"site-branding main-navigation";
display: flex;
&:before,
&:after {
@ -64,8 +64,9 @@ a {
}
.site-branding {
grid-area: site-branding;
align-self: center;
flex: 1 1 auto;
padding-right: #{map-deep-get($config-global, "spacing", "unit")};
}
.site-logo {
@ -82,8 +83,6 @@ a {
.main-navigation {
align-self: center;
grid-area: main-navigation;
justify-self: flex-end;
& > div > ul {
justify-content: flex-end;
@ -91,7 +90,7 @@ a {
margin-right: -#{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
& > li > a {
padding: 0 #{map-deep-get($config-header, "main-nav", "link-padding")};
padding: #{0.5 * map-deep-get($config-header, "main-nav", "link-padding")} #{map-deep-get($config-header, "main-nav", "link-padding")};
}
& > .menu-item-has-children > a::after {
@ -141,6 +140,7 @@ a {
.social-navigation {
align-self: center;
justify-self: flex-end;
padding-left: #{map-deep-get($config-global, "spacing", "unit")};
}
}
}

18
mayland/style-rtl.css
View file

@ -3448,17 +3448,16 @@ p:not(.site-title) a:hover {
}
}
.site-header .site-branding .site-description {
display: none;
}
/**
* CSS-grid Desktop Menu
*/
@media only screen and (min-width: 560px) {
.site-header {
align-items: center;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-column-gap: 16px;
grid-template-areas: "site-branding main-navigation";
display: flex;
}
.site-header:before, .site-header:after {
content: none;
@ -3469,8 +3468,8 @@ p:not(.site-title) a:hover {
margin-bottom: 0;
}
.site-header .site-branding {
grid-area: site-branding;
align-self: center;
flex: 1 1 auto;
}
.site-header .site-logo + .site-title {
margin-top: 16px;
@ -3480,8 +3479,6 @@ p:not(.site-title) a:hover {
}
.site-header .main-navigation {
align-self: center;
grid-area: main-navigation;
justify-self: flex-end;
}
.site-header .main-navigation > div > ul {
justify-content: flex-end;
@ -3489,7 +3486,7 @@ p:not(.site-title) a:hover {
margin-left: -8px;
}
.site-header .main-navigation > div > ul > li > a {
padding: 0 16px;
padding: 8px 16px;
}
.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
font-size: 0.5rem;
@ -3536,6 +3533,7 @@ p:not(.site-title) a:hover {
.site-header .social-navigation {
align-self: center;
justify-self: flex-end;
padding-right: 16px;
}
}

19
mayland/style.css
View file

@ -3477,17 +3477,16 @@ p:not(.site-title) a:hover {
}
}
.site-header .site-branding .site-description {
display: none;
}
/**
* CSS-grid Desktop Menu
*/
@media only screen and (min-width: 560px) {
.site-header {
align-items: center;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-column-gap: 16px;
grid-template-areas: "site-branding main-navigation";
display: flex;
}
.site-header:before, .site-header:after {
content: none;
@ -3498,8 +3497,9 @@ p:not(.site-title) a:hover {
margin-bottom: 0;
}
.site-header .site-branding {
grid-area: site-branding;
align-self: center;
flex: 1 1 auto;
padding-right: 16px;
}
.site-header .site-logo + .site-title {
margin-top: 16px;
@ -3509,8 +3509,6 @@ p:not(.site-title) a:hover {
}
.site-header .main-navigation {
align-self: center;
grid-area: main-navigation;
justify-self: flex-end;
}
.site-header .main-navigation > div > ul {
justify-content: flex-end;
@ -3518,7 +3516,7 @@ p:not(.site-title) a:hover {
margin-right: -8px;
}
.site-header .main-navigation > div > ul > li > a {
padding: 0 16px;
padding: 8px 16px;
}
.site-header .main-navigation > div > ul > .menu-item-has-children > a::after {
font-size: 0.5rem;
@ -3565,6 +3563,7 @@ p:not(.site-title) a:hover {
.site-header .social-navigation {
align-self: center;
justify-self: flex-end;
padding-left: 16px;
}
}