jgthms · guntbert · Nov 27, 2016 · Nov 29, 2016 · Nov 29, 2016 · Nov 29, 2016
diff --git a/_config.local.yml b/_config.local.yml
@@ -1,5 +1,6 @@
 title: CSS Reference
-description: A free visual guide to the most popular CSS properties.
+subtitle: "A free visual guide to the most popular CSS properties"
+description: "CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples."
 share: "CSS Reference: a free visual guide to the most popular CSS properties."
 url: http://localhost:4000
 markdown: kramdown

diff --git a/_config.yml b/_config.yml
@@ -1,5 +1,6 @@
 title: CSS Reference
-description: A free visual guide to the most popular CSS properties.
+subtitle: "A free visual guide to the most popular CSS properties"
+description: "CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples."
 share: "CSS Reference: a free visual guide to the most popular CSS properties."
 url: http://cssreference.io
 markdown: kramdown

diff --git a/_includes/collections/animations.html b/_includes/collections/animations.html
diff --git a/_includes/collections/box-model.html b/_includes/collections/box-model.html
diff --git a/_includes/collections/flexbox.html b/_includes/collections/flexbox.html
diff --git a/_includes/collections/positioning.html b/_includes/collections/positioning.html
diff --git a/_includes/collections/transitions.html b/_includes/collections/transitions.html
diff --git a/_includes/collections/typography.html b/_includes/collections/typography.html
diff --git a/_includes/google-fonts.html b/_includes/google-fonts.html
@@ -1,14 +1,9 @@
 <script async type="text/javascript">
-  WebFontConfig = {
-    google: { families: [ 'Source+Sans+Pro:400,700,400italic,700italic:latin', 'Source+Code+Pro::latin' ] }
-  };
-  (function() {
-    var wf = document.createElement('script');
-    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
-      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
-    wf.type = 'text/javascript';
-    wf.async = 'true';
-    var s = document.getElementsByTagName('script')[0];
-    s.parentNode.insertBefore(wf, s);
-  })();
-</script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-82634666-3', 'auto');
+  ga('send', 'pageview');
+</script>
diff --git a/_includes/lists/main-list.html b/_includes/lists/main-list.html
diff --git a/_includes/lists/menu-list.html b/_includes/lists/menu-list.html
diff --git a/_includes/menu.html b/_includes/menu.html
@@ -34,8 +34,8 @@
     </a>
   </header>
   <nav class="menu-collections">
-    <p><strong>Collections</strong></p>
     <ul>
+      <li><a class="menu-collection-link{% if page.template == 'index' %} menu-collection-link--active{% endif %}" href="{{site.url}}/">All</a></li>
       <li><a class="menu-collection-link{% if page.collection_name == 'Animations' %} menu-collection-link--active{% endif %}" href="{{site.url}}/animations/">Animations</a></li>
       <li><a class="menu-collection-link{% if page.collection_name == 'Box model' %} menu-collection-link--active{% endif %}" href="{{site.url}}/box-model/">Box model</a></li>
       <li><a class="menu-collection-link{% if page.collection_name == 'Flexbox' %} menu-collection-link--active{% endif %}" href="{{site.url}}/flexbox/">Flexbox</a></li>
@@ -83,13 +83,13 @@
 
 <footer class="footer">
   <p class="footer-title">
-    <strong>{{site.description}}</strong> <small>Created by <a href="https://twitter.com/jgthms">@jgthms</a></small>
+    <strong>{{site.subtitle}}</strong> <small>Created by <a href="https://twitter.com/jgthms">@jgthms</a></small>
   </p>
   <div class="footer-facebook">
-    <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssreference%2F&width=100&layout=button_count&action=like&size=small&show_faces=false&share=false&height=20&appId=1212191075486670" width="100" height="20" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
+    <iframe class="footer-iframe" data-src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssreference%2F&width=100&layout=button_count&action=like&size=small&show_faces=false&share=false&height=20&appId=1212191075486670" width="100" height="20" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
   </div>
   <div class="footer-github">
