Standardise reference image names

app/box-model.html

@@ -14,7 +14,7 @@ <h2>The Box Model</h2>
     <li>
       <p>Resize the kitten images so that they are in boxes with a <code>tomato</code> coloured border of 1em. The total size of the box should be 7em x 7em.</p>
 
-      <p>Your version will be compared against <a target="blank"  href="/backstop_data/bitmaps_reference/893397520_Box_model__0_box-model-simple-box_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="blank"  href="/backstop_data/bitmaps_reference/css_kata_Box_model__0_box-model-simple-box_0_phone.png">this</a> guide.</p>
 
       <section id="box-model-simple-box">
         <div><img src='assets/kitten.jpg' alt='a kitten'></div>
@@ -25,7 +25,7 @@ <h2>The Box Model</h2>
     <li>
       <p>Extend the above example so that a second 1em wide <code>royalblue</code> coloured border is shown. The total size of the box should be 9em x 9em.</p>
 
-      <p>Your version will be compared against <a target="blank"  href="/backstop_data/bitmaps_reference/893397520_Box_model__0_box-model-simple-border-box_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="blank"  href="/backstop_data/bitmaps_reference/css_kata_Box_model__0_box-model-simple-border-box_0_phone.png">this</a> guide.</p>
 
       <section id="box-model-simple-border-box">
         <div><img src='assets/kitten.jpg' alt='a kitten'></div>
@@ -36,7 +36,7 @@ <h2>The Box Model</h2>
     <li>
       <p>Extend the above example so that there is a 1em gap around both boxes.</p>
 
-      <p>Your version will be compared against <a target="blank"  href="/backstop_data/bitmaps_reference/893397520_Box_model__0_box-model-simple-border-margin-box_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="blank"  href="/backstop_data/bitmaps_reference/css_kata_Box_model__0_box-model-simple-border-margin-box_0_phone.png">this</a> guide.</p>
 
       <section id="box-model-simple-border-margin-box">
         <div><img src='assets/kitten.jpg' alt='a kitten'></div>

app/css-kata-boilerplate.html

@@ -15,7 +15,7 @@ <h2>CSS Kata boilerplate</h2>
       <p>Style all pages so that the background color is <code>#efefef</code>.</p>
       <p>Provide a solid, 1px wide, <code>`slategrey`</code> coloured border, and a white background, around all <code>sections</code> in the kata.</p>
 
-      <p>Your version will be compared against <a target="blank"  href="/backstop_data/bitmaps_reference/893397520_Boilerplate_Code_sections_0_boilerplate-sections_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="blank"  href="/backstop_data/bitmaps_reference/css_kata_Boilerplate_Code_sections_0_boilerplate-sections_0_phone.png">this</a> guide.</p>
       <section id="boilerplate-sections">
         <img src='assets/kitten.jpg' alt='a kitten'>
       </section>

app/css-shapes-101.html

@@ -14,7 +14,7 @@ <h2>CSS shapes 101</h2>
     <li>
       <p>Create 3 <code>'tomato'</code> coloured boxes from the list items below, sized 5emｘ5em, aligned next to each other. The text should not be visible.</p>
 
-      <p>Your version will be compared against <a href="/backstop_data/bitmaps_reference/893397520_Shapes_Boxes_0_box-align_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a href="/backstop_data/bitmaps_reference/css_kata_Shapes_Boxes_0_box-align_0_phone.png">this</a> guide.</p>
 
       <section id="box-align">
 
@@ -30,7 +30,7 @@ <h2>CSS shapes 101</h2>
     <li>
       <p>Create 3 <code>`dodgerblue`</code> coloured circles from the list items below, sized 7emｘ7em, aligned next to each other. The text should not be visible.</p>
 
-      <p>Your version will be compared against <a href="/backstop_data/bitmaps_reference/893397520_Shapes_Circles_0_circle-align_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a href="/backstop_data/bitmaps_reference/css_kata_Shapes_Circles_0_circle-align_0_phone.png">this</a> guide.</p>
       <section id="circle-align">
 
         <ul>
@@ -45,7 +45,7 @@ <h2>CSS shapes 101</h2>
     <li>
       <p>Create 2 <code>royalblue</code> coloured circle outlines with 3px borders from the list items below, sized 10emｘ10em, aligned next to each other. The text should not be visible.</p>
 
-      <p>Your version will be compared against <a href="/backstop_data/bitmaps_reference/893397520_Shapes_Circle_Outlines_0_circle-outlines-align_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a href="/backstop_data/bitmaps_reference/css_kata_Shapes_Circle_Outlines_0_circle-outlines-align_0_phone.png">this</a> guide.</p>
       <section id="circle-outlines-align">
 
         <ol>
