Twenty Seventeen: Improve front end display in Internet Explorer 8

* Fixes the display issues with the header. The header doesn't look exactly like it does in newer browsers, but it's closer.
* Gets the font sizes a bit more consistent with how it looks like other browsers.
* IE8 doesn't support SVGs, so it's using the fallback styles for some of the icons. The fallbacks are limited to the absolutely necessary icons - so there is one for the submenu dropdown toggle icon, but not for the little 'hamburger' and X that sit in front of the 'menu' button.

Props laurelfulford.

Fixes #38472.


git-svn-id: https://develop.svn.wordpress.org/trunk@38962 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-content/themes/twentyseventeen/assets/css/ie8.css

@@ -3,6 +3,9 @@ Theme Name: Twenty Seventeen
 Description: IE8 specific style.
 */
 
+body {
+	font-size: 16px;
+}
 
 h1 {
 	font-size: 30px;
@@ -35,14 +38,53 @@ h6 {
 	font-size: 1rem;
 }
 
+img {
+	width: inherit;  /* Make images fill their parent's space. */
+}
+
+/* Fixes linked images */
+.entry-content a img,
+.widget a img {
+	filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=0, OffY=5, Color=#ffffff);
+}
+
+/* Layout */
+
+.site-content {
+    padding: 6.5em 0 0;
+}
+
 /* Site Branding */
 
+.custom-header {
+	overflow: hidden;
+}
+
+.custom-header-image {
+	background-position: bottom center;
+}
+
+.site-branding {
+	padding: 45px 0;
+}
+
 .site-title {
+	font-size: 36px;
 	font-weight: bolder;
 }
 
+.site-description {
+	font-size: 16px;
+}
+
 /* Main Navigation */
 
+.navigation-top {
+	background: #fff;
+	position: relative;
+	z-index: 10;
+}
+
 .menu-toggle {
 	width: 150px;
 }
@@ -52,6 +94,14 @@ h6 {
 	padding: 0;
 }
 
+.no-svg .dropdown-toggle {
+	padding: 0.25em 0 0;
+}
+
+.no-svg .dropdown-toggle.toggled-on {
+	padding: 0.75em 0 0;
+}
+
 .dropdown-toggle .svg-fallback.icon-expand {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";
 }
@@ -62,13 +112,26 @@ h6 {
 
 /* Front Page */
 
-.custom-header-image,
+.twentyseventeen-front-page.has-header-image .custom-header,
+.blog.home.has-header-image .custom-header,
 .panel-image {
-	height: 1000px;
+	height: 800px;
-	max-height: 1000px;
+	max-height: 800px;
 	padding-top: 0;
 }
 
+.twentyseventeen-front-page .custom-header-image,
+.blog.home .custom-header-image {
+	background-position: center center;
+}
+
+.twentyseventeen-front-page.has-header-image .site-branding,
+.home.blog.has-header-image .site-branding {
+	bottom: 20px;
+	position: absolute;
+	width: 100%;
+}
+
 .page .panel-content .entry-title,
 .page-title,
 .page .entry-title {
@@ -81,6 +144,12 @@ h6 {
 
 /* Posts */
 
+.blog .site-main > article,
+.archive .site-main > article,
+.search .site-main > article {
+    padding-bottom: 4em;
+}
+
 time.updated {
 	display: none;
 }
@@ -93,23 +162,37 @@ time.published {
 	padding-top: 0;
 }
 
-.blog .post,
+.single-post .entry-title,
-.archive .post,
+.page .entry-title,
-.search .post,
+.entry-meta + .entry-title {
-.search .page {
+	font-size: 26px;
-	padding-bottom: 4em;
+	font-weight: normal;
+	letter-spacing: normal;
+	padding-top: 0;
+	text-transform: none;
+}
+
+.entry-footer .cat-links,
+.entry-footer .tags-links {
+	padding-left: 0;
 }
 
 .comment-author .avatar {
 	z-index: -1;
 }
 
-img {
+ol.children .children {
-	width: inherit;  /* Make images fill their parent's space. */
+	padding-left: 2em;
 }
 
-/* Fixes linked images */
+/* RTL Styles */
-.entry-content a img,
+
-.widget a img {
+.rtl .entry-footer .cat-links,
-	filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=0, OffY=5, Color=#fff);
+.rtl .entry-footer .tags-links {
+	padding-right: 0;
 }
+
+.rtl ol.children .children {
+	padding-left: 0;
+	padding-right: 2em;
+}

src/wp-content/themes/twentyseventeen/rtl.css

@@ -246,6 +246,13 @@ input[type="checkbox"] {
 	text-align: right;
 }
 
+/* SVG Fallback */
+
+.no-svg .dropdown-toggle {
+	left: 0;
+	right: auto;
+}
+
 /* Media queries */
 
 @media screen and (min-width: 48em) {

src/wp-content/themes/twentyseventeen/style.css

@@ -3017,13 +3017,18 @@ article.panel-placeholder {
 	display: inline-block;
 }
 
+.no-svg .dropdown-toggle {
+	padding: 0.5em 0 0;
+	right: 0;
+	text-align: center;
+	width: 2em;
+}
+
 .no-svg .dropdown-toggle .svg-fallback.icon-expand {
-	font-size: 16px;
+	font-size: 20px;
-	font-size: 1em;
+	font-size: 1.25rem;
-	font-weight: 400;
+	font-weight: normal;
-	line-height: 2.5em;
+	line-height: 1;
-	position: absolute;
-	top: 8px;
 	-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
 	-ms-transform: rotate(180deg); /* IE 9 */
 	transform: rotate(180deg);
@@ -3037,10 +3042,6 @@ article.panel-placeholder {
 
 .no-svg .dropdown-toggle .svg-fallback.icon-expand:before {
 	content: "\005E";
-	display: block;
-	height: 25px;
-	text-align: center;
-	width: 20px;
 }
 
 /* Social Menu fallbacks */