Hardcode app fonts over system installed fonts

app/answers.css

@@ -1,5 +1,136 @@
 @font-face {
-  font-family: 'Open Sans';
+  font-family: 'opensanskata';
   src: url("./assets/OpenSans-Regular.woff2") format("woff2");
   font-weight: normal;
   font-style: normal; }
+body {
+  font-family: 'opensanskata', sans-serif;
+}
+
+section {
+  border: 1px solid slategrey;
+  background-color: white;
+  position: relative;
+}
+
+h1, .h1 {
+  font-size: 2em;
+  line-height: 1.25em;
+  font-weight: normal;
+}
+h2 {
+  font-size: 1.625em;
+  line-height: 1.153em;
+  font-weight: normal;
+}
+h3 {
+  font-size: 1.375em;
+  line-height: 1.136em;
+  font-weight: normal;
+}
+h4 {
+  font-size: 1.125em;
+  line-height: 1.111em;
+  font-weight: normal;
+}
+
+.display-block img {
+  display: block;
+}
+
+.display-inline > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.medium-image img {
+  width: 150px;
+  height: 150px;
+}
+
+.small-image img {
+  width: 100px;
+  height: 100px;
+}
+
+.simple-box {
+  display: block;
+  padding: 1em;
+  background-color: tomato;
+  width: 5em;
+  height: 5em;
+}
+.simple-box img {
+  width: 100%;
+  height: 100%;
+}
+.simple-box--bordered {
+  border: 1em solid royalblue;
+}
+.simple-box--margined {
+  margin: 1em;
+}
+.simple-box--small {
+  box-sizing: border-box;
+}
+
+.box {
+  background-color: tomato;
+  text-indent: -1000px;
+  display: inline-block;
+  width: 5em;
+  height: 5em;
+  vertical-align: bottom;
+}
+
+.nolist {
+  padding-left: 0;
+  list-style-type: none;
+}
+
+.circle {
+  background-color: dodgerblue;
+  text-indent: -1000px;
+  display: inline-block;
+  width: 7em;
+  height: 7em;
+  border-radius: 50%;
+  vertical-align: bottom;
+}
+
+.outline {
+  display: inline-block;
+  width: 10em;
+  height: 10em;
+  border: 3px solid royalblue;
+  border-radius: 50%;
+  text-indent: -1000px;
+  box-sizing: border-box;
+  vertical-align: bottom;
+}
+
+.lawn {
+  display: block;
+  background-color: seagreen;
+  width: 20em;
+  height: 20em;
+  position: relative;
+}
+
+.ball {
+  display: block;
+  width: 4em;
+  height: 4em;
+  border-radius: 50%;
+  background-color: yellow;
+}
+
+.lawn-override {
+  position: static;
+}
+
+.ball--br {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}

app/box-model.html

@@ -17,8 +17,8 @@ <h2>The Box Model</h2>
       <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>
-        <div><img src='assets/kitten.jpg' alt='a kitten'></div>
+        <div class="simple-box"><img src='assets/kitten.jpg' alt='a kitten'></div>
+        <div class="simple-box"><img src='assets/kitten.jpg' alt='a kitten'></div>
       </section>
 
     </li>
@@ -28,8 +28,8 @@ <h2>The Box Model</h2>
       <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>
-        <div><img src='assets/kitten.jpg' alt='a kitten'></div>
+        <div class="simple-box simple-box--bordered"><img src='assets/kitten.jpg' alt='a kitten'></div>
+        <div class="simple-box simple-box--bordered"><img src='assets/kitten.jpg' alt='a kitten'></div>
       </section>
     </li>
 
@@ -39,8 +39,8 @@ <h2>The Box Model</h2>
       <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>
-        <div><img src='assets/kitten.jpg' alt='a kitten'></div>
+        <div class="simple-box simple-box--bordered simple-box--margined"><img src='assets/kitten.jpg' alt='a kitten'></div>
+        <div class="simple-box simple-box--bordered simple-box--margined"><img src='assets/kitten.jpg' alt='a kitten'></div>
       </section>
     </li>
   </ol>

app/css-shapes-101.html

@@ -19,9 +19,9 @@ <h2>CSS shapes 101</h2>
       <section id="box-align">
 
         <div>
-          <div>list item</div>
-          <div>list item</div>
-          <div>list item</div>
+          <div class="box">list item</div>
+          <div class="box">list item</div>
+          <div class="box">list item</div>
         </div>
 
       </section>
@@ -33,10 +33,10 @@ <h2>CSS shapes 101</h2>
       <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>
-          <li>list item</li>
-          <li>list item</li>
-          <li>list item</li>
+        <ul class="nolist">
+          <li class="circle">list item</li>
+          <li class="circle">list item</li>
+          <li class="circle">list item</li>
         </ul>
 
       </section>
@@ -48,9 +48,9 @@ <h2>CSS shapes 101</h2>
       <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>
-          <li>list item</li>
-          <li>list item</li>
+        <ol class="nolist">
+          <li class="outline">list item</li>
+          <li class="outline">list item</li>
         </ol>
 
       </section>
@@ -62,10 +62,10 @@ <h2>CSS shapes 101</h2>
       <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>
-          <li>list item</li>
-          <li>list item</li>
-          <li>list item</li>
+        <ul class="nolist">
+          <li class="box">list item</li>
+          <li class="circle">list item</li>
+          <li class="outline">list item</li>
         </ul>
 
       </section>

app/display-inline-block.html

@@ -18,7 +18,7 @@ <h2>Display: inline, inline-block, and block</h2>
 
       <section id="display-stack-images">
 
-        <div>
+        <div class="display-block">
           <img src='assets/kitten.jpg' alt='a kitten'>
           <img src='assets/puppy.jpg' alt='a puppy'>
         </div>
@@ -33,7 +33,7 @@ <h2>Display: inline, inline-block, and block</h2>
 
       <section id="display-align-images">
 
-        <div>
+        <div class="display-inline">
           <div><img src='assets/puppy.jpg' alt='a puppy'></div>
           <div><img src='assets/kitten.jpg' alt='a kitten'></div>
         </div>
@@ -51,10 +51,10 @@ <h2>Display: inline, inline-block, and block</h2>
 
      <section id="display-align-resize-images">
 
-      <div>
-        <div><img src='assets/kitten.jpg' alt='a kitten'></div>
-        <div><img src='assets/puppy.jpg' alt='a puppy'></div>
-        <span><img src='assets/chinchilla.jpg' alt='a chinchilla'></span>
+      <div class="display-inline">
+        <div class="medium-image"><img src='assets/kitten.jpg' alt='a kitten'></div>
+        <div class="small-image"><img src='assets/puppy.jpg' alt='a puppy'></div>
+        <span class="medium-image"><img src='assets/chinchilla.jpg' alt='a chinchilla'></span>
       </div>
 
      </section>

app/positioning.html

@@ -18,8 +18,8 @@ <h2>Positioning</h2>
       <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>
-          <div></div>
+        <div class="lawn">
+          <div class="ball"></div>
         </div>
       </section>
     </li>
@@ -29,8 +29,8 @@ <h2>Positioning</h2>
       <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>
-          <div></div>
+        <div class="lawn">
+          <div class="ball ball--br"></div>
         </div>
       </section>
     </li>
@@ -40,8 +40,8 @@ <h2>Positioning</h2>
       <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>
-          <div></div>
+        <div class="lawn lawn-override">
+          <div class="ball ball--br"></div>
         </div>
       </section>
     </li>