@@ -59,7 +59,7 @@ <h2>CSS shapes 101</h2>
     <li>
       <p>Using the three shapes you built in the above steps, change the following list items into a red box, a blue circle and a blue circle outline, all vertically aligned along the bottom</p>
 
-      <p>Your version will be compared against <a href="/backstop_data/bitmaps_reference/893397520_Shapes_Combo_0_shapes-align_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a href="/backstop_data/bitmaps_reference/css_kata_Shapes_Combo_0_shapes-align_0_phone.png">this</a> guide.</p>
       <section id="shapes-align">
 
         <ul>

app/display-inline-block.html

@@ -14,7 +14,7 @@ <h2>Display: inline, inline-block, and block</h2>
     <li>
       <p>Make the following images stack below each other.</p>
 
-      <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/893397520_Display_Stack_0_display-stack-images_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/css_kata_Display_Stack_0_display-stack-images_0_phone.png">this</a> guide.</p>
 
       <section id="display-stack-images">
 
@@ -29,7 +29,7 @@ <h2>Display: inline, inline-block, and block</h2>
     <li>
       <p>Make the following images stack beside each other.</p>
 
-      <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/893397520_Display_Align_0_display-align-images_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/css_kata_Display_Align_0_display-align-images_0_phone.png">this</a> guide.</p>
 
       <section id="display-align-images">
 
@@ -47,7 +47,7 @@ <h2>Display: inline, inline-block, and block</h2>
       <p>Resize the middle image so that it is 100px x 100px.</p>
       <p>Vertically align all the images to the middle of each.</p>
 
-     <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/893397520_Display_Align_and_resize_0_display-align-resize-images_0_phone.png">this</a> guide.</p>
+     <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/css_kata_Display_Align_and_resize_0_display-align-resize-images_0_phone.png">this</a> guide.</p>
 
      <section id="display-align-resize-images">
 

app/positioning.html

@@ -15,7 +15,7 @@ <h2>Positioning</h2>
       <p>Create a <code>`seagreen`</code> box 20em x 20em using the markup below.</p>
       <p>Create a <code>`yellow`</code> circle 4em x 4em inside the green box.</p>
 
-      <p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/893397520_Position_Setup_0_position-setup_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/css_kata_Position_Setup_0_position-setup_0_phone.png">this</a> guide.</p>
 
       <section id="position-setup">
         <div>
@@ -26,7 +26,7 @@ <h2>Positioning</h2>
     <li>
       <p>Using the first example, reposition the circle so that it is positioned in the bottom right corner of the green box.</p>
 
-      <p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/893397520_Position_Setup_0_position-bottom_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/css_kata_Position_Setup_0_position-bottom_0_phone.png">this</a> guide.</p>
 
       <section id="position-bottom">
         <div>
@@ -37,7 +37,7 @@ <h2>Positioning</h2>
     <li>
       <p>Using the first example, reposition the circle so that it is positioned in the bottom right corner of the <code>&lt;section&gt;</code> element. Try not to add additional markup to the section element itself.</p>
 
-      <p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/893397520_Position_Setup_0_position-override_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="blank" href="/backstop_data/bitmaps_reference/css_kata_Position_Setup_0_position-override_0_phone.png">this</a> guide.</p>
 
       <section id="position-override">
         <div>

app/typography-101.html

@@ -14,7 +14,7 @@ <h2>Typography 101</h2>
     <li>
       <p>The font 'Open Sans' has already been linked to this page. Style the page so that 'Open Sans' is the default font used across the site, and the body copy font size is 16px large, with a line-height of <code>1.25em</code>.</p>
 
-      <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/893397520_Typography_101_Body_text_0_typography-body-font_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/css_kata_Typography_101_Body_text_0_typography-body-font_0_phone.png">this</a> guide.</p>
 
       <section id="typography-body-font">
 
@@ -67,7 +67,7 @@ <h2>Typography 101</h2>
         </tbody>
       </table>
 
-      <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/893397520_Typography_101_Headings_0_typography-headings_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/css_kata_Typography_101_Headings_0_typography-headings_0_phone.png">this</a> guide.</p>
 
       <section id="typography-headings">
 
@@ -81,7 +81,7 @@ <h4>Enim nam impedit, corporis distinctio perferendis numquam repellat esse ipsu
     <li>
       <p>Without changing the element itself, style the following paragraph so that it looks like the <code>H1</code> from the previous example.</p>
 
-      <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/893397520_Typography_101_Faux_Headings_0_typography-faux-headings_0_phone.png">this</a> guide.</p>
+      <p>Your version will be compared against <a target="_blank" href="/backstop_data/bitmaps_reference/css_kata_Typography_101_Faux_Headings_0_typography-faux-headings_0_phone.png">this</a> guide.</p>
 
       <section id="typography-faux-headings">