Add fixed height to code snippets

Author: mrmrs

components/articles/title-text-image/index.html

@@ -39,7 +39,7 @@ <h1 class="f4 mt0">Articles Title Text Image</h1>
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
-<pre class="pa3 ba br2 b--black-05">
+<pre class="pa3 ba br2 b--black-05 h5">
 &lt;article class=&quot;pa3 pa5-ns&quot;&gt;
   &lt;h1 class=&quot;f2&quot;&gt;Title Text with Image&lt;/h1&gt;
   &lt;img src=&quot;/img/space.jpg&quot; class=&quot;w-100 f5 measure&quot;&gt;
@@ -61,7 +61,7 @@ <h2 class="f5">HTML</h2>
 </div>
 <div class="fl w-100 w-25-ns pl0 pl2-ns">
 <h2 class="f5">CSS</h2>
-<pre class="pa3 ba br2 b--black-05">.lh-copy {
+<pre class="pa3 ba br2 b--black-05 h5">.lh-copy {
     line-height: 1.6;
 }
 

components/articles/title-text/index.html

@@ -38,7 +38,7 @@ <h1 class="f4 mt0">Articles Title Text</h1>
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
-<pre class="pa3 ba br2 b--black-05">
+<pre class="pa3 ba br2 b--black-05 h5">
 &lt;article class=&quot;pa3 pa5-ns&quot;&gt;
   &lt;h1 class=&quot;&quot;&gt;Title&lt;/h1&gt;
   &lt;p class=&quot;measure lh-copy&quot;&gt;
@@ -59,7 +59,7 @@ <h2 class="f5">HTML</h2>
 </div>
 <div class="fl w-100 w-25-ns pl0 pl2-ns">
 <h2 class="f5">CSS</h2>
-<pre class="pa3 ba br2 b--black-05">.lh-copy {
+<pre class="pa3 ba br2 b--black-05 h5">.lh-copy {
     line-height: 1.6;
 }
 

components/layout/flag-object-collapse/index.html

@@ -34,7 +34,7 @@ <h1 class="f4 mt0">Layout Flag Object Collapse</h1>
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
-<pre class="pa3 ba br2 b--black-05">
+<pre class="pa3 ba br2 b--black-05 h5">
 &lt;div class=&quot;dt mw6 center pt0 pb5 pv5-m pv6-ns&quot;&gt;
   &lt;div class=&quot;db dtc-ns v-mid-ns&quot;&gt;
     &lt;img src=&quot;/img/super-wide.jpg&quot; alt=&quot;A bright blue sky&quot; class=&quot;w-100 mw7 w5-ns&quot; /&gt;
@@ -51,7 +51,7 @@ <h2 class="f5">HTML</h2>
 </div>
 <div class="fl w-100 w-25-ns pl0 pl2-ns">
 <h2 class="f5">CSS</h2>
-<pre class="pa3 ba br2 b--black-05">.db {
+<pre class="pa3 ba br2 b--black-05 h5">.db {
     display: block;
 }
 

components/layout/flag-object/index.html

@@ -33,7 +33,7 @@ <h1 class="f4 mt0">Layout Flag Object</h1>
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
-<pre class="pa3 ba br2 b--black-05">
+<pre class="pa3 ba br2 b--black-05 h5">
 &lt;div class=&quot;dt mw6 center ppv4 pv5-m pv6-ns&quot;&gt;
   &lt;div class=&quot;dtc v-mid&quot;&gt;
     &lt;img src=&quot;/img/super-wide.jpg&quot; alt=&quot;A bright blue sky&quot; class=&quot;mw5&quot; /&gt;
@@ -49,7 +49,7 @@ <h2 class="f5">HTML</h2>
 </div>
 <div class="fl w-100 w-25-ns pl0 pl2-ns">
 <h2 class="f5">CSS</h2>
-<pre class="pa3 ba br2 b--black-05">.dt {
+<pre class="pa3 ba br2 b--black-05 h5">.dt {
     display: table;
 }
 

components/layout/two-column-collapse-one/index.html

@@ -33,7 +33,7 @@ <h1 class="f4 mt0">Layout Two Column Collapse One</h1>
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
-<pre class="pa3 ba br2 b--black-05">
+<pre class="pa3 ba br2 b--black-05 h5">
 &lt;article class=&quot;cf&quot;&gt;
   &lt;div class=&quot;fl w-100 w-50-ns bg-near-white tc&quot;&gt;
     &lt;h1&gt;Column One&lt;/h1&gt;
@@ -49,7 +49,7 @@ <h2 class="f5">HTML</h2>
 </div>
 <div class="fl w-100 w-25-ns pl0 pl2-ns">
 <h2 class="f5">CSS</h2>
-<pre class="pa3 ba br2 b--black-05">.cf {
+<pre class="pa3 ba br2 b--black-05 h5">.cf {
     *zoom: 1;
 }
 

components/layout/two-column/index.html

@@ -33,7 +33,7 @@ <h1 class="f4 mt0">Layout Two Column</h1>
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
-<pre class="pa3 ba br2 b--black-05">
+<pre class="pa3 ba br2 b--black-05 h5">
 &lt;article class=&quot;cf&quot;&gt;
   &lt;div class=&quot;fl w-50 bg-near-white tc&quot;&gt;
     &lt;h1&gt;Column One&lt;/h1&gt;
@@ -49,7 +49,7 @@ <h2 class="f5">HTML</h2>
 </div>
 <div class="fl w-100 w-25-ns pl0 pl2-ns">
 <h2 class="f5">CSS</h2>
-<pre class="pa3 ba br2 b--black-05">.cf {
+<pre class="pa3 ba br2 b--black-05 h5">.cf {
     *zoom: 1;
 }
 

components/nav/large-title-link-list/index.html

@@ -32,7 +32,7 @@ <h1 class="f4 mt0">Nav Large Title Link List</h1>
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
-<pre class="pa3 ba br2 b--black-05">
+<pre class="pa3 ba br2 b--black-05 h5">
 &lt;nav class=&quot;pa3 pa4-ns&quot;&gt;
   &lt;a class=&quot;link dim black b f1 f-headline-ns tc db mb3 mb4-ns&quot; href=&quot;#&quot; title=&quot;Home&quot;&gt;Site Name&lt;/a&gt;
   &lt;div class=&quot;tc pb3&quot;&gt;
@@ -47,7 +47,7 @@ <h2 class="f5">HTML</h2>
 </div>
 <div class="fl w-100 w-25-ns pl0 pl2-ns">
 <h2 class="f5">CSS</h2>
-<pre class="pa3 ba br2 b--black-05">.db {
+<pre class="pa3 ba br2 b--black-05 h5">.db {
     display: block;
 }
 

components/nav/title-link-list/index.html

@@ -30,7 +30,7 @@ <h1 class="f4 mt0">Nav Title Link List</h1>
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
-<pre class="pa3 ba br2 b--black-05">
+<pre class="pa3 ba br2 b--black-05 h5">
 &lt;nav class=&quot;pa3 pa4-ns&quot;&gt;
   &lt;a class=&quot;link dim black b f6 f5-ns dib mr3&quot; href=&quot;#&quot; title=&quot;Home&quot;&gt;Site Name&lt;/a&gt;
   &lt;a class=&quot;link dim gray    f6 f5-ns dib mr3&quot; href=&quot;#&quot; title=&quot;Home&quot;&gt;Home&lt;/a&gt;
@@ -43,7 +43,7 @@ <h2 class="f5">HTML</h2>
 </div>
 <div class="fl w-100 w-25-ns pl0 pl2-ns">
 <h2 class="f5">CSS</h2>
-<pre class="pa3 ba br2 b--black-05">.dib {
+<pre class="pa3 ba br2 b--black-05 h5">.dib {
     display: inline-block;
 }
 

src/templates/components.html

@@ -14,13 +14,13 @@ <h1 class="f4 mt0"><%= title %></h1>
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
-<pre class="pa3 ba br2 b--black-05">
+<pre class="pa3 ba br2 b--black-05 h5">
 <%= escapedHtml %>
 </pre>
 </div>
 <div class="fl w-100 w-25-ns pl0 pl2-ns">
 <h2 class="f5">CSS</h2>
-<pre class="pa3 ba br2 b--black-05"><%= componentCss %>
+<pre class="pa3 ba br2 b--black-05 h5"><%= componentCss %>
 </pre>
 </div>
 </div>