Themes: Adjust screenshot ratios.

* On the details overlay, always show the full 4/3 ratio.
 * On the grid, reduce to ~3/2 only if the screen width is less than 1400px. Otherwise, show the screenshot at 4/3 ratio.

props matveb, nacin.
fixes #26159.

Built from https://develop.svn.wordpress.org/trunk@26739


git-svn-id: http://core.svn.wordpress.org/trunk@26628 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin 2013-12-06 19:51:10 +00:00
parent 3964c1f132
commit 0446853711
4 changed files with 28 additions and 18 deletions

View File

@ -6436,7 +6436,7 @@ span.imgedit-scale-warn {
.theme-browser .theme .theme-screenshot:after {
content: '';
display: block;
padding-top: 66%; /* using a 3/2 aspect ratio */
padding-top: 66.66666%; /* using a 3/2 aspect ratio */
}
.theme-browser .theme .theme-screenshot img {
@ -6884,7 +6884,7 @@ body.folded .theme-overlay .theme-wrap {
.theme-overlay .screenshot:after {
content: '';
display: block;
padding-top: 66.66666%; /* using a 3/2 aspect ratio */
padding-top: 75%; /* using a 4/3 aspect ratio */
}
.theme-overlay .screenshot img {
@ -7117,6 +7117,11 @@ body.folded .theme-overlay .theme-wrap {
}
}
@media only screen and (min-width:1400px) {
.theme-browser .theme .theme-screenshot:after {
padding-top: 75%; /* using a 4/3 aspect ratio */
}
}
@media only screen and (max-width: 1150px) {
.theme-browser .theme {
width: 47.5%;
@ -7996,12 +8001,12 @@ body.press-this {
margin-left: 0;
}
.about-wrap .about-updates img {
margin: 2em 0 0 0;
border: 1px solid #ddd;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.about-wrap .about-updates img {
margin: 2em 0 0 0;
border: 1px solid #ddd;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.about-wrap .changelog .feature-section {
overflow: hidden;

File diff suppressed because one or more lines are too long

View File

@ -6436,7 +6436,7 @@ span.imgedit-scale-warn {
.theme-browser .theme .theme-screenshot:after {
content: '';
display: block;
padding-top: 66%; /* using a 3/2 aspect ratio */
padding-top: 66.66666%; /* using a 3/2 aspect ratio */
}
.theme-browser .theme .theme-screenshot img {
@ -6884,7 +6884,7 @@ body.folded .theme-overlay .theme-wrap {
.theme-overlay .screenshot:after {
content: '';
display: block;
padding-top: 66.66666%; /* using a 3/2 aspect ratio */
padding-top: 75%; /* using a 4/3 aspect ratio */
}
.theme-overlay .screenshot img {
@ -7117,6 +7117,11 @@ body.folded .theme-overlay .theme-wrap {
}
}
@media only screen and (min-width:1400px) {
.theme-browser .theme .theme-screenshot:after {
padding-top: 75%; /* using a 4/3 aspect ratio */
}
}
@media only screen and (max-width: 1150px) {
.theme-browser .theme {
width: 47.5%;
@ -7996,12 +8001,12 @@ body.press-this {
margin-right: 0;
}
.about-wrap .about-updates img {
margin: 2em 0 0 0;
border: 1px solid #ddd;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.about-wrap .about-updates img {
margin: 2em 0 0 0;
border: 1px solid #ddd;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.about-wrap .changelog .feature-section {
overflow: hidden;

File diff suppressed because one or more lines are too long