From 27d2bb4efe11d7cc138e7307bb3502d33e0b9061 Mon Sep 17 00:00:00 2001
From: Sam Jewell <sam@gocardless.com>
Date: Fri, 12 Dec 2014 01:21:45 +0000
Subject: [PATCH] Got the next page/last page nav arrows working at the top of
 the page Also renamed some CSS into SuitCSS style utils to make things a
 little easier to refactor / understand

---
 guide/assets/css/style.css                    | 18 ++++++++---------
 guide/buildpages.js                           |  5 ++++-
 .../branches_arent_just_for_birds.html        | 20 +++++++++++--------
 guide/challenges/commit_to_it.html            | 20 +++++++++++--------
 guide/challenges/forks_and_clones.html        | 20 +++++++++++--------
 guide/challenges/get_git.html                 | 20 +++++++++++--------
 guide/challenges/githubbin.html               | 20 +++++++++++--------
 guide/challenges/its_a_small_world.html       | 20 +++++++++++--------
 guide/challenges/merge_tada.html              | 20 +++++++++++--------
 guide/challenges/pull_never_out_of_date.html  | 20 +++++++++++--------
 guide/challenges/remote_control.html          | 20 +++++++++++--------
 guide/challenges/repository.html              | 20 +++++++++++--------
 .../requesting_you_pull_please.html           | 20 +++++++++++--------
 guide/partials/footer.html                    |  6 +++---
 guide/partials/header.html                    | 14 ++++++++-----
 15 files changed, 157 insertions(+), 106 deletions(-)

diff --git a/guide/assets/css/style.css b/guide/assets/css/style.css
index 65941cf566..eb0813cf04 100644
--- a/guide/assets/css/style.css
+++ b/guide/assets/css/style.css
@@ -7,15 +7,19 @@ body {
   margin: 0;
 }
 
