From 08fb0d4133df2401fdca378f9de4c215836f969d Mon Sep 17 00:00:00 2001
From: iandstewart <iandstewart@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Fri, 3 Jun 2011 21:11:41 +0000
Subject: [PATCH] Twenty Eleven: Add border styles to images so we can better
 style linked images on :focus; includes updates to editor styles and
 improvements to Image Post styles; See #17524

git-svn-id: http://svn.automattic.com/wordpress/trunk@18132 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../themes/twentyeleven/colors/dark.css       |  62 ++++--
 .../themes/twentyeleven/content-image.php     |   9 +-
 .../themes/twentyeleven/editor-style.css      |  31 ++-
 wp-content/themes/twentyeleven/style.css      | 203 +++++++++++-------
 4 files changed, 198 insertions(+), 107 deletions(-)

diff --git a/wp-content/themes/twentyeleven/colors/dark.css b/wp-content/themes/twentyeleven/colors/dark.css
index 54699522b..15354c6cc 100644
--- a/wp-content/themes/twentyeleven/colors/dark.css
+++ b/wp-content/themes/twentyeleven/colors/dark.css
@@ -145,6 +145,42 @@ a {
 	color: #000;
 }
 
+/* Images */
+.wp-caption {
+	background: #2c2c2c;
+}
+.wp-caption .wp-caption-text {
+	color: #999;
+}
+.wp-caption .wp-caption-text:before {
+	color: #999;
+}
+
+/* Image borders */
+.entry-content img,
+.widget img,
+#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 {
+	background: #2c2c2c;
+	border-color: #444;
+}
+.wp-caption a:focus img,
+.wp-caption a:active img,
+.wp-caption a:hover img {
+	background: #0f0f0f;
+	border-color: #2c2c2c;
+}
+
 /* Password Protected Posts */
 .post-password-required input[type=password] {
 	background: #ddd;
@@ -208,10 +244,13 @@ a {
 /* =Image
 ----------------------------------------------- */
 
-.format-image .entry-meta .edit-link a {
+.indexed.format-image .wp-caption {
+	background: #242424;
+}
+.indexed.format-image .entry-meta .edit-link a {
 	color: #ddd;
 }
-.format-image .entry-meta .edit-link a:hover {
+.indexed.format-image .entry-meta .edit-link a:hover {
 	color: #fff;
 }
 
@@ -339,19 +378,14 @@ section.recent-posts .other-recent-posts .comments-link a:hover {
 	background: #060606;
 	border-color: #222;
 }
-
-
-/* =Images
------------------------------------------------ */
-
-.wp-caption {
-	background: #0b0d12;
+.image-attachment div.attachment a img {
+	border-color: #060606;
 }
-.wp-caption .wp-caption-text {
-	color: #999;
-}
-.wp-caption .wp-caption-text:before {
-	color: #64759d;
+.image-attachment div.attachment a:focus img,
+.image-attachment div.attachment a:hover img,
+.image-attachment div.attachment a:active img {
+	border-color: #2c2c2c;
+	background: #0f0f0f;
 }
 
 
diff --git a/wp-content/themes/twentyeleven/content-image.php b/wp-content/themes/twentyeleven/content-image.php
index 4681ac082..b957271d5 100644
--- a/wp-content/themes/twentyeleven/content-image.php
+++ b/wp-content/themes/twentyeleven/content-image.php
@@ -9,8 +9,7 @@
  * @since Twenty Eleven 1.0
  */
 ?>
-
-	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+	<article id="post-<?php the_ID(); ?>" <?php post_class( 'indexed' ); ?>>
 		<header class="entry-header">
 			<hgroup>
 				<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
@@ -24,16 +23,10 @@
 			<?php endif; ?>
 		</header><!-- .entry-header -->
 
-		<?php if ( is_search() ) : // Only display Excerpts for Search ?>
-		<div class="entry-summary">
-			<?php the_excerpt(); ?>
-		</div><!-- .entry-summary -->
-		<?php else : ?>
 		<div class="entry-content">
 			<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
 			<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( '<span>Pages:</span>', 'twentyeleven' ), 'after' => '</div>' ) ); ?>
 		</div><!-- .entry-content -->
-		<?php endif; ?>
 
 		<footer class="entry-meta">
 			<?php if ( 'post' == $post->post_type ) : // Hide category and tag text for pages on Search ?>
diff --git a/wp-content/themes/twentyeleven/editor-style.css b/wp-content/themes/twentyeleven/editor-style.css
index 4a218b301..eaa0f2877 100644
--- a/wp-content/themes/twentyeleven/editor-style.css
+++ b/wp-content/themes/twentyeleven/editor-style.css
@@ -49,6 +49,9 @@ hr {
 }
 
 /* Text elements */
+p, ul, ol, dl {
+	font-weight: 300;
+}
 p {
 	margin-bottom: 1.625em;
 }
@@ -247,17 +250,27 @@ p img,
 .wp-caption {
 	margin-top: 0.4em;
 }
+img {
+	border: 1px solid #ddd;
+	padding: 6px;
+}
+img.alignleft,
+img.alignright,
+img.aligncenter {
+	margin-bottom: 1.625em;
+}
 .wp-caption {
-	background: #f4f2ed;
+	background: #eee;
 	border: none;
 	margin-bottom: 1.625em;
 	max-width: 96%;
-	padding: 12px;
+	padding: 9px;
 }
 .wp-caption img {
 	display: block;
 	margin: 5px auto 0 !important;
 	max-width: 98%;
+	border-color: #eee;
 }
 .wp-caption .wp-caption-text,
 .wp-caption-dd {
@@ -270,7 +283,7 @@ p img,
 	text-align: left;
 }
 .wp-caption .wp-caption-text:before {
-	color: #9b8a62;
+	color: #666;
 	content: '\2014';
 	font-size: 14px;
 	font-style: normal;
@@ -279,4 +292,16 @@ p img,
 	position: absolute;
 	left: 10px;
 	top: 7px;
+}
+a:focus img,
+a:hover img,
+a:active img {
+	background: #eee;
+	border-color: #bbb;
+}
+.wp-caption a:focus img,
+.wp-caption a:active img,
+.wp-caption a:hover img {
+	background: #fff;
+	border-color: #ddd;
 }
\ No newline at end of file
diff --git a/wp-content/themes/twentyeleven/style.css b/wp-content/themes/twentyeleven/style.css
index bb50732ff..803d42dd3 100644
--- a/wp-content/themes/twentyeleven/style.css
+++ b/wp-content/themes/twentyeleven/style.css
@@ -828,6 +828,98 @@ dl.gallery-item {
 	display: block;
 }
 
+/* Images */
+img.size-auto,
+img.size-large,
+img.size-full,
+img.size-medium,
+img.size-thumbnail {
+	height: auto;
+	max-width: 97.5%;
+}
+img.wp-smiley {
+	margin-bottom: 0;
+	margin-top: 0;
+}
+img.alignleft,
+img.alignright,
+img.aligncenter {
+	margin-bottom: 1.625em;
+}
+p img,
+.wp-caption {
+	margin-top: 0.4em;
+}
+.wp-caption {
+	background: #eee;
+	margin-bottom: 1.625em;
+	max-width: 96%;
+	padding: 9px;
+}
+.wp-caption img {
+	display: block;
+	margin: 0 auto;
+	max-width: 98%;
+}
+.wp-caption .wp-caption-text,
+.gallery-caption {
+	color: #666;
+	font-family: Georgia, serif;
+	font-size: 12px;
+}
+.wp-caption .wp-caption-text {
+	margin-bottom: 0.6em;
+	padding: 10px 0px 5px 40px;
+	position: relative;
+}
+.wp-caption .wp-caption-text:before {
+	color: #666;
+	content: '\2014';
+	font-size: 14px;
+	font-style: normal;
+	font-weight: bold;
+	margin-right: 5px;
+	position: absolute;
+	left: 10px;
+	top: 7px;
+}
+.gallery {
+	margin: 0 auto 1.625em !important;
+}
+#content .gallery a img {
+    border: none;
+}
+img#wpstats {
+    display: block;
+    margin: 0 auto 1.625em;
+}
+
+/* Image borders */
+.entry-content img,
+.widget img,
+#content .gallery .gallery-icon img {
+	border: 1px solid #ddd;
+	padding: 6px;
+}
+.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 {
+	background: #eee;
+	border-color: #bbb;
+}
+.wp-caption a:focus img,
+.wp-caption a:active img,
+.wp-caption a:hover img {
+	background: #fff;
+	border-color: #ddd;
+}
+
 /* Password Protected Posts */
 .post-password-required .entry-header .comments-link {
 	margin: 1.625em 0 0;
@@ -1104,53 +1196,54 @@ blockquote.pull {
 /* =Image
 ----------------------------------------------- */
 
-.format-image .entry-content {
+.indexed.format-image .entry-content {
 	padding-top: 0.5em;
 }
-.format-image p {
-	margin: 0;
+.indexed.format-image p img {
+	margin-bottom: 0;
 }
-.format-image footer.entry-meta {
+.indexed.format-image footer.entry-meta {
 	background: #e0e6e8;
 	margin-top: -6px;
 	padding: 20px 30px;
 	overflow: hidden;
 }
-.format-image div.entry-meta {
+.indexed.format-image div.entry-meta {
 	display: inline-block;
 	float: left;
 	width: 35%;
 }
-.format-image div.entry-meta + div.entry-meta {
+.indexed.format-image div.entry-meta + div.entry-meta {
 	float: none;
 	width: 65%;
 }
-.format-image .entry-meta span.cat-links,
-.format-image .entry-meta span.tag-links,
-.format-image .entry-meta span.comments-link {
+.indexed.format-image .entry-meta span.cat-links,
+.indexed.format-image .entry-meta span.tag-links,
+.indexed.format-image .entry-meta span.comments-link {
 	display: block;
 }
-.format-image footer.entry-meta a {
+.indexed.format-image footer.entry-meta a {
 	color: #444;
 }
-.format-image .wp-caption {
+#content .indexed.format-image img {
+	border: none;
+	max-width: 100%;
+	padding: 0;
+}
+.indexed.format-image .wp-caption {
 	background: #111;
 	margin-bottom: 0;
 	max-width: 96%;
 	padding: 11px;
 }
-.format-image .wp-caption .wp-caption-text {
+.indexed.format-image .wp-caption .wp-caption-text {
 	color: #ddd;
 }
-.format-image .wp-caption .wp-caption-text:before {
+.indexed.format-image .wp-caption .wp-caption-text:before {
 	color: #444;
 }
-.single .format-image footer.entry-meta {
-	background: transparent;
-	padding: 30px 0;
-}
-.one-column .format-image footer.entry-meta {
-	margin-right: 2px;
+.indexed.format-image a:hover img {
+	opacity: 0.8;
 }
 
 
@@ -1502,6 +1595,15 @@ section.recent-posts .other-recent-posts li:after {
 	margin: 0 auto 1.625em;
 	width: 100%;
 }
+.image-attachment div.attachment a img {
+	border-color: #f9f9f9;
+}
+.image-attachment div.attachment a:focus img,
+.image-attachment div.attachment a:hover img,
+.image-attachment div.attachment a:active img {
+	border-color: #ddd;
+	background: #fff;
+}
 .image-attachment .entry-caption p {
 	font-size: 10px;
 	letter-spacing: 0.1em;
@@ -1511,69 +1613,6 @@ section.recent-posts .other-recent-posts li:after {
 }
 
 
-/* =Images
------------------------------------------------ */
-
-img.size-auto,
-img.size-large,
-img.size-full,
-img.size-medium,
-img.size-thumbnail {
-	height: auto;
-	max-width: 100%;
-}
-img.wp-smiley {
-	margin-bottom: 0;
-	margin-top: 0;
-}
-p img,
-.wp-caption {
-	margin-top: 0.4em;
-}
-.wp-caption {
-	background: #f4f2ed;
-	margin-bottom: 1.625em;
-	max-width: 96%;
-	padding: 12px;
-}
-.wp-caption img {
-	display: block;
-	margin: 5px auto 0;
-	max-width: 98%;
-}
-.wp-caption .wp-caption-text {
-	color: #666;
-	font-family: Georgia, serif;
-	font-size: 12px;
-	margin-bottom: 0.6em;
-	padding: 10px 0px 5px 40px;
-	position: relative;
-}
-.wp-caption .wp-caption-text:before {
-	color: #9b8a62;
-	content: '\2014';
-	font-size: 14px;
-	font-style: normal;
-	font-weight: bold;
-	margin-right: 5px;
-	position: absolute;
-	left: 10px;
-	top: 7px;
-}
-.gallery {
-	margin: 0 auto 1.625em !important;
-}
-#content .gallery a img {
-    border: none;
-}
-.gallery-caption {
-}
-img#wpstats {
-    display: block;
-    margin: 0 auto 1.625em;
-}
-
-
 /* =Navigation
 -------------------------------------------------------------- */