Twenty Thirteen: better handling of media in main content area, accounting for a sidebar and all viewport width possibilities. Props sabreuse and obenland, see #23955.

git-svn-id: http://core.svn.wordpress.org/trunk@23964 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2013-04-11 16:03:08 +00:00
parent fd39862cad
commit 2d85b8eb46
2 changed files with 48 additions and 3 deletions

View File

@ -177,6 +177,11 @@ div.nav-menu > ul {
* ---------------------------------------------------------------------------- * ----------------------------------------------------------------------------
*/ */
.sidebar .entry-media {
padding-left: 316px;
padding-right: 0;
}
.sidebar .entry-header, .sidebar .entry-header,
.sidebar .entry-content, .sidebar .entry-content,
.sidebar .entry-summary, .sidebar .entry-summary,
@ -349,6 +354,12 @@ div.nav-menu > ul {
transform: scaleX(-1); transform: scaleX(-1);
} }
.format-audio .entry-media,
.sidebar .format-audio .entry-media {
padding-left: 374px;
padding-right: 60px;
}
.format-audio .audio-content { .format-audio .audio-content {
background-position: right top; background-position: right top;
float: left; float: left;
@ -731,6 +742,13 @@ div.nav-menu > ul {
*/ */
@media (max-width: 1069px) { @media (max-width: 1069px) {
.sidebar .entry-media,
.format-audio .entry-media,
.sidebar .format-audio .entry-media {
padding-left: 376px;
padding-right: 60px;
}
ul.nav-menu, ul.nav-menu,
div.nav-menu > ul { div.nav-menu > ul {
margin-left: auto; margin-left: auto;
@ -772,6 +790,13 @@ div.nav-menu > ul {
padding-right: 0; padding-right: 0;
} }
.sidebar .entry-media,
.format-audio .entry-media,
.sidebar .format-audio .entry-media {
padding-left: 0;
padding-right: 0;
}
.site-main .widget-area { .site-main .widget-area {
float: none; float: none;
margin-left: auto; margin-left: auto;
@ -877,6 +902,8 @@ div.nav-menu > ul {
} }
.format-audio .audio-content { .format-audio .audio-content {
background: none;
float: none;
padding-left: auto; padding-left: auto;
padding-right: 0; padding-right: 0;
} }

View File

@ -1486,8 +1486,9 @@ footer.entry-meta {
font-weight: bold; font-weight: bold;
} }
.format-audio .entry-media { .format-audio .entry-media,
max-width: 604px; .sidebar .format-audio .entry-media {
padding: 0 374px 0 60px;
} }
.format-audio .entry-media:before { .format-audio .entry-media:before {
@ -2749,6 +2750,10 @@ footer.entry-meta {
} }
@media (max-width: 1069px) { @media (max-width: 1069px) {
.sidebar .entry-media {
padding: 0 376px 0 60px;
}
.sidebar img.alignleft, .sidebar img.alignleft,
.sidebar .wp-caption.alignleft { .sidebar .wp-caption.alignleft {
margin-left: 0; margin-left: 0;
@ -2822,6 +2827,8 @@ footer.entry-meta {
.sidebar .featured-gallery, .sidebar .featured-gallery,
.sidebar .post-navigation .nav-links, .sidebar .post-navigation .nav-links,
.author.sidebar .author-info, .author.sidebar .author-info,
.format-audio .entry-media,
.sidebar .format-audio .entry-media,
.sidebar .format-image .entry-content { .sidebar .format-image .entry-content {
max-width: 604px; max-width: 604px;
padding-left: 0; padding-left: 0;
@ -2840,6 +2847,11 @@ footer.entry-meta {
max-width: 604px; max-width: 604px;
} }
.sidebar .entry-media {
max-width: 724px;
}
.sidebar .entry-media,
.sidebar .archive-meta, .sidebar .archive-meta,
.attachment .entry-header, .attachment .entry-header,
.search.sidebar .page-content, .search.sidebar .page-content,
@ -2927,6 +2939,11 @@ footer.entry-meta {
width: 100%; width: 100%;
} }
.entry-media,
.sidebar .entry-media {
max-width: 604px;
}
.attachment .image-navigation, .attachment .image-navigation,
.attachment .entry-attachment .attachment { .attachment .entry-attachment .attachment {
max-width: 604px; max-width: 604px;
@ -2944,6 +2961,7 @@ footer.entry-meta {
font-size: 30px; font-size: 30px;
} }
#content .entry-media,
#content .entry-header, #content .entry-header,
#content .entry-content, #content .entry-content,
#content .entry-summary, #content .entry-summary,
@ -3110,7 +3128,7 @@ footer.entry-meta {
width: auto; width: auto;
} }
.format-audio .entry-content:before { .format-audio .entry-media:before {
display: none; display: none;
} }
} }