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
This commit is contained in:
David A. Kennedy 2016-10-26 16:42:10 +00:00
parent 9e3f6d338b
commit 64117bbc6e
3 changed files with 115 additions and 24 deletions

View File

@ -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;
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%;
}
.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,
.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;
}
.comment-author .avatar {
z-index: -1;
}
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;
}

View File

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

View File

@ -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: 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 */
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 */