Update components after new template changes

Author: mrmrs

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

@@ -69,7 +69,7 @@ <h1 class="f4 f3-ns mt4">Large Title Text</h1>
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
+<pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
 &lt;article class=&quot;pa3 pa5-ns&quot;&gt;
   &lt;h1 class=&quot;f2 f-subheadline-ns mb4&quot;&gt;9.5.1 If the text will be read on the screen, design it for that medium.&lt;/h1&gt;
   &lt;p class=&quot;gray f6 mb4 ttu tracked&quot;&gt;By Robert Bringhurst&lt;/p&gt;
@@ -113,7 +113,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 h5" id="css">.tracked {
+<pre class="pa3 ba br2 b--black-10 h5" id="css">.tracked {
     letter-spacing: .1em;
 }
 
@@ -353,8 +353,10 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
+  color: #111;
+  color: rgba(0,0,0,.7);
+  background-color: #fff;
+  background-color: rgba(255,255,255,.2);
 }
 
 .hljs-comment,
@@ -375,12 +377,12 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
-  color: #008080;
+  color: #006C71;
 }
 
 .hljs-string,
 .hljs-doctag {
-  color: #d14;
+  color: #C64774;
 }
 
 .hljs-title,
@@ -403,7 +405,7 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: #000080;
+  color: #00449E;
   font-weight: normal;
 }
 

components/articles/left-title-top-border/index.html

@@ -67,7 +67,7 @@ <h1 class="f4 f3-ns mt4">Left Title Top Border</h1>
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
+<pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
 &lt;article class=&quot;cf ph3 ph5-ns pv5&quot;&gt;
   &lt;header class=&quot;fn fl-ns w-50-ns pr4-ns&quot;&gt;
     &lt;h1 class=&quot;f2 lh-title fw9 mb3 mt0 pt3 bt bw2&quot;&gt;
@@ -109,7 +109,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 h5" id="css">.bt {
+<pre class="pa3 ba br2 b--black-10 h5" id="css">.bt {
     border-top-style: solid;
     border-top-width: 1px;
 }
@@ -427,8 +427,10 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
+  color: #111;
+  color: rgba(0,0,0,.7);
+  background-color: #fff;
+  background-color: rgba(255,255,255,.2);
 }
 
 .hljs-comment,
@@ -449,12 +451,12 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
-  color: #008080;
+  color: #006C71;
 }
 
 .hljs-string,
 .hljs-doctag {
-  color: #d14;
+  color: #C64774;
 }
 
 .hljs-title,
@@ -477,7 +479,7 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: #000080;
+  color: #00449E;
   font-weight: normal;
 }
 

components/articles/left-title/index.html

@@ -58,7 +58,7 @@ <h1 class="f4 f3-ns mt4">Left Title</h1>
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
+<pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
 &lt;article class=&quot;cf ph3 ph5-ns pv5&quot;&gt;
   &lt;header class=&quot;fn fl-ns w-50-ns pr4-ns&quot;&gt;
     &lt;h1 class=&quot;mb3 mt0 lh-title&quot;&gt;Clay in a Potter&#39;s Hand&lt;/h1&gt;
@@ -91,7 +91,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 h5" id="css">.cf:before, .cf:after {
+<pre class="pa3 ba br2 b--black-10 h5" id="css">.cf:before, .cf:after {
     content: " ";
     display: table;
 }
@@ -374,8 +374,10 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
+  color: #111;
+  color: rgba(0,0,0,.7);
+  background-color: #fff;
+  background-color: rgba(255,255,255,.2);
 }
 
 .hljs-comment,
@@ -396,12 +398,12 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
-  color: #008080;
+  color: #006C71;
 }
 
 .hljs-string,
 .hljs-doctag {
-  color: #d14;
+  color: #C64774;
 }
 
 .hljs-title,
@@ -424,7 +426,7 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: #000080;
+  color: #00449E;
   font-weight: normal;
 }
 

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

@@ -47,7 +47,7 @@ <h1 class="f4 f3-ns mt4">Title Text Image</h1>
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
+<pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
 &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; alt=&quot;outer space&quot;&gt;
