From 2a8a4f50f9ff6b8ba2afc20e192970233a5de3e7 Mon Sep 17 00:00:00 2001
From: Sindre Sorhus <sindresorhus@gmail.com>
Date: Sat, 21 Jul 2012 12:52:11 +0200
Subject: [PATCH] Site: Convert routing labels to use pseudoelements

---
 index.html        | 39 +++++++++++++--------------------------
 site/css/main.css | 16 ++++++++++++++++
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index eea2963473..5b6158951d 100644
--- a/index.html
+++ b/index.html
@@ -38,49 +38,38 @@ <h2>Introduction</h2>
 			<div class="span8">
 				<h2>Our Stable Apps</h2>
 				<ul class="applist">
-					<li>
+					<li data-routing>
 						<a href="architecture-examples/backbone/" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">Backbone.js</a>
-						<span class="label">R</span>
 					</li>
-					<li>
+					<li data-routing>
 						<a href="architecture-examples/emberjs/" data-source="http://emberjs.com" data-content="Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.">Ember.js</a>
-						<span class="label">R</span>
 					</li>
-					<li>
+					<li data-routing>
 						<a class="routing" href="architecture-examples/angularjs/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps">AngularJS</a>
-						<span class="label">R</span>
 					</li>
-					<li>
+					<li data-routing>
 						<a href="architecture-examples/spine/" data-source="http://spinejs.com" data-content="Spine is a lightweight framework for building JavaScript web applications. Spine gives you an MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.">Spine</a>
-						<span class="label">R</span>
 					</li>
-					<li>
+					<li data-routing>
 						<a href="architecture-examples/knockoutjs/" data-source="http://knockoutjs.com" data-content="Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern">KnockoutJS</a>
-						<span class="label">R</span>
 					</li>
-					<li>
+					<li data-routing>
 						<a href="architecture-examples/dojo/" data-source="http://dojotoolkit.org" data-content="Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications.">Dojo</a>
-						<span class="label">R</span>
 					</li>
-					<li>
+					<li data-routing>
 						<a href="architecture-examples/yui/" data-source="http://yuilibrary.com" data-content="YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.">YUI</a>
-						<span class="label">R</span>
 					</li>
-					<li>
+					<li data-routing>
 						<a href="labs/architecture-examples/batman/" data-source="http://batmanjs.org" data-content="Batman.js is a framework for building rich web applications with CoffeeScript or JavaScript. App code is concise and declarative, thanks to a powerful system of view bindings and observable properties. The API is designed with developer and designer happiness as its first priority.">Batman.js</a>
-						<span class="label">R</span>
 					</li>
-					<li>
+					<li data-routing>
 						<a href="architecture-examples/closure/" data-source="http://code.google.com/closure/library/" data-content="The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more.">Closure</a>
-						<span class="label">R</span>
 					</li>
-					<li>
+					<li data-routing>
 						<a href="architecture-examples/agilityjs/" data-source="http://agilityjs.com" data-content="Agility.js is an MVC library for Javascript that lets you write maintainable and reusable browser code without the infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.">Agility.js</a>
-						<span class="label">R</span>
 					</li>
-					<li>
+					<li data-routing>
 						<a href="architecture-examples/knockback/" data-source="http://kmalakoff.github.com/knockback/" data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">Knockback.js</a>
-						<span class="label">R</span>
 					</li>
 					<li>
 						<a href="architecture-examples/gwt/" data-source="https://developers.google.com/web-toolkit/" data-content="Google Web Toolkit (GWT) is an MVP development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords.">GWT</a>
@@ -89,13 +78,11 @@ <h2>Our Stable Apps</h2>
 				<hr>
 				<h2>Apps using RequireJS/AMD</h2>
 				<ul class="applist amd">
-					<li>
+					<li data-routing>
 						<a href="dependency-examples/backbone_require/" data-source="http://requirejs.org" data-content="RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.">Backbone.js + RequireJS</a>
-						<span class="label">R</span>
 					</li>
-					<li>
+					<li data-routing>
 						<a href="dependency-examples/emberjs_require/" data-source="http://emberjs.com" data-content="Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture. This is an example of using it with AMD modules">Ember.js + RequireJS</a>
-						<span class="label">R</span>
 					</li>
 				</ul>
 				<h2>Compare these to a non-framework implementation</h2>
diff --git a/site/css/main.css b/site/css/main.css
index f2723b5762..a904b6e690 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -129,6 +129,22 @@ header nav a:first-child {
 	position: relative; /* popover */
 }
 
+.applist li[data-routing]:after {
+	content: 'R';
+	position: relative;
+	top: -3px;
+	font-size: 9px;
+	padding: 1px 3px 1px;
+	background-color: rgba(0, 0, 0, .2);
+	border-radius: 3px;
+	font-weight: bold;
+	line-height: 13px;
+	color: white;
+	vertical-align: middle;
+	white-space: nowrap;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
 .applist .label,
 p .label {
 	position: relative;