[CSS] Overhaul of CSS and UX clean up.

+ CSS is written using the SUITCSS conventions outlined here:
  https://github.com/suitcss/suit/tree/master/doc
+ Moved from XHTML -> HTML5.
+ New flexbox-based layout for all pages.
+ General cleanup of styles and UI. These changes are to increase
  readability, reduce clutter in the UI, and establish a visual
  hierarchy that's persistent across pages. High contrast and
  larger font sizes are favored.
+ Some random FE cleanup within the soy and servlets.

Change-Id: I2af6c140e82d34d12191bafb5b01f60926370b0b
diff --git a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RepositoryIndex.soy b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RepositoryIndex.soy
index 17b0053..787c15f 100644
--- a/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RepositoryIndex.soy
+++ b/gitiles-servlet/src/main/resources/com/google/gitiles/templates/RepositoryIndex.soy
@@ -50,39 +50,39 @@
   {/call}
 {/if}
 
-{if $description or $mirroredFromUrl}
-  <div class="repository-description">
-  {$description}
-  {if $mirroredFromUrl}
-    <div class="repository-mirrored-from">
+{if $description}
+  <h2 class="RepoDescription">{$description}</h2>
+{/if}
+
+{if $mirroredFromUrl}
+  <div class="RepoMirroredFrom">
     {msg desc="Informational text describing source of repository"}
-    mirrored from {$mirroredFromUrl}
+      Mirrored from <a href="{$mirroredFromUrl}">{$mirroredFromUrl}</a>
     {/msg}
-    </div>
-  {/if}
   </div>
 {/if}
 
-<textarea rows="1" cols="150" class="clone-line"
-  onclick="this.focus();this.select();"
-  readonly="readonly">
-    git clone {$cloneUrl}
-</textarea>
+<div class="CloneRepo">
+  <div class="CloneRepo-title">Clone this repo:</div>
+  <input type="text" class="CloneRepo-command"
+         onclick="this.focus();this.select();"
+         readonly="readonly" value="git clone {$cloneUrl}">
+</div>
 
 {if $hasLog and (length($branches) or length($tags))}
-  <div class="repository-shortlog-wrapper">
-    <div class="repository-shortlog">
-      {call .streamingPlaceholder /}
+  <div class="RepoShortlog">
+    <div class="RepoShortlog-refs">
+      {call .branches_ data="all" /}
+      {call .tags_ data="all" /}
     </div>
-    {if $readmeHtml}
-      <div class="doc repository-index-doc">{$readmeHtml}</div>
-    {/if}
+    <div class="RepoShortlog-log">
+      {call .streamingPlaceholder /}
+      {if $readmeHtml}
+        <div class="doc RepoIndexDoc">{$readmeHtml}</div>
+      {/if}
+    </div>
   </div>
 
-  <div class="repository-refs">
-    {call .branches_ data="all" /}
-    {call .tags_ data="all" /}
-  </div>
 {elseif $hasLog}
   {call .streamingPlaceholder /}
 {elseif length($branches) or length($tags)}