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. Built from https://develop.svn.wordpress.org/trunk@38962 git-svn-id: http://core.svn.wordpress.org/trunk@38905 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
7819e2b4ba
commit
24ab3657cb
|
@ -3,6 +3,9 @@ Theme Name: Twenty Seventeen
|
||||||
Description: IE8 specific style.
|
Description: IE8 specific style.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
|
@ -35,14 +38,53 @@ h6 {
|
||||||
font-size: 1rem;
|
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 */
|
/* Site Branding */
|
||||||
|
|
||||||
|
.custom-header {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-header-image {
|
||||||
|
background-position: bottom center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-branding {
|
||||||
|
padding: 45px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.site-title {
|
.site-title {
|
||||||
|
font-size: 36px;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-description {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Main Navigation */
|
/* Main Navigation */
|
||||||
|
|
||||||
|
.navigation-top {
|
||||||
|
background: #fff;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
.menu-toggle {
|
.menu-toggle {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
@ -52,6 +94,14 @@ h6 {
|
||||||
padding: 0;
|
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 {
|
.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')";
|
-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 */
|
/* Front Page */
|
||||||
|
|
||||||
.custom-header-image,
|
.twentyseventeen-front-page.has-header-image .custom-header,
|
||||||
|
.blog.home.has-header-image .custom-header,
|
||||||
.panel-image {
|
.panel-image {
|
||||||
height: 1000px;
|
height: 800px;
|
||||||
max-height: 1000px;
|
max-height: 800px;
|
||||||
padding-top: 0;
|
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 .panel-content .entry-title,
|
||||||
.page-title,
|
.page-title,
|
||||||
.page .entry-title {
|
.page .entry-title {
|
||||||
|
@ -81,6 +144,12 @@ h6 {
|
||||||
|
|
||||||
/* Posts */
|
/* Posts */
|
||||||
|
|
||||||
|
.blog .site-main > article,
|
||||||
|
.archive .site-main > article,
|
||||||
|
.search .site-main > article {
|
||||||
|
padding-bottom: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
time.updated {
|
time.updated {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -93,23 +162,37 @@ time.published {
|
||||||
padding-top: 0;
|
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 {
|
.comment-author .avatar {
|
||||||
z-index: -1;
|
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;
|
||||||
|
}
|
|
@ -246,6 +246,13 @@ input[type="checkbox"] {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* SVG Fallback */
|
||||||
|
|
||||||
|
.no-svg .dropdown-toggle {
|
||||||
|
left: 0;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* Media queries */
|
/* Media queries */
|
||||||
|
|
||||||
@media screen and (min-width: 48em) {
|
@media screen and (min-width: 48em) {
|
||||||
|
|
|
@ -3017,13 +3017,18 @@ article.panel-placeholder {
|
||||||
display: inline-block;
|
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 {
|
.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 */
|
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
|
||||||
-ms-transform: rotate(180deg); /* IE 9 */
|
-ms-transform: rotate(180deg); /* IE 9 */
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
|
@ -3037,10 +3042,6 @@ article.panel-placeholder {
|
||||||
|
|
||||||
.no-svg .dropdown-toggle .svg-fallback.icon-expand:before {
|
.no-svg .dropdown-toggle .svg-fallback.icon-expand:before {
|
||||||
content: "\005E";
|
content: "\005E";
|
||||||
display: block;
|
|
||||||
height: 25px;
|
|
||||||
text-align: center;
|
|
||||||
width: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Social Menu fallbacks */
|
/* Social Menu fallbacks */
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
*
|
*
|
||||||
* @global string $wp_version
|
* @global string $wp_version
|
||||||
*/
|
*/
|
||||||
$wp_version = '4.7-alpha-38961';
|
$wp_version = '4.7-alpha-38962';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||||
|
|
Loading…
Reference in New Issue