Professional Business: Align page title when there are no posts, and add fallback for the Media & Text layout for IE 11.
This commit is contained in:
Laurel Fulford
parent
1e694f74c7
commit
f9fdb4fc87
4 changed files with 147 additions and 2 deletions
|
|
@ -763,7 +763,7 @@
|
|||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media(mobile) {
|
||||
|
||||
.wp-block-media-text__content {
|
||||
|
|
@ -773,7 +773,7 @@
|
|||
|
||||
@include media(tablet) {
|
||||
// Modify the default 50-50 proportion between image and text.
|
||||
grid-template-columns: 60% auto;
|
||||
grid-template-columns: 60% auto;
|
||||
|
||||
.wp-block-media-text__content {
|
||||
padding-right: calc(8% + 10px);
|
||||
|
|
@ -788,6 +788,34 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Temporary fix for IE 11 for this issue: https://github.com/WordPress/gutenberg/issues/11577
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
figure {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.wp-block-media-text__content {
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.has-media-on-the-right figure {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.has-media-on-the-right .wp-block-media-text__content {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//! Columns
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
.error-404.not-found,
|
||||
.no-results.not-found {
|
||||
|
||||
.page-title,
|
||||
.page-content {
|
||||
|
||||
margin: calc(3 * #{$size__spacing-unit}) #{$size__spacing-unit};
|
||||
|
|
|
|||
|
|
@ -1235,6 +1235,17 @@ body.page .main-navigation {
|
|||
margin-left: calc( .25 * 1rem);
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
|
||||
display: block;
|
||||
right: 0;
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
/* Non-mobile position */
|
||||
/* Nested sub-menu dashes */
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
|
||||
display: block;
|
||||
right: 0;
|
||||
|
|
@ -1247,6 +1258,21 @@ body.page .main-navigation {
|
|||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: auto;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
height: auto;
|
||||
min-width: -moz-max-content;
|
||||
min-width: -webkit-max-content;
|
||||
min-width: max-content;
|
||||
transform: none;
|
||||
}
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
|
|
@ -1264,6 +1290,13 @@ body.page .main-navigation {
|
|||
}
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
display: table;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
|
||||
right: 0;
|
||||
width: 100%;
|
||||
|
|
@ -1272,6 +1305,12 @@ body.page .main-navigation {
|
|||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
|
||||
left: 0;
|
||||
right: auto;
|
||||
display: block;
|
||||
width: max-content;
|
||||
}
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
|
||||
left: 0;
|
||||
right: auto;
|
||||
|
|
@ -1280,10 +1319,24 @@ body.page .main-navigation {
|
|||
}
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .submenu-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .submenu-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
|
||||
display: block;
|
||||
margin-top: inherit;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
/* Non-mobile position */
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
|
||||
display: block;
|
||||
margin-top: inherit;
|
||||
|
|
@ -1295,16 +1348,31 @@ body.page .main-navigation {
|
|||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
|
||||
float: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
|
||||
float: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
|
||||
counter-reset: submenu;
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
|
||||
counter-reset: submenu;
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu > li > a::before {
|
||||
font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
|
||||
font-weight: normal;
|
||||
content: "– " counters(submenu, "– ", none);
|
||||
counter-increment: submenu;
|
||||
}
|
||||
|
||||
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu > li > a::before {
|
||||
font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
|
||||
font-weight: normal;
|
||||
|
|
@ -4213,6 +4281,28 @@ body.page .main-navigation {
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast: none) {
|
||||
.entry .entry-content .wp-block-media-text:after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.entry .entry-content .wp-block-media-text figure {
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.entry .entry-content .wp-block-media-text.has-media-on-the-right figure {
|
||||
float: left;
|
||||
}
|
||||
.entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.entry .entry-content .wp-block-columns.alignfull {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
|
|
|
|||
|
|
@ -3188,13 +3188,17 @@ body.page .main-navigation {
|
|||
}
|
||||
|
||||
/* 404 & Not found */
|
||||
.error-404.not-found .page-title,
|
||||
.error-404.not-found .page-content,
|
||||
.no-results.not-found .page-title,
|
||||
.no-results.not-found .page-content {
|
||||
margin: calc(3 * 1rem) 1rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.error-404.not-found .page-title,
|
||||
.error-404.not-found .page-content,
|
||||
.no-results.not-found .page-title,
|
||||
.no-results.not-found .page-content {
|
||||
margin: calc(3 * 1rem) calc(10% + 60px) calc(1rem / 2);
|
||||
}
|
||||
|
|
@ -4293,6 +4297,28 @@ body.page .main-navigation {
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast: none) {
|
||||
.entry .entry-content .wp-block-media-text:after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.entry .entry-content .wp-block-media-text figure {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.entry .entry-content .wp-block-media-text .wp-block-media-text__content {
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
.entry .entry-content .wp-block-media-text.has-media-on-the-right figure {
|
||||
float: right;
|
||||
}
|
||||
.entry .entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.entry .entry-content .wp-block-columns.alignfull {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
|
|
|
|||
Loading…
Reference in a new issue