From af7b7c70ab97c6155278490682f9365a8e3eca34 Mon Sep 17 00:00:00 2001 From: iandstewart Date: Tue, 7 Jun 2011 21:28:56 +0000 Subject: [PATCH] Twenty Eleven: miscellaneous bug fixes and improvements * Only style images uploaded to the WordPress media library with border styles (and not placeholder images for content added by plugins) * Prevent content added by plugins and long custom excerpts from overflowing the featured post slider * Make sure small thumbnails will never appear in the Custom Header area * Better indicate the current featured post with custom link color and cursor * Add a class for text-only featured posts * Style improvements for small screens git-svn-id: http://svn.automattic.com/wordpress/trunk@18181 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../themes/twentyeleven/colors/dark.css | 25 +++-- wp-content/themes/twentyeleven/header.php | 2 +- .../themes/twentyeleven/inc/theme-options.php | 3 +- wp-content/themes/twentyeleven/showcase.php | 2 + wp-content/themes/twentyeleven/style.css | 104 ++++++++++++++---- 5 files changed, 101 insertions(+), 35 deletions(-) diff --git a/wp-content/themes/twentyeleven/colors/dark.css b/wp-content/themes/twentyeleven/colors/dark.css index a466682724..1d4fdd12b0 100644 --- a/wp-content/themes/twentyeleven/colors/dark.css +++ b/wp-content/themes/twentyeleven/colors/dark.css @@ -157,20 +157,16 @@ a { } /* Image borders */ -.entry-content img, -.widget img, +img[class*="wp-image-"], #content .gallery .gallery-icon img { border-color: #2c2c2c; } .wp-caption img { border-color: #2c2c2c; } -.entry-content a:focus img, -.entry-content a:hover img, -.entry-content a:active img, -.widget a:focus img, -.widget a:hover img, -.widget a:active img { +a:focus img[class*="wp-image-"], +a:hover img[class*="wp-image-"], +a:active img[class*="wp-image-"] { background: #2c2c2c; border-color: #444; } @@ -325,12 +321,19 @@ section.feature-image.large img { } /* Featured Slider */ -.featured-posts { - border-bottom: 1px solid #171717; -} .featured-posts section.featured-post { background: #000; } +.featured-post .feature-text:after, +.featured-post .feature-image.small:after { + background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */ +} .feature-slider a { background: #c3c3c3; background: rgba(60,60,60,0.9); diff --git a/wp-content/themes/twentyeleven/header.php b/wp-content/themes/twentyeleven/header.php index 6e8a0863c8..49ef1bf61a 100644 --- a/wp-content/themes/twentyeleven/header.php +++ b/wp-content/themes/twentyeleven/header.php @@ -86,7 +86,7 @@ // Check if this is a post or page, if it has a thumbnail, and if it's a big one if ( is_singular() && has_post_thumbnail( $post->ID ) && - ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && + ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) && $image[1] >= HEADER_IMAGE_WIDTH ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); diff --git a/wp-content/themes/twentyeleven/inc/theme-options.php b/wp-content/themes/twentyeleven/inc/theme-options.php index 4b561e14ca..2c12865062 100644 --- a/wp-content/themes/twentyeleven/inc/theme-options.php +++ b/wp-content/themes/twentyeleven/inc/theme-options.php @@ -346,7 +346,8 @@ function twentyeleven_print_link_color_style() { article.feature-image.small .entry-summary p a:hover, .entry-header .comments-link a:hover, .entry-header .comments-link a:focus, - .entry-header .comments-link a:active { + .entry-header .comments-link a:active, + .feature-slider a.active { background: ; } diff --git a/wp-content/themes/twentyeleven/showcase.php b/wp-content/themes/twentyeleven/showcase.php index 4ecfd7559f..9db191e015 100644 --- a/wp-content/themes/twentyeleven/showcase.php +++ b/wp-content/themes/twentyeleven/showcase.php @@ -89,6 +89,8 @@ get_header(); ?> // If bigger, let's add a BIGGER class. It's EXTRA classy now. $feature_class = 'feature-image large'; } + } else { + $feature_class = 'feature-text'; } ?> diff --git a/wp-content/themes/twentyeleven/style.css b/wp-content/themes/twentyeleven/style.css index 78fabb180f..d52c702de1 100644 --- a/wp-content/themes/twentyeleven/style.css +++ b/wp-content/themes/twentyeleven/style.css @@ -833,11 +833,7 @@ dl.gallery-item { } /* Images */ -img.size-auto, -img.size-large, -img.size-full, -img.size-medium, -img.size-thumbnail { +img[class*="wp-image-"] { height: auto; max-width: 97.5%; } @@ -912,8 +908,7 @@ img#wpstats { } /* Image borders */ -.entry-content img, -.widget img, +img[class*="wp-image-"], #content .gallery .gallery-icon img { border: 1px solid #ddd; padding: 6px; @@ -921,12 +916,9 @@ img#wpstats { .wp-caption img { border-color: #eee; } -.entry-content a:focus img, -.entry-content a:hover img, -.entry-content a:active img, -.widget a:focus img, -.widget a:hover img, -.widget a:active img { +a:focus img[class*="wp-image-"], +a:hover img[class*="wp-image-"], +a:active img[class*="wp-image-"] { background: #eee; border-color: #bbb; } @@ -1367,19 +1359,20 @@ section.featured-post .entry-meta { /* Small featured post */ section.featured-post .attachment-small-feature { - border-right: 20px solid #bbb; float: right; height: auto; margin: 0 -8.9% 1.625em 0; max-width: 59%; position: relative; - right: -35px; + right: -15px; } section.featured-post.small { padding-top: 0; } -section.featured-post .attachment-small-feature:hover { - border-color: #888; +section.featured-post .attachment-small-feature:hover, +section.featured-post .attachment-small-feature:focus, +section.featured-post .attachment-small-feature:active { + opacity: .8; } article.feature-image.small { float: left; @@ -1403,6 +1396,7 @@ article.feature-image.small .entry-summary p a { text-decoration: none; top: 20px; width: 180px; + z-index: 1; } article.feature-image.small .entry-summary p a:hover { background: #1982d1; @@ -1455,13 +1449,14 @@ section.feature-image.large img { /* Featured Slider */ .featured-posts { - border-bottom: 1px solid #e8e8e8; + border-bottom: 1px solid #ddd; display: block; height: 328px; margin: 1.625em -8.9% 20px; max-width: 1000px; padding: 0; position: relative; + overflow: hidden; } .featured-posts .showcase-heading { padding-left: 8.9%; @@ -1495,6 +1490,24 @@ section.feature-image.large img { opacity: 1; visibility: visible; } +.featured-post .feature-text:after, +.featured-post .feature-image.small:after { + content: ' '; + background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ + background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */ + width: 100%; + height: 45px; + position: absolute; + top: 230px; +} +.featured-post .feature-image.small:after { + top: 253px; +} #content .feature-slider { top: 5px; right: 8.9%; @@ -1522,11 +1535,12 @@ section.feature-image.large img { height: 14px; } .feature-slider a.active { - background: #fff; - background: rgba(255,255,255,0.8); + background: #1982d1; -webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8); -moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8); box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8); + cursor: default; + opacity: 0.5; } /* Recent Posts */ @@ -2169,7 +2183,7 @@ p.comment-form-comment { color: #666; font-size: 12px; line-height: 2.2em; - padding: 2.2em 0; + padding: 2.2em 0.5em; text-align: center; } #site-generator a { @@ -2305,6 +2319,40 @@ p.comment-form-comment { } } @media (max-width: 650px) { + /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */ + body, input, textarea { + font-size: 13px; + } + #site-title a { + font-size: 24px; + } + #site-description { + font-size: 12px; + } + #access ul { + font-size: 12px; + } + article.intro .entry-content { + font-size: 12px; + } + .entry-title { + font-size: 21px; + } + .featured-post .entry-title { + font-size: 14px; + } + .singular .entry-title { + font-size: 28px; + } + .entry-meta { + font-size: 12px; + } + blockquote { + margin: 0; + } + blockquote.pull { + font-size: 17px; + } /* Reposition the site title and description slightly */ #site-title { padding: 5.30625em 0 0; @@ -2329,6 +2377,12 @@ p.comment-form-comment { display: block; position: static; } + .singular .hentry { + padding: 1.625em 0 0; + } + .singular.page .hentry { + padding: 1.625em 0 0; + } /* Talking avatars take up too much room at this size */ .commentlist > li.comment, .commentlist > li.pingback { @@ -2376,7 +2430,13 @@ p.comment-form-comment { } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { body { - padding: 0 .5em; + padding: 0; + } + #page { + margin-top: 0; + } + #branding { + border-top: none; } }