Move page title to template

Turing-School-Projects · May 10, 2016 · 7a7d870 · 7a7d870
1 parent 49a2017
commit 7a7d870
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 66 deletions.
diff --git a/_layouts/main.html b/_layouts/main.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    {% include head.html %}
+  </head>
+
+  <body>
+    {% include navigation.html %}
+
+    <section class="container">
+      {% include header.html %}
+      {{content}}
+      {% include footer.html %}
+    </section>
+  </body>
+</html>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -10,7 +10,10 @@
 
     <section class="container">
       {% include header.html %}
-      {{content}}
+      <article>
+        <h2 id="before">{{ page.title }}</h2>
+        {{content}}
+      </article>
       {% include footer.html %}
     </section>
   </body>

diff --git a/books.html b/books.html
@@ -2,45 +2,41 @@
 title: Recommended Reading
 ---
 
-<article>
-  <h2 id="before">Book List</h2>
-  <br/>
-  <ul>
-    <li>
-      <h4 class="full-width"><a href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_3?ie=UTF8&qid=1459879147&sr=8-3&keywords=duckett" target="_blank">HTML and CSS: Design and Build Websites</a></h4>
-      <p>
-        John Duckett
-      </p>
-    </li>
-    <li>
-      <h4 class="full-width"><a href="https://smacss.com/" target="_blank">Scalable and Modular Archetecture for CSS</a></h4>
-      <p>
-        Jonathon Snook
-      </p>
-    </li>
-    <li>
-      <h4 class="full-width"><a href="http://www.amazon.com/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647/ref=la_B001IR3Q7I_1_3?s=books&ie=UTF8&qid=1457549440&sr=1-3" target="_blank">Javascript and JQuery: Interactive Front-End Web Development</a></h4>
-      <p>
-        John Duckett
-      </p>
-    </li>
-    <li>
-      <h4 class="full-width"><a href="http://eloquentjavascript.net/" target="_blank">Eloquent Javascript</a></h4>
-      <p>
-        Marijn Haverbeke
-      </p>
-    </li>
-    <li>
-      <h4 class="full-width"><a href="http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?s=books&ie=UTF8&qid=1457549922&sr=1-1&keywords=don%27t+make+me+think" target="_blank">Don't Make Me Think</a></h4>
-      <p>
-        Steve Krug
-      </p>
-    </li>
-    <li>
-      <h4 class="full-width"><a href="http://www.designkit.org/resources/1" target="_blank">Field Guide to Human Centered Design</a></h4>
-      <p>
-        IDEO.org
-      </p>
-    </li>
-  </ul>
-</article>
+<ul>
+  <li>
+    <h4 class="full-width"><a href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=sr_1_3?ie=UTF8&qid=1459879147&sr=8-3&keywords=duckett" target="_blank">HTML and CSS: Design and Build Websites</a></h4>
+    <p>
+      John Duckett
+    </p>
+  </li>
+  <li>
+    <h4 class="full-width"><a href="https://smacss.com/" target="_blank">Scalable and Modular Archetecture for CSS</a></h4>
+    <p>
+      Jonathon Snook
+    </p>
+  </li>
+  <li>
+    <h4 class="full-width"><a href="http://www.amazon.com/JavaScript-JQuery-Interactive-Front-End-Development/dp/1118531647/ref=la_B001IR3Q7I_1_3?s=books&ie=UTF8&qid=1457549440&sr=1-3" target="_blank">Javascript and JQuery: Interactive Front-End Web Development</a></h4>
+    <p>
+      John Duckett
+    </p>
+  </li>
+  <li>
+    <h4 class="full-width"><a href="http://eloquentjavascript.net/" target="_blank">Eloquent Javascript</a></h4>
+    <p>
+      Marijn Haverbeke
+    </p>
+  </li>
+  <li>
+    <h4 class="full-width"><a href="http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?s=books&ie=UTF8&qid=1457549922&sr=1-1&keywords=don%27t+make+me+think" target="_blank">Don't Make Me Think</a></h4>
+    <p>
+      Steve Krug
+    </p>
+  </li>
+  <li>
+    <h4 class="full-width"><a href="http://www.designkit.org/resources/1" target="_blank">Field Guide to Human Centered Design</a></h4>
+    <p>
+      IDEO.org
+    </p>
+  </li>
+</ul>
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 ---
+layout: main
 title: Introduction
 ---
 
 <article>
   <h2 id="before">Prework overview</h2>
-  <br/>
   <p>
     Prework helps provide important context and vocabulary to help you hit the ground running on the first day of class. We've found that students who come into the program having invested time in familiarizing themselves with key concepts are able to maximize their early weeks with us.
   </p>

diff --git a/resources.html b/resources.html
@@ -2,10 +2,6 @@
 title: Resources
 ---
 
-<article>
-  <h2 id="before">Resources</h2>
-  <br/>
-  <h4>
-    <a href="http://today.turing.io/" target="_blank"> Today's Schedule</a>
-  </h4>
-</article>
+<h4>
+  <a href="http://today.turing.io/" target="_blank"> Today's Schedule</a>
+</h4>
diff --git a/stylesheets/styles.scss b/stylesheets/styles.scss
@@ -62,6 +62,10 @@ ul, ol {
   padding: 0;
 }
 
+#before {
+  margin-bottom: 1em;
+}
+
 /* navigation */
 
 nav {

diff --git a/tools.html b/tools.html
@@ -2,18 +2,14 @@
 title: Tools of the Trade
 ---
 
-<article>
-  <h2 id="before">Tools of the Trade</h2>
-  <br/>
-  <ul>
-    <li>
-      <h4><a href="https://www.sketchapp.com/" target="_blank">Sketch</a></h4>
-      <p>
-        Sketch 3 is an easy to use and powerful digital design tool for the Mac. It can be used to create all manner of stunning digital designs from mobile applications to websites and icons.
-        <br/>
-        <br/>
-        For an introduction to using Sketch, check out this <a href="https://teamtreehouse.com/library/sketch-basics" target="_blank">tutorial</a>.
-      </p>
-    </li>
-  </ul>
-</article>
+<ul>
+  <li>
+    <h4><a href="https://www.sketchapp.com/" target="_blank">Sketch</a></h4>
+    <p>
+      Sketch 3 is an easy to use and powerful digital design tool for the Mac. It can be used to create all manner of stunning digital designs from mobile applications to websites and icons.
+      <br/>
+      <br/>
+      For an introduction to using Sketch, check out this <a href="https://teamtreehouse.com/library/sketch-basics" target="_blank">tutorial</a>.
+    </p>
+  </li>
+</ul>