Merge pull request #675 from roryokane/clarify-legend

clarify legend on home page by restyling

index.html

@@ -147,6 +147,10 @@
 							<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 @@
 							<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>

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;