mirror of
https://github.com/WordPress/WordPress.git
synced 2024-07-05 03:05:01 +02:00
e2b7762e9a
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
44 lines
1.3 KiB
CSS
44 lines
1.3 KiB
CSS
/*
|
|
Theme Name: Twenty Seventeen
|
|
Description: IE9 specific styles.
|
|
*/
|
|
|
|
.has-header-image.twentyseventeen-front-page .custom-header,
|
|
.has-header-video.twentyseventeen-front-page .custom-header,
|
|
.has-header-image.home.blog .custom-header,
|
|
.has-header-video.home.blog .custom-header {
|
|
height: 300px;
|
|
}
|
|
|
|
.has-header-image .custom-header-media img,
|
|
.has-header-video .custom-header-media video,
|
|
.has-header-video .custom-header-media iframe {
|
|
min-width: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: 30em) {
|
|
|
|
.has-header-image.twentyseventeen-front-page .custom-header,
|
|
.has-header-video.twentyseventeen-front-page .custom-header,
|
|
.has-header-image.home.blog .custom-header,
|
|
.has-header-video.home.blog .custom-header,
|
|
.twentyseventeen-front-page.has-header-image .custom-header-media,
|
|
.home.blog.has-header-image .custom-header-media,
|
|
.panel-image {
|
|
height: 700px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 48em) {
|
|
|
|
.has-header-image.twentyseventeen-front-page .custom-header,
|
|
.has-header-video.twentyseventeen-front-page .custom-header,
|
|
.has-header-image.home.blog .custom-header,
|
|
.has-header-video.home.blog .custom-header,
|
|
.twentyseventeen-front-page.has-header-image .custom-header-media,
|
|
.home.blog.has-header-image .custom-header-media,
|
|
.panel-image {
|
|
height: 1000px;
|
|
}
|
|
}
|