Fix code block to be reponsive on mobile

mrmrs · mrmrs · commit a55810ebbf3d · 2016-06-29T11:59:31.000+01:00
diff --git a/src/templates/docs/background-size/index.html b/src/templates/docs/background-size/index.html
@@ -63,7 +63,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" class="link fw6 blue dim">MDN - Background Size</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_background-size.css</kbd>
         </header>
diff --git a/src/templates/docs/border-radius/index.html b/src/templates/docs/border-radius/index.html
@@ -77,7 +77,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius" class="link fw6 blue dim">MDN - Border Radius</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_border-radius.css</kbd>
         </header>
diff --git a/src/templates/docs/borders/index.html b/src/templates/docs/borders/index.html
@@ -358,7 +358,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width" class="link db fw6 blue dim">MDN - Border Width</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
       <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_borders.css</kbd>
       </header>
diff --git a/src/templates/docs/box-sizing/index.html b/src/templates/docs/box-sizing/index.html
@@ -78,7 +78,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" class="link fw6 blue dim">MDN - Box Sizing</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_box-sizing.css</kbd>
         </header>
diff --git a/src/templates/docs/clearfix/index.html b/src/templates/docs/clearfix/index.html
@@ -72,7 +72,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clears" class="link fw6 blue dim">MDN - Clears</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_clearfix.css</kbd>
         </header>
diff --git a/src/templates/docs/debug/index.html b/src/templates/docs/debug/index.html
@@ -260,7 +260,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/outline" class="db link fw6 blue dim">MDN - Outline</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pv4">
+      <section class="bg-near-white black-70 pt4 pv4 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_debug-children.css</kbd>
         </header>
@@ -276,7 +276,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 </code>
 </pre>
       </section>
-      <section class="bg-near-white black-70 pbxl">
+      <section class="bg-near-white black-70 pb5 overflow-container">
         <header class="ph3 ph5-ns">
           <kbd class="yellow">src/_debug.css</kbd>
         </header>
diff --git a/src/templates/docs/display/index.html b/src/templates/docs/display/index.html
@@ -148,7 +148,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" class="link fw6 blue dim">MDN - Box Sizing</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_display.css</kbd>
         </header>
diff --git a/src/templates/docs/floats/index.html b/src/templates/docs/floats/index.html
@@ -85,7 +85,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/floats" class="link fw6 blue dim">MDN - Floats</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
       <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_floats.css</kbd>
       </header>
diff --git a/src/templates/docs/font-family/index.html b/src/templates/docs/font-family/index.html
@@ -82,7 +82,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" class="link fw6 blue dim">MDN - Font Family</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
       <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_font-families.css</kbd>
       </header>
diff --git a/src/templates/docs/font-style/index.html b/src/templates/docs/font-style/index.html
@@ -70,7 +70,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" class="link fw6 blue dim">MDN - Font Weight</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_font-style.css</kbd>
         </header>
diff --git a/src/templates/docs/font-weight/index.html b/src/templates/docs/font-weight/index.html
@@ -81,7 +81,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" class="link fw6 blue dim">MDN - Font Weight</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
       <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_font-weights.css</kbd>
       </header>
diff --git a/src/templates/docs/forms/index.html b/src/templates/docs/forms/index.html
@@ -61,7 +61,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db fw6 blue dim">MDN - Focus</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_links.css</kbd>
         </header>
diff --git a/src/templates/docs/heights/index.html b/src/templates/docs/heights/index.html
@@ -137,7 +137,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height" class="link fw6 blue dim">MDN - Height</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_heights.css</kbd>
         </header>
diff --git a/src/templates/docs/hovers/index.html b/src/templates/docs/hovers/index.html
@@ -51,15 +51,19 @@ <h3 class="f5 book pt4 caps">Dim Text</h3>
         </p>
         <h3 class="f5 book pt4 caps">Dim Card</h3>
         <p>
-          <a href="#" class="link black mw5 db dim pas ba b--gray br2">
-            <img src="http://placekitten.com/g/600/300" alt="KITTTTTTTY" class="db mbxs" />
+          <a href="#" class="link black mw5 db dim pa2 ba b--black-20 br2">
+            <img src="http://placekitten.com/g/600/300" alt="KITTTTTTTY" class="db mb2 mw-100" />
             <span class="db">Dim any element and its children</span>
           </a>
         </p>
         <h3 class="f5 book pt4 caps">Reveal Children on Hover</h3>
-          <a href="#" class="link black mw5 dt hide-child ba b--gray br2" style="background-size: cover; background: transparent url(http://placekitten.com/g/700/300) no-repeat;">
-            <span class="white b dtc v-mid child bg-black-40 ph4 pv5">Reveal children elements on hover</span>
+          <a href="#" class="link black mw5 dt hide-child ba b--black-20 br2" style="background: transparent url(http://placekitten.com/g/700/300) no-repeat center center;background-size: cover; ">
+            <span class="white b dtc v-mid w-100 h-100 child bg-black-40 ph4 pv5">Reveal children elements on hover</span>
           </a>