-    <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=css-reference&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+    <iframe class="footer-iframe" data-src="https://ghbtns.com/github-btn.html?user=jgthms&repo=css-reference&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
   </div>
   <!-- <p class="footer-share footer-share--contribute">
     <strong class="footer-share-label">Contribute</strong>

diff --git a/_layouts/collection.html b/_layouts/collection.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
     <title>{{page.collection_name}} - {{site.title}}</title>
+    <meta name="description" content="Learn how {{page.collection_name}} works in CSS.">
     <link rel="stylesheet" type="text/css" href="{{site.url}}/css/website.css">
 
     <meta property="og:url" content="{{site.url}}{{page.url}}">

diff --git a/_layouts/single.html b/_layouts/single.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
     <title>{{page.property_name}} - {{site.title}}</title>
+    <meta name="description" content="Learn how {{page.property_name}} works in CSS.">
     <link rel="stylesheet" type="text/css" href="{{site.url}}/css/website.css">
 
     <meta property="og:url" content="{{site.url}}{{page.url}}">

diff --git a/css/website.css b/css/website.css
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 ---
-# this is an empty front matter
+template: index
 ---
 
 <!DOCTYPE html>
@@ -8,7 +8,9 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
-    <title>{{site.title}} - {{site.description}}</title>
+    <title>{{site.title}} - {{site.subtitle}}</title>
+    <meta name="description" content="{{site.description}}">
+
     <link rel="stylesheet" type="text/css" href="{{site.url}}/css/website.css">
 
     <meta property="og:url" content="{{site.url}}">