-.right {
+.u-floatRight {
   float: right;
 }
 
-.left {
+.u-floatLeft {
   float: left;
 }
 
-.tar {
+.u-textCenter {
+  text-align: center;
+}
+
+.u-textRight {
   text-align: right;
 }
 
@@ -23,10 +27,6 @@ li {
   padding-bottom: 4px;
 }
 
-.nav {
-  text-align: center;
-}
-
 .wrapper {
   width: 600px;
   margin: 30px auto;
@@ -44,7 +44,7 @@ li {
 .hand {
   font-size: 40px;
   padding: 9px 12px;
- /* color: #ff00ff;*/
+  color: #0087ff;
 }
 
 .challenge-band h2, .number-band h2 {
@@ -281,6 +281,6 @@ n, v, adj {
   opacity: 0.8;
 }
 
-.u-inline-block {
+.u-inlineBlock {
   display: inline-block;
 }
\ No newline at end of file
diff --git a/guide/buildpages.js b/guide/buildpages.js
index 155afce11d..a48bf43e74 100644
--- a/guide/buildpages.js
+++ b/guide/buildpages.js
@@ -69,13 +69,16 @@ function makeTitleName(filename) {
 
 function buildHeader(filename) {
   var num = filename.split('/').pop().split('_')[0]
+  var data = getPrevious(num)
   var title = makeTitleName(filename)
   var source = fs.readFileSync(__dirname + '/partials/header.html').toString()
   var template = Handlebars.compile(source)
   var content = {
     challengetitle: title,
     challengenumber: num,
-    lang: lang ? '-' + lang : ''
+    lang: lang ? '-' + lang : '',
+    preurl: data.preurl,
+    nexturl: data.nexturl
   }
   return template(content)
 }
diff --git a/guide/challenges/branches_arent_just_for_birds.html b/guide/challenges/branches_arent_just_for_birds.html
index c11398c76d..cb315bb626 100644
--- a/guide/challenges/branches_arent_just_for_birds.html
+++ b/guide/challenges/branches_arent_just_for_birds.html
@@ -16,18 +16,22 @@
       <![endif]-->
 
         <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="forks_and_clones.html"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="its_a_small_world.html"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>branches aren&#x27;t just for birds</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>7 / 11</h2>
     <div>
@@ -142,13 +146,13 @@ <h2>Tips</h2>
 
 
         <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="forks_and_clones.html" class="u-inline-block">forks and clones
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="its_a_small_world.html" class="u-inline-block">it&#x27;s a small world
+  <div class="next u-textRight u-floatRight meta">
+    <a href="its_a_small_world.html" class="u-inlineBlock">it&#x27;s a small world
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/challenges/commit_to_it.html b/guide/challenges/commit_to_it.html
index 81955af077..ef93a1541c 100644
--- a/guide/challenges/commit_to_it.html
+++ b/guide/challenges/commit_to_it.html
@@ -16,18 +16,22 @@
       <![endif]-->
 
         <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="repository.html"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="githubbin.html"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>commit to it</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>3 / 11</h2>
     <div>
@@ -97,13 +101,13 @@ <h2>Tips</h2>
 
 
         <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="repository.html" class="u-inline-block">repository
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="githubbin.html" class="u-inline-block">GitHubbin
+  <div class="next u-textRight u-floatRight meta">
+    <a href="githubbin.html" class="u-inlineBlock">GitHubbin
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/challenges/forks_and_clones.html b/guide/challenges/forks_and_clones.html
index 5fca129a58..a6766e9cc4 100644
--- a/guide/challenges/forks_and_clones.html
+++ b/guide/challenges/forks_and_clones.html
@@ -16,18 +16,22 @@
       <![endif]-->
 
         <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="remote_control.html"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="branches_arent_just_for_birds.html"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>forks and clones</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>6 / 11</h2>
     <div>
@@ -110,13 +114,13 @@ <h2>Tips</h2>
 
 
         <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="remote_control.html" class="u-inline-block">remote control
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="branches_arent_just_for_birds.html" class="u-inline-block">branches aren&#x27;t just for birds
+  <div class="next u-textRight u-floatRight meta">
+    <a href="branches_arent_just_for_birds.html" class="u-inlineBlock">branches aren&#x27;t just for birds
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/challenges/get_git.html b/guide/challenges/get_git.html
index 3893041062..4302de40c0 100644
--- a/guide/challenges/get_git.html
+++ b/guide/challenges/get_git.html
@@ -16,18 +16,22 @@
       <![endif]-->
 
         <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="../index.html"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="repository.html"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>get git</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>1 / 11</h2>
     <div>
@@ -102,13 +106,13 @@ <h2>Tips</h2>
 
 
         <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="../index.html" class="u-inline-block">All Challenges
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="repository.html" class="u-inline-block">repository
+  <div class="next u-textRight u-floatRight meta">
+    <a href="repository.html" class="u-inlineBlock">repository
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/challenges/githubbin.html b/guide/challenges/githubbin.html
index 11f2274478..b8b19b1434 100644
--- a/guide/challenges/githubbin.html
+++ b/guide/challenges/githubbin.html
@@ -16,18 +16,22 @@
       <![endif]-->
 
         <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="commit_to_it.html"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="remote_control.html"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>GitHubbin</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>4 / 11</h2>
     <div>
@@ -79,13 +83,13 @@ <h4>GitHub & Git config usernames do not match</h4>
 
 
         <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="commit_to_it.html" class="u-inline-block">commit to it
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="remote_control.html" class="u-inline-block">remote control
+  <div class="next u-textRight u-floatRight meta">
+    <a href="remote_control.html" class="u-inlineBlock">remote control
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/challenges/its_a_small_world.html b/guide/challenges/its_a_small_world.html
index 50c566a703..b08be8c030 100644
--- a/guide/challenges/its_a_small_world.html
+++ b/guide/challenges/its_a_small_world.html
@@ -16,18 +16,22 @@
       <![endif]-->
 
         <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="branches_arent_just_for_birds.html"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="pull_never_out_of_date.html"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>it&#x27;s a small world</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>8 / 11</h2>
     <div>
@@ -67,13 +71,13 @@ <h3>Go to the next challenge </h3> <code>git-it</code>
 
 
         <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="branches_arent_just_for_birds.html" class="u-inline-block">branches aren&#x27;t just for birds
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="pull_never_out_of_date.html" class="u-inline-block">pull never out of date
+  <div class="next u-textRight u-floatRight meta">
+    <a href="pull_never_out_of_date.html" class="u-inlineBlock">pull never out of date
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/challenges/merge_tada.html b/guide/challenges/merge_tada.html
index b1027e416c..e1a819abd9 100644
--- a/guide/challenges/merge_tada.html
+++ b/guide/challenges/merge_tada.html
@@ -16,18 +16,22 @@
       <![endif]-->
 
         <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="requesting_you_pull_please.html"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="../index.html"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>merge tada</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>11 / 11</h2>
     <div>
@@ -101,13 +105,13 @@ <h2>Tips</h2>
 
 
         <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="requesting_you_pull_please.html" class="u-inline-block">requesting you pull please
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="../index.html" class="u-inline-block">Done!
+  <div class="next u-textRight u-floatRight meta">
+    <a href="../index.html" class="u-inlineBlock">Done!
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/challenges/pull_never_out_of_date.html b/guide/challenges/pull_never_out_of_date.html
index 4ed5c8f821..53188c77c7 100644
--- a/guide/challenges/pull_never_out_of_date.html
+++ b/guide/challenges/pull_never_out_of_date.html
@@ -16,18 +16,22 @@
       <![endif]-->
 
         <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="its_a_small_world.html"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="requesting_you_pull_please.html"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>pull never out of date</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>9 / 11</h2>
     <div>
@@ -80,13 +84,13 @@ <h2>TIPS</h2>
 
 
         <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="its_a_small_world.html" class="u-inline-block">it&#x27;s a small world
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="requesting_you_pull_please.html" class="u-inline-block">requesting you pull please
+  <div class="next u-textRight u-floatRight meta">
+    <a href="requesting_you_pull_please.html" class="u-inlineBlock">requesting you pull please
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/challenges/remote_control.html b/guide/challenges/remote_control.html
index 7afe79e72d..34ed9e324d 100644
--- a/guide/challenges/remote_control.html
+++ b/guide/challenges/remote_control.html
@@ -16,18 +16,22 @@
       <![endif]-->
 
         <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="githubbin.html"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="forks_and_clones.html"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>remote control</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>5 / 11</h2>
     <div>
@@ -147,13 +151,13 @@ <h2>Tips</h2>
 
 
         <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="githubbin.html" class="u-inline-block">GitHubbin
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="forks_and_clones.html" class="u-inline-block">forks and clones
+  <div class="next u-textRight u-floatRight meta">
+    <a href="forks_and_clones.html" class="u-inlineBlock">forks and clones
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/challenges/repository.html b/guide/challenges/repository.html
index 4194b02726..547abbc2c2 100644
--- a/guide/challenges/repository.html
+++ b/guide/challenges/repository.html
@@ -16,18 +16,22 @@
       <![endif]-->
 
         <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="get_git.html"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="commit_to_it.html"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>repository</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>2 / 11</h2>
     <div>
@@ -100,13 +104,13 @@ <h2>Tips</h2>
 
 
         <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="get_git.html" class="u-inline-block">get git
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="commit_to_it.html" class="u-inline-block">commit to it
+  <div class="next u-textRight u-floatRight meta">
+    <a href="commit_to_it.html" class="u-inlineBlock">commit to it
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/challenges/requesting_you_pull_please.html b/guide/challenges/requesting_you_pull_please.html
index 2da9b800ee..ad60f9ff3c 100644
--- a/guide/challenges/requesting_you_pull_please.html
+++ b/guide/challenges/requesting_you_pull_please.html
@@ -16,18 +16,22 @@
       <![endif]-->
 
         <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="pull_never_out_of_date.html"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="merge_tada.html"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>requesting you pull please</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>10 / 11</h2>
     <div>
@@ -99,13 +103,13 @@ <h3>Go to the next challenge </h3> <code>git-it</code>
 
 
         <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="pull_never_out_of_date.html" class="u-inline-block">pull never out of date
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="merge_tada.html" class="u-inline-block">merge tada
+  <div class="next u-textRight u-floatRight meta">
+    <a href="merge_tada.html" class="u-inlineBlock">merge tada
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/partials/footer.html b/guide/partials/footer.html
index d3a2d9658b..0789c45f17 100644
--- a/guide/partials/footer.html
+++ b/guide/partials/footer.html
@@ -1,11 +1,11 @@
 <div class="prenext">
-  <div class="pre lef meta">
+  <div class="pre u-floatLeft meta">
     <a href="{{preurl}}" class="u-inline-block">{{prename}}
     <div>⤶ </div>
     </a>
   </div>
-  <div class="next tar right meta">
-    <a href="{{nexturl}}" class="u-inline-block">{{nextname}}
+  <div class="next u-textRight u-floatRight meta">
+    <a href="{{nexturl}}" class="u-inlineBlock">{{nextname}}
     <div>⤷</div>
     </a>
   </div>
diff --git a/guide/partials/header.html b/guide/partials/header.html
index aeb6787cbe..9b7a24c010 100644
--- a/guide/partials/header.html
+++ b/guide/partials/header.html
@@ -1,16 +1,20 @@
 <header class="site-header">
-  <div class="nav">
-    <!-- <span class="left hand">☜</span> -->
+  <div class="u-textCenter">
+    <a href="{{preurl}}"
+      <span class="u-floatLeft hand">☜</span>
+    </a>
     <span class="filledblock"><a href="../index{{lang}}.html">Git-it</a></span>
-    <!-- <span class="right hand">☞</span> -->
+    <a href="{{nexturl}}"
+      <span class="u-floatRight hand">☞</span>
+    </a>
   </div>
   
   <div class="wrapper">
-    <div class="challenge-band left">
+    <div class="challenge-band u-floatLeft">
       <span class="meta">CHALLENGE</span>
       <h2>{{challengetitle}}</h2>
     </div>
-    <div class="number-band right tar">
+    <div class="number-band u-floatRight u-textRight">
       <span class="meta">NUMBER</span>
       <h2>{{challengenumber}} / 11</h2>
     <div>