Stratford: Fix padding issues in menu on mobile screens.

This commit is contained in:
Allan Cole 2019-08-22 18:40:36 -04:00
parent e38b54ed7e
commit 7700941e9e
4 changed files with 142 additions and 132 deletions

View file

@ -430,6 +430,45 @@ object {
padding-left: 0;
}
.wp-block-latest-posts > li > a {
font-family: "Poppins", sans-serif;
font-size: 1.728rem;
font-weight: 700;
line-height: 1.125;
}
.wp-block-latest-posts:not(.is-grid) > li {
/* Vertical margins logic */
margin-top: 32px;
margin-bottom: 32px;
}
.wp-block-latest-posts:not(.is-grid) > li:first-child {
margin-top: 0;
}
.wp-block-latest-posts:not(.is-grid) > li:last-child {
margin-bottom: 0;
}
.wp-block-latest-posts .wp-block-latest-posts__post-date {
color: #767676;
font-size: 0.83333rem;
line-height: 1.6;
}
[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
.has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
color: currentColor;
}
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
font-size: 0.83333rem;
line-height: 1.6;
margin: 0;
}
.wp-block-media-text .block-editor-inner-blocks {
padding-right: 16px;
padding-left: 16px;
@ -638,14 +677,20 @@ table th,
color: white !important;
}
.has-background:not(.has-background-background-color) a,
.has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6,
.has-background .wp-block-quote__citation {
color: currentColor;
}
.has-primary-background-color[class] {
background-color: #2c313f !important;
color: white;
}
.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6,
.has-primary-background-color[class] .wp-block-quote__citation {
color: currentColor;
.has-primary-background-color[class] {
background-color: #2c313f !important;
color: white;
}
.has-secondary-background-color[class] {
@ -653,71 +698,36 @@ table th,
color: white;
}
.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6,
.has-secondary-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-foreground-background-color[class] {
background-color: #74767e !important;
color: white;
}
.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6,
.has-foreground-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #767676 !important;
color: white;
}
.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6,
.has-foreground-light-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-foreground-dark-background-color[class] {
background-color: #111111 !important;
color: white;
}
.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6,
.has-foreground-dark-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #f3f3f3 !important;
color: #74767e;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6,
.has-background-light-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #DDDDDD !important;
color: #74767e;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6,
.has-background-dark-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #74767e;
}
.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6,
.has-background-background-color[class] .wp-block-quote__citation {
color: currentColor;
}
.is-small-text,
.has-small-font-size {
font-size: 0.83333em;

View file

@ -1531,12 +1531,29 @@ img {
line-height: 1.6;
}
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
color: currentColor;
}
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
font-size: 0.83333rem;
line-height: 1.6;
margin: 0;
}
.wp-block-latest-posts.alignfull {
padding-right: 16px;
padding-left: 16px;
}
.entry-content [class*="inner-container"] .wp-block-latest-posts.alignfull,
.entry-content .has-background .wp-block-latest-posts.alignfull {
padding-right: 0;
padding-left: 0;
}
.gallery-item {
display: inline-block;
text-align: center;
@ -1659,10 +1676,6 @@ p.has-background {
padding: 16px 16px;
}
p.has-background:not(.has-background-background-color) a {
color: currentColor;
}
.a8c-posts-list__listing {
list-style: none;
margin: 0;
@ -2063,78 +2076,52 @@ table th,
color: white !important;
}
.has-background:not(.has-background-background-color) a,
.has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6,
.has-background .wp-block-quote__citation {
color: currentColor;
}
.has-primary-background-color[class] {
background-color: #2c313f !important;
color: white;
}
.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 {
color: currentColor;
}
.has-secondary-background-color[class] {
background-color: #3e69dc !important;
color: white;
}
.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 {
color: currentColor;
}
.has-foreground-background-color[class] {
background-color: #74767e !important;
color: white;
}
.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #767676 !important;
color: white;
}
.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 {
color: currentColor;
}
.has-foreground-dark-background-color[class] {
background-color: #111111 !important;
color: white;
}
.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #f3f3f3 !important;
color: #74767e;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #DDDDDD !important;
color: #74767e;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #74767e;
}
.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6 {
color: currentColor;
}
.is-small-text,
.has-small-font-size {
font-size: 0.83333rem;
@ -2430,14 +2417,6 @@ table th,
}
}
.main-navigation > div > ul > li:first-of-type > a {
padding-right: 0;
}
.main-navigation > div > ul > li:last-of-type > a {
padding-left: 0;
}
.main-navigation > div > ul > li > a {
line-height: 1.5;
}
@ -2457,6 +2436,15 @@ table th,
margin-top: -0.36em;
}
@media only screen and (min-width: 560px) {
.main-navigation > div > ul > li:first-of-type > a {
padding-right: 0;
}
.main-navigation > div > ul > li:last-of-type > a {
padding-left: 0;
}
}
.main-navigation > div > ul > li > .sub-menu {
margin: 0;
position: relative;
@ -2486,7 +2474,13 @@ table th,
font-family: "Lato", sans-serif;
font-size: 0.83333rem;
font-weight: 700;
padding: 16px;
padding: 16px 0;
}
@media only screen and (min-width: 560px) {
.main-navigation a {
padding: 16px;
}
}
.main-navigation a:link, .main-navigation a:visited {

View file

@ -1531,12 +1531,29 @@ img {
line-height: 1.6;
}
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
.entry-content [class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date,
.entry-content .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date {
color: currentColor;
}
.wp-block-latest-posts .wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts .wp-block-latest-posts__post-full-content {
font-size: 0.83333rem;
line-height: 1.6;
margin: 0;
}
.wp-block-latest-posts.alignfull {
padding-left: 16px;
padding-right: 16px;
}
.entry-content [class*="inner-container"] .wp-block-latest-posts.alignfull,
.entry-content .has-background .wp-block-latest-posts.alignfull {
padding-left: 0;
padding-right: 0;
}
.gallery-item {
display: inline-block;
text-align: center;
@ -1659,10 +1676,6 @@ p.has-background {
padding: 16px 16px;
}
p.has-background:not(.has-background-background-color) a {
color: currentColor;
}
.a8c-posts-list__listing {
list-style: none;
margin: 0;
@ -2068,78 +2081,52 @@ table th,
color: white !important;
}
.has-background:not(.has-background-background-color) a,
.has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6,
.has-background .wp-block-quote__citation {
color: currentColor;
}
.has-primary-background-color[class] {
background-color: #2c313f !important;
color: white;
}
.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6 {
color: currentColor;
}
.has-secondary-background-color[class] {
background-color: #3e69dc !important;
color: white;
}
.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6 {
color: currentColor;
}
.has-foreground-background-color[class] {
background-color: #74767e !important;
color: white;
}
.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6 {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #767676 !important;
color: white;
}
.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6 {
color: currentColor;
}
.has-foreground-dark-background-color[class] {
background-color: #111111 !important;
color: white;
}
.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #f3f3f3 !important;
color: #74767e;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #DDDDDD !important;
color: #74767e;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #74767e;
}
.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6 {
color: currentColor;
}
.is-small-text,
.has-small-font-size {
font-size: 0.83333rem;
@ -2435,14 +2422,6 @@ table th,
}
}
.main-navigation > div > ul > li:first-of-type > a {
padding-left: 0;
}
.main-navigation > div > ul > li:last-of-type > a {
padding-right: 0;
}
.main-navigation > div > ul > li > a {
line-height: 1.5;
}
@ -2462,6 +2441,15 @@ table th,
margin-top: -0.36em;
}
@media only screen and (min-width: 560px) {
.main-navigation > div > ul > li:first-of-type > a {
padding-left: 0;
}
.main-navigation > div > ul > li:last-of-type > a {
padding-right: 0;
}
}
.main-navigation > div > ul > li > .sub-menu {
margin: 0;
position: relative;
@ -2491,7 +2479,13 @@ table th,
font-family: "Lato", sans-serif;
font-size: 0.83333rem;
font-weight: 700;
padding: 16px;
padding: 16px 0;
}
@media only screen and (min-width: 560px) {
.main-navigation a {
padding: 16px;
}
}
.main-navigation a:link, .main-navigation a:visited {

View file

@ -2342,6 +2342,11 @@ table th,
z-index: 1;
}
.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
cursor: pointer;
z-index: 99999;
}
.main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
cursor: pointer;
z-index: 99999;
@ -2354,6 +2359,14 @@ table th,
/* Submenu display */
}
.main-navigation > div > ul li:hover > ul,
.main-navigation > div > ul li[focus-within] > ul,
.main-navigation > div > ul li ul:hover,
.main-navigation > div > ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}
.main-navigation > div > ul li:hover > ul,
.main-navigation > div > ul li:focus-within > ul,
.main-navigation > div > ul li ul:hover,
.main-navigation > div > ul li ul:focus {
@ -2420,8 +2433,7 @@ table th,
font-family: sans-serif;
font-size: 1.2rem;
font-weight: bold;
padding-right: 0;
padding-left: 0;
padding: 16px 0;
}
@media only screen and (min-width: 560px) {