+        <h3 class="f5 book pt4 caps">Add pointer on hover</h3>
+          <div href="#" class="link dim black mw5 dt hide-child ba b--black-20 pa4 br2 pointer">
+              Add pointer on hover to element.
+          </div>
         <div class="mt5 cf">
           <div class="dib mr4">
             <h1 class="f4 ttu tracked fw6">Previous</h1>
@@ -76,7 +80,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db fw6 blue dim">MDN - Focus</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_hovers.css</kbd>
         </header>
diff --git a/src/templates/docs/line-height/index.html b/src/templates/docs/line-height/index.html
@@ -89,7 +89,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" class="link fw6 blue dim">MDN - Line Height</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_line-height.css</kbd>
         </header>
diff --git a/src/templates/docs/links/index.html b/src/templates/docs/links/index.html
@@ -66,7 +66,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db fw6 blue dim">MDN - Focus</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
       <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_links.css</kbd>
       </header>
diff --git a/src/templates/docs/lists/index.html b/src/templates/docs/lists/index.html
@@ -67,7 +67,7 @@ <h1 class="f6 f5-ns ttu tracked fw6 gray">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type" class="f5 f4-ns link db fw6 blue dim">MDN - List Style Type</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_lists.css</kbd>
         </header>
diff --git a/src/templates/docs/max-widths/index.html b/src/templates/docs/max-widths/index.html
@@ -196,7 +196,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width" class="link fw6 blue dim">MDN - Max Width</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
       <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_max-widths.css</kbd>
       </header>
diff --git a/src/templates/docs/measure/index.html b/src/templates/docs/measure/index.html
@@ -212,7 +212,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="http://webtypography.net/2.1.2" class="link fw6 blue dim">Choose a Comfortable Measure</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
       <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_typography.css</kbd>
       </header>
diff --git a/src/templates/docs/opacity/index.html b/src/templates/docs/opacity/index.html
@@ -83,7 +83,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/opacity" class="db link fw6 blue dim">MDN - Opacity CSS</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_opacity.css</kbd>
         </header>
diff --git a/src/templates/docs/position/index.html b/src/templates/docs/position/index.html
@@ -111,7 +111,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left" class="link fw6 blue dim db">MDN - Left</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_position.css</kbd>
         </header>
diff --git a/src/templates/docs/skins/index.html b/src/templates/docs/skins/index.html
@@ -84,7 +84,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius" class="link fw6 blue dim">MDN - Border Radius</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_skins.css</kbd>
         </header>
diff --git a/src/templates/docs/spacing/index.html b/src/templates/docs/spacing/index.html
@@ -190,7 +190,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding" class="link fw6 blue dim">MDN - Padding</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_spacing.css</kbd>
         </header>
diff --git a/src/templates/docs/text-align/index.html b/src/templates/docs/text-align/index.html
@@ -70,7 +70,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align" class="link fw6 blue dim">MDN - Text Align</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
       <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_text-align.css</kbd>
       </header>
diff --git a/src/templates/docs/text-decoration/index.html b/src/templates/docs/text-decoration/index.html
@@ -66,7 +66,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" class="link fw6 blue dim">MDN - Text Decoration</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_text-decoration.css</kbd>
         </header>
diff --git a/src/templates/docs/text-transform/index.html b/src/templates/docs/text-transform/index.html
@@ -68,7 +68,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
         </div>
       </div>
 
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
       <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_text-transform.css</kbd>
       </header>
diff --git a/src/templates/docs/tracking/index.html b/src/templates/docs/tracking/index.html
@@ -70,7 +70,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing" class="link fw6 blue dim">MDN - Letter Spacing</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
       <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_letter-spacing.css</kbd>
       </header>
diff --git a/src/templates/docs/type-scale/index.html b/src/templates/docs/type-scale/index.html
@@ -138,7 +138,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" class="link fw6 blue dim">MDN - Font-size</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_type-scale.css</kbd>
         </header>
diff --git a/src/templates/docs/vertical-align/index.html b/src/templates/docs/vertical-align/index.html
@@ -107,7 +107,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align" class="link fw6 blue dim">MDN - Vertical Align</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_vertical-align.css</kbd>
         </header>
diff --git a/src/templates/docs/white-space/index.html b/src/templates/docs/white-space/index.html
@@ -114,7 +114,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space" class="link fw6 blue dim">MDN - White Space</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_white-space.css</kbd>
         </header>
diff --git a/src/templates/docs/widths/index.html b/src/templates/docs/widths/index.html
@@ -158,7 +158,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
           <a href="https://developer.mozilla.org/en/docs/Web/CSS/width" class="link fw6 blue dim">MDN - Width property</a>
         </div>
       </div>
-      <section class="bg-near-white black-70 pt4 pb5">
+      <section class="bg-near-white black-70 pt4 pb5 overflow-container">
         <header class="ph3 ph5-ns pt4">
           <kbd class="yellow">src/_widths.css</kbd>
         </header>
