From 1a69c1dec52c78a9e2203a3dc250c5ec08a297ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rory=20O=E2=80=99Kane?= <rory@roryokane.com>
Date: Thu, 5 Sep 2013 11:09:30 -0400
Subject: [PATCH] make legend on home page more helpful by moving and restyling

style "Maroon" in the legend like the labs items it refers to

make the legend stand apart from the list more

and refactor the .labs-example styles

The `<b>` element is perfectly legitimate here: http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element . I am making the '*'s stand out more without conveying extra importance or alternate voice or mood.

style legend with a grey border

to show that it's a different type of content from the lists above

also changed from a `div` with `p`s to a `ul`, as that matches semantics more closely

move legend under the first app list

and remove grey border around legend, since the legend is prominent enough now without it

done at request of https://github.com/tastejs/todomvc/pull/675#issuecomment-23901896
---
 index.html        |  6 ++++--
 site/css/main.css | 23 ++++++++++++++++++++---
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 68b670c7a0..d03a9f6c23 100644
--- a/index.html
+++ b/index.html
@@ -147,6 +147,10 @@ <h2>JavaScript Apps</h2>
 							<a href="labs/architecture-examples/sapui5/" data-source="http://scn.sap.com/community/developer-center/front-end" data-content="SAPUI5 is SAP's HTML5-based UI technology that allows you to build rich, interactive Web applications.">SAPUI5</a>
 						</li>
 					</ul>
+					<ul class="legend">
+						<li><b>*</b> <span class="label">R</span> = App also demonstrates routing</li>
+						<li><b>*</b> <span class="labs-example">Maroon</span> = App requires further work to be spec-compliant</li>
+					</ul>
 					<hr>
 					<h2>Compile To JavaScript</h2>
 					<ul class="applist ctojs">
@@ -251,8 +255,6 @@ <h2>Compare these to a non-framework implementation</h2>
 							<a href="architecture-examples/jquery/" data-source="http://jquery.com" data-content="jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.">jQuery</a>
 						</li>
 					</ul>
-					<p>* <span class="label">R</span> = App also demonstrates routing</p>
-					<p>* Maroon = App requires further work to be spec-compliant</p>
 				</div>
 			</div>
 			<hr>
diff --git a/site/css/main.css b/site/css/main.css
index 8f56dcf353..51ef5182ef 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -170,12 +170,12 @@ header nav a:not(:last-child) {
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 
-.applist .labs a{
-	color:#582C42;
+.applist .labs a, .labs-example {
+	color: #582C42;
 }
 
 .applist .label,
-p .label {
+.legend .label {
 	position: relative;
 	top: -3px;
 	font-size: 9px;
@@ -196,6 +196,23 @@ p .label {
 	columns: 2;
 }
 
+.legend {
+	margin-top: 20px;
+	margin-left: 0;
+	list-style-type: none;
+}
+
+.legend li {
+	margin-bottom: 0.5em;
+}
+.legend li:last-child {
+	margin-bottom: 0;
+}
+
+.labs-example {
+	font-weight: bold;
+}
+
 .collapsed {
 	overflow: hidden;
 	max-height: 0;