adds base type links and vid times

diff --git a/docs/pages/typography-base.md b/docs/pages/typography-base.md
index c06ac656d2cb72255d15a3674a32fdb662ec946d..390ab15350f5f3ba93b9502dffc4140df8f1fb0d 100644 (file)
--- a/docs/pages/typography-base.md
+++ b/docs/pages/typography-base.md
@@ -25,6 +25,8 @@ This is a paragraph. Paragraphs are preset with a font size, line height and spa
   <p>If the emphasis of a phrase is important, don't make the emphasis purely visual&mdash;use the `<em>` or `<strong>` tags to mark it as well. Both of these tags have built-in styles, but there's no harm in adding additional styles in specific contexts.</p>
 </div>
 
+<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/GmdEem?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html
 <p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to <strong>make it bold!</strong>. You can also use em to <em>italicize your words</em>.</p>
 ```
@@ -39,6 +41,12 @@ Foundation includes styles for all headings&mdash;they're balanced and sized alo
   <p>Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <code>&lt;h2&gt;</code> in your code, the next heading used should be either <code>&lt;h2&gt;</code> or <code>&lt;h3&gt;</code>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.</p>
 </div>
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="0:25"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/PmeKme" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <h1>h1. This is a very large header.</h1>
 <h2>h2. This is a large header.</h2>
@@ -54,6 +62,8 @@ Foundation includes styles for all headings&mdash;they're balanced and sized alo
 
 The framework includes two typographic scales&mdash;one uses a narrow range of sizes for small-sized screens, and the other uses a wider range of sizes for medium- and larger-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the `$header-styles` map in your project's <a href="sass.html#the-settings-file">Settings File</a>.
 
+<a class="" data-open-video="1:28"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
 Header  | Default | Medium and up
 --------|---------|--------------
 `<h1>`  | 24px    | 48px
@@ -70,7 +80,7 @@ In its most complete form the `$header-styles` map looks like this:
 ```
 $header-styles: (
   'small': (
-    'h1': ('font-size': 24, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom), 
+    'h1': ('font-size': 24, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
     'h2': ('font-size': 20, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
     'h3': ('font-size': 19, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
     'h4': ('font-size': 18, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
@@ -94,7 +104,7 @@ Because this is a little bit lengthy we have also introduced a short form, that
 ```
 $header-styles: (
   'small': (
-    'h1': ('fs': 24, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom), 
+    'h1': ('fs': 24, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
     'h2': ('fs': 20, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
     'h3': ('fs': 19, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
     'h4': ('fs': 18, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
@@ -128,6 +138,12 @@ The value for `'line-height'`/`'lh'` is transformed into a unitless number, that
 
 By inserting a `<small>` element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="2:46"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/eWrEEm" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <h3>Foundation for Sites <small>Version 6.3.1</small></h3>
 ```
@@ -142,6 +158,12 @@ Links are very standard, and the color is preset to the Foundation primary color
   <p>To make links screen reader-friendly, avoid using vague words like "here" or "read more" within link text. The text of the link itself should adequately describe where the link goes.</p>
 </div>
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="3:22"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/wdjqrY" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html
 <p>Links are very standard, and the color is preset to the Foundation primary color. <a href="global.html">Learn more about Foundation's global colors.</a></p>
 ```
@@ -152,6 +174,8 @@ Links are very standard, and the color is preset to the Foundation primary color
 
 Use dividers to define thematic breaks between paragraphs. To denote the end of one section of a page and the start of another, it's better to use the `<section>` tag.
 
+<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/Vbxzrz" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html
 <hr>
 ```
@@ -162,6 +186,8 @@ Use dividers to define thematic breaks between paragraphs. To denote the end of
 
 Use an unordered list to... *list things*, if the order of the items doesn't matter.
 
+<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/mmLMXx" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <ul>
   <li>List item with a much longer description or more content.</li>
@@ -183,7 +209,7 @@ Use an unordered list to... *list things*, if the order of the items doesn't mat
 
 ## Ordered Lists
 
-Use an `<ol>` when creating a list where the order of the items is important, like ranking pizza toppings from best to worst.
+<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/XRqaBd" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
 
 ```html_example
 <ol>
@@ -207,6 +233,8 @@ Use an `<ol>` when creating a list where the order of the items is important, li
 
 A definition list (`<dl>`) is used to display name-value pairs, like metadata or a dictionary definition. Each term (`<dt>`) is paired with one or more definitions (`<dd>`).
 
+<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/oWdeMe" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <dl>
   <dt>Time</dt>
@@ -223,6 +251,8 @@ A definition list (`<dl>`) is used to display name-value pairs, like metadata or
 
 Sometimes other people say smart things, and you may want to mention those things with a quote. We've got you covered.
 
+<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/ZKoJMb" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <blockquote>
   Those people who think they know everything are a great annoyance to those of us who do.
@@ -236,6 +266,8 @@ Sometimes other people say smart things, and you may want to mention those thing
 
 Use the `<abbr>` tag to annotate a shortened term. Abbreviations must always have a `title` attribute which clarifies the full term.
 
+<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/QvrMVX" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <p>In my dream last night, I saw <abbr title="John Ronald Reuel">J. R. R.</abbr> Tolkien and George <abbr title="Raymond Richard">R. R.</abbr> Martin hanging out on Sunset <abbr title="Boulevard">Blvd</abbr>.</p>
 ```
@@ -244,7 +276,9 @@ Use the `<abbr>` tag to annotate a shortened term. Abbreviations must always hav
 
 ## Code
 
-Format references to code with the `<code>` tag.
+Format references to code with the `<code>` tag. In order for angle brackets `<>` to render correctly, you need to change them to `&lt; and &gt;`.
+
+<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/LymjvO" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
 
 ```html_example
 Remember to escape angle brackets when printing HTML: <code>&lt;div&gt;</code>
@@ -256,6 +290,8 @@ Remember to escape angle brackets when printing HTML: <code>&lt;div&gt;</code>
 
 Use the `<kbd>` element to annotate a key stroke or combination.
 
+<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/XRqaBd" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <p>Press <kbd>Cmd+Q</kbd> (or <kbd>Ctrl+Q</kbd> on Windows) to play Half-Life 3.</p>
 ```
@@ -321,6 +357,8 @@ Foundation includes print styles developed by HTML5 Boilerplate to give you some
 
 On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach `.show-for-print` to an element to only show when printing, and `.hide-for-print` to hide something when printing.
 
+<a class="" data-open-video="4:42"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
 <div class="callout primary">
   <p>Print styles use `!important` to ensure they aren't overriden by more specific selectors. This framework conscientiously avoids using `!important` declarations. This is one of the few components that does.</p>
 +</div>