Merge pull request #13 from etchteam/feature/etch-877-images-code-samples-and-codepens-need-to-break-out-of-the

refactor: less scrolling in code examples

Author: JoshTheWanderer

src/guide/apply-diamond-ui/index.webc

@@ -41,7 +41,9 @@ In code form the separated components might now look like:
       <h1>Page title</h1>
       <p>Lorem ipsum dolor [...etc]</p>
     </div>
-    <a class="button button--primary" href="#">Call to action</a>
+    <a class="button button--primary" href="#">
+      Call to action
+    </a>
   </div>
 </section>
 ```
@@ -64,10 +66,14 @@ Adding the eyebrow text and secondary paragraph is pretty straightforward. Becau
       <h1>Page title</h1>
       <p>Lorem ipsum dolor [...etc]</p>
 +     <p class="text-size-sm">
-+       Suspendisse sed dictum dolor, at hendrerit nibh. Curabitur euismod ipsum jut mi <a href="#">elementum interdum</a>.
++       Suspendisse sed dictum dolor, at hendrerit nibh. 
++       Curabitur euismod ipsum jut mi 
++       <a href="#">elementum interdum</a>.
 +     </p>
     </div>
-    <a class="button button--primary" href="#">Call to action</a>
+    <a class="button button--primary" href="#">
+      Call to action
+    </a>
   </div>
 </section>
 ```
@@ -90,15 +96,21 @@ Next let’s look at the two button Controls, one has a new ‘secondary’ styl
       <h1>Page title</h1>
       <p>Lorem ipsum dolor [...etc]</p>
       <p class="text-size-sm">
-        Suspendisse sed dictum dolor, at hendrerit nibh. Curabitur euismod ipsum jut mi <a href="#">elementum interdum</a>.
+        Suspendisse sed dictum dolor, at hendrerit nibh. 
+        Curabitur euismod ipsum jut mi 
+        <a href="#">elementum interdum</a>.
       </p>
     </div>
 +   <div class="grid">
 +     <div class="grid__item">
-        <a class="button button--primary" href="#">Main action</a>
+        <a class="button button--primary" href="#">
+          Main action
+        </a>
 +     </div>
 +     <div class="grid__item">
-+       <a class="button button--secondary" href="#">Secondary action</a>
++       <a class="button button--secondary" href="#">
++         Secondary action
++       </a>
 +     </div>
 +   </div>
   </div>
@@ -127,7 +139,13 @@ Now when the product team decide they need an email signup in the main hero or t
 +           <email-input><input type="email" /></email-input>
           </div>
           <div class="grid__item">
-+           <button type="submit" class="button button--primary" href="#">Sign up</button>
++           <button 
++             type="submit" 
++             class="button button--primary" 
++             href="#"
++           >
++             Sign up
++           </button>
           </div>
         </div>
 +     </form>

src/guide/canvas/index.webc

@@ -27,7 +27,7 @@ Typical examples of canvas components are:
   alt="An example of UI with the canvas highlighted"
 />
 
-<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="vYjypKv" data-pen-title="Canvas" data-preview="true" data-user="gavmck" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="result" data-slug-hash="vYjypKv" data-pen-title="Canvas" data-preview="true" data-user="gavmck" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
   <span>See the Pen <a href="https://codepen.io/gavmck/pen/vYjypKv">
   Canvas</a> by gavmck (<a href="https://codepen.io/gavmck">@gavmck</a>)
   on <a href="https://codepen.io">CodePen</a>.</span>

src/guide/composition/index.webc

@@ -25,7 +25,7 @@ Typical examples of a composition component are:
   alt="An example of UI with the composition elements highlighted"
 />
 
-<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="ExLNbbg" data-pen-title="Composition" data-preview="true" data-user="gavmck" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="result" data-slug-hash="ExLNbbg" data-pen-title="Composition" data-preview="true" data-user="gavmck" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
   <span>See the Pen <a href="https://codepen.io/gavmck/pen/ExLNbbg">
   Composition</a> by gavmck (<a href="https://codepen.io/gavmck">@gavmck</a>)
   on <a href="https://codepen.io">CodePen</a>.</span>

src/guide/content/index.webc

@@ -26,7 +26,17 @@ Typical examples of content components are:
   alt="An example of UI with content highlighted"
 />
 
-<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="bGMBLgR" data-pen-title="Content" data-preview="true" data-user="gavmck" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+<p 
+  class="codepen" 
+  data-height="500" 
+  data-theme-id="dark" 
+  data-default-tab="result" 
+  data-slug-hash="bGMBLgR" 
+  data-pen-title="Content" 
+  data-preview="true" 
+  data-user="gavmck" 
+  style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
+>
   <span>See the Pen <a href="https://codepen.io/gavmck/pen/bGMBLgR">
   Content</a> by gavmck (<a href="https://codepen.io/gavmck">@gavmck</a>)
   on <a href="https://codepen.io">CodePen</a>.</span>

src/guide/controls/index.webc

@@ -25,7 +25,7 @@ Typical examples of controls are:
   alt="An example of UI with controls highlighted"
 />
 
-<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="NWMbyaw" data-pen-title="Controls" data-preview="true" data-user="gavmck" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="result" data-slug-hash="NWMbyaw" data-pen-title="Controls" data-preview="true" data-user="gavmck" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
   <span>See the Pen <a href="https://codepen.io/gavmck/pen/NWMbyaw">
   Controls</a> by gavmck (<a href="https://codepen.io/gavmck">@gavmck</a>)
   on <a href="https://codepen.io">CodePen</a>.</span>

src/guide/the-problem/index.webc

@@ -95,8 +95,9 @@ Over the months, more requirements come in and more props get added. Different t
   on-secondary-button-click="handleButtonClick()"
 >
 	<p slot="secondary-text">
-		Suspendisse sed dictum dolor, at hendrerit nibh. Curabitur euismod 
-		ipsum ut mi <a href="#">elementum interdum</a>.
+		Suspendisse sed dictum dolor, at hendrerit nibh. 
+    Curabitur euismod ipsum ut mi 
+    <a href="#">elementum interdum</a>.
 	</p>
 </page-hero>
 ```

src/guide/the-solution.webc

@@ -38,10 +38,18 @@ function pageHero(
   let result = `<header class="page-hero page-hero--${theme}">`;
 
   if (eyebrow) {
-	  result += `<${eyebrowTag} class="page-hero__eyebrow">${eyebrow}</${eyebrowTag}>`;
+	  result += `
+      <${eyebrowTag} class="page-hero__eyebrow">
+        ${eyebrow}
+      </${eyebrowTag}>
+    `;
   }
 
-  result += `<${titleTag} class="page-hero__title">${title}</${titleTag}>`;
+  result += `
+    <${titleTag} class="page-hero__title">
+      ${title}
+    </${titleTag}>
+  `;
 
   // ...horror continues...