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

Leven: Cleaning up Header styles, fix link underline behavior

Browse source
This commit is contained in:
Allan Cole 2019-07-25 11:48:27 -04:00
parent b1eb7b95af
commit 327132c11b
3 changed files with 191 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
leven/sass/_extra-child-theme.scss
View file

@ -1,7 +1,6 @@
/**
* Extra Child Theme Styles
*/
// @import "";
html {
letter-spacing: -0.02em;
@ -15,9 +14,12 @@ a {
text-decoration: none;
.wp-block-cover &,
.wp-block-cover-image & {
.wp-block-cover-image &,
.wp-block-media-text &,
p:not(.site-title) & {
text-decoration: underline;
&.wp-block-button__link,
&:hover {
text-decoration: none;
}
@ -25,52 +27,80 @@ a {
}
/**
* Mobile-Menu-Only
* Mobile-Menu
*/
.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"
" . social-navigation";
#masthead {
position: relative;
}
&:before,
&:after {
content: none;
display: none;
#toggle-menu {
position: absolute;
right: #{map-deep-get($config-global, "spacing", "unit")};
top: #{map-deep-get($config-global, "spacing", "unit")};
}
.site-branding {
max-width: calc(100% - 100px - #{map-deep-get($config-global, "spacing", "unit")});
}
/**
* CSS-grid Desktop Menu
*/
@include media(mobile) {
#toggle-menu {
position: inherit;
right: auto;
top: auto;
}
& > * {
margin-top: 0;
margin-bottom: 0;
}
.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"
" . social-navigation";
.site-logo {
display: block;
}
.site-branding {
grid-area: site-branding;
}
.main-navigation {
grid-area: main-navigation;
justify-self: end;
& > div > ul {
justify-content: flex-end;
&:before,
&:after {
content: none;
display: none;
}
}
.social-navigation {
grid-area: social-navigation;
justify-self: end;
& > div > ul {
justify-content: flex-end;
& > * {
margin-top: 0;
margin-bottom: 0;
}
.site-logo {
display: block;
}
.site-branding {
grid-area: site-branding;
max-width: unset;
}
.main-navigation {
grid-area: main-navigation;
justify-self: end;
& > div > ul {
justify-content: flex-end;
}
}
.social-navigation {
grid-area: social-navigation;
justify-self: end;
& > div > ul {
justify-content: flex-end;
}
}
}
}

95
leven/style-rtl.css
View file

@ -1545,7 +1545,7 @@ img {
ul,
ol {
font-family: "Crimson Text", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
margin: 0 16px 0 0;
padding: 0;
}
@ -3138,49 +3138,66 @@ a {
}
/**
* Mobile-Menu-Only
* Mobile-Menu
*/
.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" " . social-navigation";
#masthead {
position: relative;
}
.site-header:before, .site-header:after {
content: none;
display: none;
#toggle-menu {
position: absolute;
left: 16px;
top: 16px;
}
.site-header > * {
margin-top: 0;
margin-bottom: 0;
.site-branding {
max-width: calc(100% - 100px - 16px);
}
.site-header .site-logo {
display: block;
}
.site-header .site-branding {
grid-area: site-branding;
}
.site-header .main-navigation {
grid-area: main-navigation;
justify-self: end;
}
.site-header .main-navigation > div > ul {
justify-content: flex-end;
}
.site-header .social-navigation {
grid-area: social-navigation;
justify-self: end;
}
.site-header .social-navigation > div > ul {
justify-content: flex-end;
/**
* CSS-grid Desktop Menu
*/
@media only screen and (min-width: 560px) {
#toggle-menu {
position: inherit;
left: auto;
top: auto;
}
.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" " . social-navigation";
}
.site-header:before, .site-header:after {
content: none;
display: none;
}
.site-header > * {
margin-top: 0;
margin-bottom: 0;
}
.site-header .site-logo {
display: block;
}
.site-header .site-branding {
grid-area: site-branding;
max-width: unset;
}
.site-header .main-navigation {
grid-area: main-navigation;
justify-self: end;
}
.site-header .main-navigation > div > ul {
justify-content: flex-end;
}
.site-header .social-navigation {
grid-area: social-navigation;
justify-self: end;
}
.site-header .social-navigation > div > ul {
justify-content: flex-end;
}
}

106
leven/style.css
View file

@ -3133,59 +3133,83 @@ a {
}
.wp-block-cover a,
.wp-block-cover-image a {
.wp-block-cover-image a,
.wp-block-media-text a,
p:not(.site-title) a {
text-decoration: underline;
}
.wp-block-cover a:hover,
.wp-block-cover-image a:hover {
.wp-block-cover a.wp-block-button__link, .wp-block-cover a:hover,
.wp-block-cover-image a.wp-block-button__link,
.wp-block-cover-image a:hover,
.wp-block-media-text a.wp-block-button__link,
.wp-block-media-text a:hover,
p:not(.site-title) a.wp-block-button__link,
p:not(.site-title) a:hover {
text-decoration: none;
}
/**
* Mobile-Menu-Only
* Mobile-Menu
*/
.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" " . social-navigation";
#masthead {
position: relative;
}
.site-header:before, .site-header:after {
content: none;
display: none;
#toggle-menu {
position: absolute;
right: 16px;
top: 16px;
}
.site-header > * {
margin-top: 0;
margin-bottom: 0;
.site-branding {
max-width: calc(100% - 100px - 16px);
}
.site-header .site-logo {
display: block;
}
.site-header .site-branding {
grid-area: site-branding;
}
.site-header .main-navigation {
grid-area: main-navigation;
justify-self: end;
}
.site-header .main-navigation > div > ul {
justify-content: flex-end;
}
.site-header .social-navigation {
grid-area: social-navigation;
justify-self: end;
}
.site-header .social-navigation > div > ul {
justify-content: flex-end;
/**
* CSS-grid Desktop Menu
*/
@media only screen and (min-width: 560px) {
#toggle-menu {
position: inherit;
right: auto;
top: auto;
}
.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" " . social-navigation";
}
.site-header:before, .site-header:after {
content: none;
display: none;
}
.site-header > * {
margin-top: 0;
margin-bottom: 0;
}
.site-header .site-logo {
display: block;
}
.site-header .site-branding {
grid-area: site-branding;
max-width: unset;
}
.site-header .main-navigation {
grid-area: main-navigation;
justify-self: end;
}
.site-header .main-navigation > div > ul {
justify-content: flex-end;
}
.site-header .social-navigation {
grid-area: social-navigation;
justify-self: end;
}
.site-header .social-navigation > div > ul {
justify-content: flex-end;
}
}