@@ -69,7 +69,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 h5" id="css">.lh-copy {
+<pre class="pa3 ba br2 b--black-10 h5" id="css">.lh-copy {
     line-height: 1.6;
 }
 
@@ -281,8 +281,10 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
+  color: #111;
+  color: rgba(0,0,0,.7);
+  background-color: #fff;
+  background-color: rgba(255,255,255,.2);
 }
 
 .hljs-comment,
@@ -303,12 +305,12 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
-  color: #008080;
+  color: #006C71;
 }
 
 .hljs-string,
 .hljs-doctag {
-  color: #d14;
+  color: #C64774;
 }
 
 .hljs-title,
@@ -331,7 +333,7 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: #000080;
+  color: #00449E;
   font-weight: normal;
 }
 

components/articles/title-text/index.html

@@ -46,7 +46,7 @@ <h1 class="f4 f3-ns mt4">Title Text</h1>
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
+<pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
 &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;
@@ -67,7 +67,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 h5" id="css">.lh-copy {
+<pre class="pa3 ba br2 b--black-10 h5" id="css">.lh-copy {
     line-height: 1.6;
 }
 
@@ -263,8 +263,10 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
+  color: #111;
+  color: rgba(0,0,0,.7);
+  background-color: #fff;
+  background-color: rgba(255,255,255,.2);
 }
 
 .hljs-comment,
@@ -285,12 +287,12 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
-  color: #008080;
+  color: #006C71;
 }
 
 .hljs-string,
 .hljs-doctag {
-  color: #d14;
+  color: #C64774;
 }
 
 .hljs-title,
@@ -313,7 +315,7 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: #000080;
+  color: #00449E;
   font-weight: normal;
 }
 

components/collections/news-card/index.html

@@ -41,7 +41,7 @@ <h1 class="f4 f3-ns mt4">News Card</h1>
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
+<pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
 &lt;article class=&quot;bg-white center mw5 ba b--black-10 mv4&quot;&gt;
   &lt;div class=&quot;pv2 ph3&quot;&gt;
      &lt;h1 class=&quot;f6 ttu tracked&quot;&gt;Daily News Co.&lt;/h1&gt;
@@ -57,7 +57,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 h5" id="css">.ba {
+<pre class="pa3 ba br2 b--black-10 h5" id="css">.ba {
     border-style: solid;
     border-width: 1px;
 }
@@ -362,8 +362,10 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
+  color: #111;
+  color: rgba(0,0,0,.7);
+  background-color: #fff;
+  background-color: rgba(255,255,255,.2);
 }
 
 .hljs-comment,
@@ -384,12 +386,12 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
-  color: #008080;
+  color: #006C71;
 }
 
 .hljs-string,
 .hljs-doctag {
-  color: #d14;
+  color: #C64774;
 }
 
 .hljs-title,
@@ -412,7 +414,7 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: #000080;
+  color: #00449E;
   font-weight: normal;
 }
 

components/collections/product-card/index.html

@@ -48,7 +48,7 @@ <h1 class="f4 f3-ns mt4">Product Card</h1>
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
+<pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
 &lt;article class=&quot;br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center&quot;&gt;
   &lt;img src=&quot;http://placekitten.com/g/600/300&quot; class=&quot;db w-100 br2 br--top&quot; alt=&quot;kitty&quot;&gt;
   &lt;div class=&quot;pa2 ph3-ns pb3-ns&quot;&gt;
@@ -71,7 +71,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 h5" id="css">.ba {
+<pre class="pa3 ba br2 b--black-10 h5" id="css">.ba {
     border-style: solid;
     border-width: 1px;
 }
@@ -389,8 +389,10 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
+  color: #111;
+  color: rgba(0,0,0,.7);
+  background-color: #fff;
+  background-color: rgba(255,255,255,.2);
 }
 
 .hljs-comment,
@@ -411,12 +413,12 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
-  color: #008080;
+  color: #006C71;
 }
 
 .hljs-string,
 .hljs-doctag {
-  color: #d14;
+  color: #C64774;
 }
 
 .hljs-title,
@@ -439,7 +441,7 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: #000080;
+  color: #00449E;
   font-weight: normal;
 }