Changeset 38962

Timestamp:

10/26/2016 04:42:10 PM (8 years ago)

Author:

davidakennedy

Message:

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.

Location:

trunk/src/wp-content/themes/twentyseventeen

Files:

• assets/css/ie8.css (modified) (7 diffs)
• rtl.css (modified) (1 diff)
• style.css (modified) (2 diffs)

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

@@ -4 +4 @@
 */
 
+body {
+    font-size: 16px;
+}
 
 h1 {
@@ -36 +39 @@
 }
 
+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 {
@@ -51 +93 @@
     margin-bottom: -1px;
     padding: 0;
+}
+
+.no-svg .dropdown-toggle {
+    padding: 0.25em 0 0;
+}
+
+.no-svg .dropdown-toggle.toggled-on {
+    padding: 0.75em 0 0;
 }
 
@@ -63 +113 @@
 /* Front Page */
 
-.custom-header-image,
+.twentyseventeen-front-page.has-header-image .custom-header,
+.blog.home.has-header-image .custom-header,
 .panel-image {
-    height: 1000px;
-    max-height: 1000px;
+    height: 800px;
+    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%;
 }
 
@@ -82 +145 @@
 /* Posts */
 
+.blog .site-main > article,
+.archive .site-main > article,
+.search .site-main > article {
+    padding-bottom: 4em;
+}
+
 time.updated {
     display: none;
@@ -94 +163 @@
 }
 
-.blog .post,
-.archive .post,
-.search .post,
-.search .page {
-    padding-bottom: 4em;
+.single-post .entry-title,
+.page .entry-title,
+.entry-meta + .entry-title {
+    font-size: 26px;
+    font-weight: normal;
+    letter-spacing: normal;
+    padding-top: 0;
+    text-transform: none;
+}
+
+.entry-footer .cat-links,
+.entry-footer .tags-links {
+    padding-left: 0;
 }
 
@@ -105 +182 @@
 }
 
-img {
-    width: inherit;  /* Make images fill their parent's space. */
+ol.children .children {
+    padding-left: 2em;
 }
 
-/* Fixes linked images */
-.entry-content a img,
-.widget a img {
-    filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=0, OffY=5, Color=#fff);
+/* RTL Styles */
+
+.rtl .entry-footer .cat-links,
+.rtl .entry-footer .tags-links {
+    padding-right: 0;
 }
+
+.rtl ol.children .children {
+    padding-left: 0;
+    padding-right: 2em;
+}

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

@@ -245 +245 @@
 .gallery-caption {
     text-align: right;
+}
+
+/* SVG Fallback */
+
+.no-svg .dropdown-toggle {
+    left: 0;
+    right: auto;
 }
 

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

@@ -3018 +3018 @@
 }
 
+.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: 1em;
-    font-weight: 400;
-    line-height: 2.5em;
-    position: absolute;
-    top: 8px;
+    font-size: 20px;
+    font-size: 1.25rem;
+    font-weight: normal;
+    line-height: 1;
     -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
     -ms-transform: rotate(180deg); /* IE 9 */
@@ -3038 +3043 @@
 .no-svg .dropdown-toggle .svg-fallback.icon-expand:before {
     content: "\005E";
-    display: block;
-    height: 25px;
-    text-align: center;
-    width: 20px;
 }