WordPress/wp-content/themes/twentyseventeen/assets/css/ie8.css
Joe McGill e2b7762e9a Twenty Seventeen: Better handling of custom headers when no image is set.
This ensures that a standard header is shown on the front page whenever
a header video is set without a header image if the video doesn't load,
e.g., on mobile sizes or if the JS doesn't fire.

This adds a new class, `.has-header-video` that is added whenever the
`wp-custom-header-video-loaded` event is fired, which is then used to style
the custom headers along with `.has-header-image` whenever a header image
is available. This also changes the class name on the custom header media
wrapping `div` from `.custom-header-image` to `.custom-header-media`.

Props laurelfulford, joemcgill.
Fixes #38995.
Built from https://develop.svn.wordpress.org/trunk@39413


git-svn-id: http://core.svn.wordpress.org/trunk@39353 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-12-02 05:12:41 +00:00

226 lines
3.6 KiB
CSS

/*
Theme Name: Twenty Seventeen
Description: IE8 specific style.
*/
body {
font-size: 16px;
}
h1 {
font-size: 30px;
font-size: 1.875rem;
}
h2,
.page .panel-content .recent-posts .entry-title {
font-size: 26px;
font-size: 1.625rem;
}
h3 {
font-size: 22px;
font-size: 1.375rem;
}
h4 {
font-size: 18px;
font-size: 1.125rem;
}
h5 {
font-size: 13px;
font-size: 0.8125rem;
}
h6 {
font-size: 16px;
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;
}
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header {
display: block;
}
.custom-header-media {
background-position: bottom center;
}
.site-branding {
padding: 45px 0;
}
.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding {
bottom: 0;
display: block;
left: 0;
height: auto;
padding-top: 0;
position: absolute;
width: 100%;
}
.has-header-image .custom-header-media img {
left: 0;
top: 0;
}
.site-title {
font-size: 36px;
font-weight: 700;
}
.site-description {
font-size: 16px;
}
/* Main Navigation */
.navigation-top {
background: #fff;
position: relative;
z-index: 10;
}
.menu-toggle {
width: 150px;
}
.main-navigation ul#top-menu {
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;
}
.dropdown-toggle .svg-fallback.icon-angle-down {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";
}
.dropdown-toggle.toggled-on .svg-fallback.icon-angle-down {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
}
/* Front Page */
.twentyseventeen-front-page.has-header-image .custom-header,
.blog.home.has-header-image .custom-header,
.panel-image {
height: 800px;
max-height: 800px;
padding-top: 0;
}
.twentyseventeen-front-page .custom-header-media,
.blog.home .custom-header-media {
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 {
font-size: 14px;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Posts */
.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
padding-bottom: 4em;
}
time.updated {
display: none;
}
time.published {
display: inline-block;
}
.blog .entry-title {
padding-top: 0;
}
.single-post .entry-title,
.page .entry-title,
.entry-meta + .entry-title {
font-size: 26px;
font-weight: 400;
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;
}
ol.children .children {
padding-left: 2em;
}
/* RTL Styles */
.rtl .has-header-image.twentyseventeen-front-page .site-branding,
.rtl .has-header-image.home.blog .site-branding {
left: auto;
right: 0;
}
.rtl .entry-footer .cat-links,
.rtl .entry-footer .tags-links {
padding-right: 0;
}
.rtl ol.children .children {
padding-left: 0;
padding-right: 2em;
}