浏览代码

Professional Business: Align page title when there are no posts, and add fallback for the Media & Text layout for IE 11.

Laurel Fulford 6 年之前
父节点
当前提交
f9fdb4fc87

+ 30 - 2
professional-business/sass/blocks/_blocks.scss

@@ -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

+ 1 - 0
professional-business/sass/site/primary/_archives.scss

@@ -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};

+ 90 - 0
professional-business/style-rtl.css

@@ -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;

+ 26 - 0
professional-business/style.css

@@ -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;