diff --git a/javascript/main.js b/javascript/main.js
@@ -2,6 +2,14 @@ document.addEventListener('DOMContentLoaded', function() {
   var $root = document.documentElement;
   var template = $root.dataset.template;
 
+  // Load iframes
+  var $footerIframes = document.querySelectorAll('.footer-iframe');
+
+  Array.prototype.forEach.call($footerIframes, function($iframe) {
+    var src = $iframe.dataset.src;
+    $iframe.src = src;
+  });
+
   // Menu: Search
   var $searchInput = document.getElementById('menu-search-input');
   var $menuList = document.getElementById('menu-list');

diff --git a/property/align-content/index.html b/property/align-content/index.html
@@ -6,7 +6,7 @@
 <section id="align-content" class="property">
   <header class="property-header">
     <nav class="property-links">
-      <a class="property-links-direct" href="{{site.url}}/property/align-content/" data-property-name="align-content" data-tooltip="Single page for this property" target="_blank">Link</a>
+      <a class="property-links-direct" href="{{site.url}}/property/align-content/" data-property-name="align-content" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-content">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-content" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
@@ -37,6 +37,16 @@ <h2 class="property-name">
         <div class="example-description">
           <p>Each line will stretch to <em>fill</em> the remaining space.</p>
 <p>In this case, the container is <code>300px</code> high. All boxes are <code>50px</code> high, apart from the second one who is <code>100px</code> high.</p>
+<ul>
+<li>The first line is <strong>100px</strong> high</li>
+<li>The second line is <strong>50px</strong> high</li>
+<li>The remaing space is <strong>150px</strong></li>
+</ul>
+<p>This remaining space is distributed equally amongst the two lines:</p>
+<ul>
+<li>The first line is now <strong>175px</strong> high</li>
+<li>The second line is now <strong>125px</strong> high</li>
+</ul>
 
         </div>
       </header>
@@ -48,6 +58,7 @@ <h2 class="property-name">
         </div>
       </aside>
           <style type="text/css">#align-content-stretch{ align-content:stretch;}</style>
+        <style type="text/css">#align-content-stretch .box--red { height: 175px; }#align-content-stretch .box--green { height: 125px;top: 175px; }</style>
     </section>
     <section class="example">
       <header class="example-header">

diff --git a/property/align-items/index.html b/property/align-items/index.html
@@ -6,7 +6,7 @@
 <section id="align-items" class="property">
   <header class="property-header">
     <nav class="property-links">
-      <a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property" target="_blank">Link</a>
+      <a class="property-links-direct" href="{{site.url}}/property/align-items/" data-property-name="align-items" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-items">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-items" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
@@ -58,7 +58,7 @@ <h2 class="property-name">
         </p>
         <div class="example-description">
           <p>The flexbox items are aligned at the <strong>end</strong> of the <strong>cross axis</strong>.</p>
-<p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the _bottom.</p>
+<p>By default, the cross axis is vertical. This means the flexbox items will be aligned <em>vertically</em> at the <em>bottom</em>.</p>
 
         </div>
       </header>

diff --git a/property/align-self/index.html b/property/align-self/index.html
@@ -6,7 +6,7 @@
 <section id="align-self" class="property">
   <header class="property-header">
     <nav class="property-links">
-      <a class="property-links-direct" href="{{site.url}}/property/align-self/" data-property-name="align-self" data-tooltip="Single page for this property" target="_blank">Link</a>
+      <a class="property-links-direct" href="{{site.url}}/property/align-self/" data-property-name="align-self" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-self">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-self" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>
@@ -26,6 +26,29 @@ <h2 class="property-name">
     <style type="text/css">.align-self .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-self .square:nth-child(2) { background: #05ffb0;color: #310736; }.align-self .square:nth-child(4) { height: 75px; }.align-self .line { left: 2px;position: absolute;right: 2px; }.align-self .line--default { top: 50%; }.align-self .line--default:before { content: "Items"; }.align-self .line--red:before { content: "Self"; }</style>
 
 
+    <section class="example">
+      <header class="example-header">
+        <p class="example-name">
+            <code class="example-default" data-tooltip="This is the property's default value">default</code>
+
+
+          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: auto;">align-self: auto;</code>
+        </p>
+        <div class="example-description">
+          <p>The target will use the value of <code>align-items</code>.</p>
+
+        </div>
+      </header>
+
+      <aside class="example-preview">
+        <div class="example-browser"><i></i><i></i><i></i></div>
+        <div class="example-output">
+          <div class="example-output-div align-self " id="align-self-auto"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div>
+        </div>
+      </aside>
+          <style type="text/css">#align-self-auto{ align-self:auto;}</style>
+        <style type="text/css">#align-self-auto .target { align-self: auto; }</style>
+    </section>
     <section class="example">
       <header class="example-header">
         <p class="example-name">
@@ -34,7 +57,7 @@ <h2 class="property-name">
           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: flex-start;">align-self: flex-start;</code>
         </p>
         <div class="example-description">
-          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-items: flex-start</code>, only the target will be at the start of the cross axis.</p>
+          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: flex-start</code>, only the target will be at the start of the cross axis.</p>
 <p>By default, this means it will be aligned <strong>vertically</strong> at the <strong>top</strong>.</p>
 
         </div>
@@ -57,7 +80,7 @@ <h2 class="property-name">
           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: flex-end;">align-self: flex-end;</code>
         </p>
         <div class="example-description">
-          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-items: flex-end</code>, only the target will be at the end of the cross axis.</p>
+          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: flex-end</code>, only the target will be at the end of the cross axis.</p>
 <p>By default, this means it will be aligned <strong>vertically</strong> at the <strong>bottom</strong>.</p>
 
         </div>
@@ -80,7 +103,7 @@ <h2 class="property-name">
           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: center;">align-self: center;</code>
         </p>
         <div class="example-description">
-          <p>If the container has <code>align-items: flex-start</code> and the <strong>target</strong> has <code>align-items: center</code>, only the target will be at the center of the cross axis.</p>
+          <p>If the container has <code>align-items: flex-start</code> and the <strong>target</strong> has <code>align-self: center</code>, only the target will be at the center of the cross axis.</p>
 <p>By default, this means it will be <strong>vertically centered</strong>.</p>
 
         </div>
@@ -104,7 +127,7 @@ <h2 class="property-name">
           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: baseline;">align-self: baseline;</code>
         </p>
         <div class="example-description">
-          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-items: baseline</code>, only the target will be at the baseline of the cross axis.</p>
+          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: baseline</code>, only the target will be at the baseline of the cross axis.</p>
 <p>By default, this means it will be aligned along the basline of the text.</p>
 
         </div>
@@ -127,7 +150,7 @@ <h2 class="property-name">
           <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: stretch;">align-self: stretch;</code>
         </p>
         <div class="example-description">
-          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-items: stretch</code>, only the target will stretch along the whole cross axis.</p>
+          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: stretch</code>, only the target will stretch along the whole cross axis.</p>
 
         </div>
       </header>

diff --git a/property/animation-delay/index.html b/property/animation-delay/index.html
@@ -6,7 +6,7 @@
 <section id="animation-delay" class="property">
   <header class="property-header">
     <nav class="property-links">
-      <a class="property-links-direct" href="{{site.url}}/property/animation-delay/" data-property-name="animation-delay" data-tooltip="Single page for this property" target="_blank">Link</a>
+      <a class="property-links-direct" href="{{site.url}}/property/animation-delay/" data-property-name="animation-delay" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-delay">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-delay" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>

diff --git a/property/animation-direction/index.html b/property/animation-direction/index.html
@@ -6,7 +6,7 @@
 <section id="animation-direction" class="property">
   <header class="property-header">
     <nav class="property-links">
-      <a class="property-links-direct" href="{{site.url}}/property/animation-direction/" data-property-name="animation-direction" data-tooltip="Single page for this property" target="_blank">Link</a>
+      <a class="property-links-direct" href="{{site.url}}/property/animation-direction/" data-property-name="animation-direction" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-direction">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-direction" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>

diff --git a/property/animation-duration/index.html b/property/animation-duration/index.html
@@ -6,7 +6,7 @@
 <section id="animation-duration" class="property">
   <header class="property-header">
     <nav class="property-links">
-      <a class="property-links-direct" href="{{site.url}}/property/animation-duration/" data-property-name="animation-duration" data-tooltip="Single page for this property" target="_blank">Link</a>
+      <a class="property-links-direct" href="{{site.url}}/property/animation-duration/" data-property-name="animation-duration" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-duration">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-duration" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>

diff --git a/property/animation-fill-mode/index.html b/property/animation-fill-mode/index.html
@@ -6,7 +6,7 @@
 <section id="animation-fill-mode" class="property">
   <header class="property-header">
     <nav class="property-links">
-      <a class="property-links-direct" href="{{site.url}}/property/animation-fill-mode/" data-property-name="animation-fill-mode" data-tooltip="Single page for this property" target="_blank">Link</a>
+      <a class="property-links-direct" href="{{site.url}}/property/animation-fill-mode/" data-property-name="animation-fill-mode" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-fill-mode">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>

diff --git a/property/animation-iteration-count/index.html b/property/animation-iteration-count/index.html
@@ -6,7 +6,7 @@
 <section id="animation-iteration-count" class="property">
   <header class="property-header">
     <nav class="property-links">
-      <a class="property-links-direct" href="{{site.url}}/property/animation-iteration-count/" data-property-name="animation-iteration-count" data-tooltip="Single page for this property" target="_blank">Link</a>
+      <a class="property-links-direct" href="{{site.url}}/property/animation-iteration-count/" data-property-name="animation-iteration-count" data-tooltip="Single page for this property" target="_blank">Pop out</a>
       <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="animation-iteration-count">Share</a>
       <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/animation-iteration-count" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
     </nav>