Visually compressing the Cheatsheet.

Signed-off-by: Grant Skinner <[email protected]>

Author: gskinner

index.html

@@ -182,7 +182,7 @@ <h1 class="substitution-title">Substitution</h1>
 
 			<tr><th colspan="2" onclick="regexr.libView.show('groups')">Groups & Lookaround</th></tr>
 			<tr><td>(abc)</td><td>capture group</td></tr>
-			<tr><td>\1</td><td>backreference</td></tr>
+			<tr><td>\1</td><td>backreference to group 1</td></tr>
 			<tr><td>(?:abc)</td><td>non-capturing group</td></tr>
 			<tr><td>(?=abc)</td><td>positive lookahead</td></tr>
 			<tr><td>(?!abc)</td><td>negative lookahead</td></tr>

js/documentation.js

@@ -67,6 +67,7 @@ var library = {
 
 		{
 		label: "Reference",
+		id: "reference",
 		icon: "",
 		desc: "Information on all of the tokens available to create regular expressions."
 			+"<p>Click a selected item again to insert it into your Expression.</p>"

scss/views/libView.scss

@@ -147,18 +147,25 @@ table.cheatsheet {
 	th {
 		@extend %user-select-none;
 		cursor: pointer;
-		background: rgba(255,255,255,0.05);
+		background: rgba(255,255,255,0.06);
 		text-align: left;
-		padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+		padding: 0.2rem 0 0.2rem 0.375rem;
 
 		&:hover {
 			color:$white;
 		}
 	}
 
+	td {
+		line-height: 1em;
+		padding: 1px 0 3px 0;
+		border-bottom: 1px solid rgba(255,255,255,0.04);
+	}
+	
 	td:first-child {
 		font-family: $monospace;
 		color: $white;
 		padding-right: 0.25em;
+		font-size: 0.9375em;
 	}
 }