Feature/v2

_config.local.yml

@@ -1,5 +1,5 @@
 title: CSS Reference
-subtitle: "A free visual guide to the most popular CSS properties"
+subtitle: "A free visual guide to CSS"
 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

_config.yml

@@ -1,5 +1,5 @@
 title: CSS Reference
-subtitle: "A free visual guide to the most popular CSS properties"
+subtitle: "A free visual guide to CSS"
 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

_includes/carbon.html

@@ -0,0 +1,46 @@
+<script type="text/javascript">
+window.carbonLoaded = false;
+
+window.helloCarbon = function() {
+  window.carbonLoaded = true;
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Hello
+  var $hello = document.getElementById('hello');
+  var $huggingFace = document.getElementById('huggingFace');
+  var $carbon = document.getElementById('carbon');
+  var $placeholder = document.getElementById('placeholder');
+
+  setTimeout(function() {
+    if (window.carbonLoaded) {
+      $hello.style.minHeight = '218px';
+      $huggingFace.style.display = 'none';
+      $carbon.style.display = 'block';
+    } else {
+      $hello.style.minHeight = '0';
+      $huggingFace.style.display = 'block';
+      $carbon.style.display = 'none';
+    }
+    $placeholder.style.display = 'none';
+  }, 2000);
+});
+</script>
+
+<div id="hello">
+  <div id="huggingFace">
+    <p>CSS Reference is <strong>free</strong> and always will be!</p>
+    <p>Please whitelist us in your ad blocker.</p>
+    <p>Thank you! <img src="{{site.url}}/images/hugging-face.png" alt="Hugging face emoji"></p>
+  </div>
+
+  <div id="placeholder" class="placeholder">
+    <div class="placeholder-image"><div></div></div>
+    <div class="placeholder-content"><div></div><div></div><div></div></div>
+    <div class="placeholder-footer"><div></div></div>
+  </div>
+
+  <div id="carbon">
+    <!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=cssreferenceio" id="_carbonads_js" onload ="window.helloCarbon()"></script> -->
+  </div>
+</div>

_includes/collections/animations-list.html

@@ -1 +1 @@
-<li class="menu-item" data-property-name="animation-delay"><a class="menu-link" href="{{site.url}}/property/animation-delay" data-property-name="animation-delay"><span class="menu-item-name">animation-delay</span></a></li><li class="menu-item" data-property-name="animation-direction"><a class="menu-link" href="{{site.url}}/property/animation-direction" data-property-name="animation-direction"><span class="menu-item-name">animation-direction</span></a></li><li class="menu-item" data-property-name="animation-duration"><a class="menu-link" href="{{site.url}}/property/animation-duration" data-property-name="animation-duration"><span class="menu-item-name">animation-duration</span></a></li><li class="menu-item" data-property-name="animation-fill-mode"><a class="menu-link" href="{{site.url}}/property/animation-fill-mode" data-property-name="animation-fill-mode"><span class="menu-item-name">animation-fill-mode</span></a></li><li class="menu-item" data-property-name="animation-iteration-count"><a class="menu-link" href="{{site.url}}/property/animation-iteration-count" data-property-name="animation-iteration-count"><span class="menu-item-name">animation-iteration-count</span></a></li><li class="menu-item" data-property-name="animation-name"><a class="menu-link" href="{{site.url}}/property/animation-name" data-property-name="animation-name"><span class="menu-item-name">animation-name</span></a></li><li class="menu-item" data-property-name="animation-play-state"><a class="menu-link" href="{{site.url}}/property/animation-play-state" data-property-name="animation-play-state"><span class="menu-item-name">animation-play-state</span></a></li><li class="menu-item" data-property-name="animation-timing-function"><a class="menu-link" href="{{site.url}}/property/animation-timing-function" data-property-name="animation-timing-function"><span class="menu-item-name">animation-timing-function</span></a></li><li class="menu-item" data-property-name="animation"><a class="menu-link" href="{{site.url}}/property/animation" data-property-name="animation"><span class="menu-item-name">animation</span></a></li>
+<li class="menu-item" data-property-name="animation-delay"><a class="menu-link" href="{{site.url}}/property/animation-delay" data-property-name="animation-delay"><span class="item-name">animation-delay</span></a></li><li class="menu-item" data-property-name="animation-direction"><a class="menu-link" href="{{site.url}}/property/animation-direction" data-property-name="animation-direction"><span class="item-name">animation-direction</span></a></li><li class="menu-item" data-property-name="animation-duration"><a class="menu-link" href="{{site.url}}/property/animation-duration" data-property-name="animation-duration"><span class="item-name">animation-duration</span></a></li><li class="menu-item" data-property-name="animation-fill-mode"><a class="menu-link" href="{{site.url}}/property/animation-fill-mode" data-property-name="animation-fill-mode"><span class="item-name">animation-fill-mode</span></a></li><li class="menu-item" data-property-name="animation-iteration-count"><a class="menu-link" href="{{site.url}}/property/animation-iteration-count" data-property-name="animation-iteration-count"><span class="item-name">animation-iteration-count</span></a></li><li class="menu-item" data-property-name="animation-name"><a class="menu-link" href="{{site.url}}/property/animation-name" data-property-name="animation-name"><span class="item-name">animation-name</span></a></li><li class="menu-item" data-property-name="animation-play-state"><a class="menu-link" href="{{site.url}}/property/animation-play-state" data-property-name="animation-play-state"><span class="item-name">animation-play-state</span></a></li><li class="menu-item" data-property-name="animation-timing-function"><a class="menu-link" href="{{site.url}}/property/animation-timing-function" data-property-name="animation-timing-function"><span class="item-name">animation-timing-function</span></a></li><li class="menu-item" data-property-name="animation"><a class="menu-link" href="{{site.url}}/property/animation" data-property-name="animation"><span class="item-name">animation</span></a></li>

_includes/collections/backgrounds-list.html

@@ -1 +1 @@
-<li class="menu-item" data-property-name="background-attachment"><a class="menu-link" href="{{site.url}}/property/background-attachment" data-property-name="background-attachment"><span class="menu-item-name">background-attachment</span></a></li><li class="menu-item" data-property-name="background-clip"><a class="menu-link" href="{{site.url}}/property/background-clip" data-property-name="background-clip"><span class="menu-item-name">background-clip</span></a></li><li class="menu-item" data-property-name="background-color"><a class="menu-link" href="{{site.url}}/property/background-color" data-property-name="background-color"><span class="menu-item-name">background-color</span></a></li><li class="menu-item" data-property-name="background-image"><a class="menu-link" href="{{site.url}}/property/background-image" data-property-name="background-image"><span class="menu-item-name">background-image</span></a></li><li class="menu-item" data-property-name="background-origin"><a class="menu-link" href="{{site.url}}/property/background-origin" data-property-name="background-origin"><span class="menu-item-name">background-origin</span></a></li><li class="menu-item" data-property-name="background-position"><a class="menu-link" href="{{site.url}}/property/background-position" data-property-name="background-position"><span class="menu-item-name">background-position</span></a></li><li class="menu-item" data-property-name="background-repeat"><a class="menu-link" href="{{site.url}}/property/background-repeat" data-property-name="background-repeat"><span class="menu-item-name">background-repeat</span></a></li><li class="menu-item" data-property-name="background-size"><a class="menu-link" href="{{site.url}}/property/background-size" data-property-name="background-size"><span class="menu-item-name">background-size</span></a></li><li class="menu-item" data-property-name="background"><a class="menu-link" href="{{site.url}}/property/background" data-property-name="background"><span class="menu-item-name">background</span></a></li>
+<li class="menu-item" data-property-name="background-attachment"><a class="menu-link" href="{{site.url}}/property/background-attachment" data-property-name="background-attachment"><span class="item-name">background-attachment</span></a></li><li class="menu-item" data-property-name="background-clip"><a class="menu-link" href="{{site.url}}/property/background-clip" data-property-name="background-clip"><span class="item-name">background-clip</span></a></li><li class="menu-item" data-property-name="background-color"><a class="menu-link" href="{{site.url}}/property/background-color" data-property-name="background-color"><span class="item-name">background-color</span></a></li><li class="menu-item" data-property-name="background-image"><a class="menu-link" href="{{site.url}}/property/background-image" data-property-name="background-image"><span class="item-name">background-image</span></a></li><li class="menu-item" data-property-name="background-origin"><a class="menu-link" href="{{site.url}}/property/background-origin" data-property-name="background-origin"><span class="item-name">background-origin</span></a></li><li class="menu-item" data-property-name="background-position"><a class="menu-link" href="{{site.url}}/property/background-position" data-property-name="background-position"><span class="item-name">background-position</span></a></li><li class="menu-item" data-property-name="background-repeat"><a class="menu-link" href="{{site.url}}/property/background-repeat" data-property-name="background-repeat"><span class="item-name">background-repeat</span></a></li><li class="menu-item" data-property-name="background-size"><a class="menu-link" href="{{site.url}}/property/background-size" data-property-name="background-size"><span class="item-name">background-size</span></a></li><li class="menu-item" data-property-name="background"><a class="menu-link" href="{{site.url}}/property/background" data-property-name="background"><span class="item-name">background</span></a></li>

_includes/collections/box-model-list.html

@@ -1 +1 @@
-<li class="menu-item" data-property-name="border-bottom-width"><a class="menu-link" href="{{site.url}}/property/border-bottom-width" data-property-name="border-bottom-width"><span class="menu-item-name">border-bottom-width</span></a></li><li class="menu-item" data-property-name="border-left-width"><a class="menu-link" href="{{site.url}}/property/border-left-width" data-property-name="border-left-width"><span class="menu-item-name">border-left-width</span></a></li><li class="menu-item" data-property-name="border-right-width"><a class="menu-link" href="{{site.url}}/property/border-right-width" data-property-name="border-right-width"><span class="menu-item-name">border-right-width</span></a></li><li class="menu-item" data-property-name="border-top-width"><a class="menu-link" href="{{site.url}}/property/border-top-width" data-property-name="border-top-width"><span class="menu-item-name">border-top-width</span></a></li><li class="menu-item" data-property-name="border-width"><a class="menu-link" href="{{site.url}}/property/border-width" data-property-name="border-width"><span class="menu-item-name">border-width</span></a></li><li class="menu-item" data-property-name="box-sizing"><a class="menu-link" href="{{site.url}}/property/box-sizing" data-property-name="box-sizing"><span class="menu-item-name">box-sizing</span></a></li><li class="menu-item" data-property-name="height"><a class="menu-link" href="{{site.url}}/property/height" data-property-name="height"><span class="menu-item-name">height</span></a></li><li class="menu-item" data-property-name="line-height"><a class="menu-link" href="{{site.url}}/property/line-height" data-property-name="line-height"><span class="menu-item-name">line-height</span></a></li><li class="menu-item" data-property-name="margin-bottom"><a class="menu-link" href="{{site.url}}/property/margin-bottom" data-property-name="margin-bottom"><span class="menu-item-name">margin-bottom</span></a></li><li class="menu-item" data-property-name="margin-left"><a class="menu-link" href="{{site.url}}/property/margin-left" data-property-name="margin-left"><span class="menu-item-name">margin-left</span></a></li><li class="menu-item" data-property-name="margin-right"><a class="menu-link" href="{{site.url}}/property/margin-right" data-property-name="margin-right"><span class="menu-item-name">margin-right</span></a></li><li class="menu-item" data-property-name="margin-top"><a class="menu-link" href="{{site.url}}/property/margin-top" data-property-name="margin-top"><span class="menu-item-name">margin-top</span></a></li><li class="menu-item" data-property-name="margin"><a class="menu-link" href="{{site.url}}/property/margin" data-property-name="margin"><span class="menu-item-name">margin</span></a></li><li class="menu-item" data-property-name="max-height"><a class="menu-link" href="{{site.url}}/property/max-height" data-property-name="max-height"><span class="menu-item-name">max-height</span></a></li><li class="menu-item" data-property-name="max-width"><a class="menu-link" href="{{site.url}}/property/max-width" data-property-name="max-width"><span class="menu-item-name">max-width</span></a></li><li class="menu-item" data-property-name="min-height"><a class="menu-link" href="{{site.url}}/property/min-height" data-property-name="min-height"><span class="menu-item-name">min-height</span></a></li><li class="menu-item" data-property-name="min-width"><a class="menu-link" href="{{site.url}}/property/min-width" data-property-name="min-width"><span class="menu-item-name">min-width</span></a></li><li class="menu-item" data-property-name="padding-bottom"><a class="menu-link" href="{{site.url}}/property/padding-bottom" data-property-name="padding-bottom"><span class="menu-item-name">padding-bottom</span></a></li><li class="menu-item" data-property-name="padding-left"><a class="menu-link" href="{{site.url}}/property/padding-left" data-property-name="padding-left"><span class="menu-item-name">padding-left</span></a></li><li class="menu-item" data-property-name="padding-right"><a class="menu-link" href="{{site.url}}/property/padding-right" data-property-name="padding-right"><span class="menu-item-name">padding-right</span></a></li><li class="menu-item" data-property-name="padding-top"><a class="menu-link" href="{{site.url}}/property/padding-top" data-property-name="padding-top"><span class="menu-item-name">padding-top</span></a></li><li class="menu-item" data-property-name="padding"><a class="menu-link" href="{{site.url}}/property/padding" data-property-name="padding"><span class="menu-item-name">padding</span></a></li><li class="menu-item" data-property-name="width"><a class="menu-link" href="{{site.url}}/property/width" data-property-name="width"><span class="menu-item-name">width</span></a></li>
+<li class="menu-item" data-property-name="border-bottom-width"><a class="menu-link" href="{{site.url}}/property/border-bottom-width" data-property-name="border-bottom-width"><span class="item-name">border-bottom-width</span></a></li><li class="menu-item" data-property-name="border-left-width"><a class="menu-link" href="{{site.url}}/property/border-left-width" data-property-name="border-left-width"><span class="item-name">border-left-width</span></a></li><li class="menu-item" data-property-name="border-right-width"><a class="menu-link" href="{{site.url}}/property/border-right-width" data-property-name="border-right-width"><span class="item-name">border-right-width</span></a></li><li class="menu-item" data-property-name="border-top-width"><a class="menu-link" href="{{site.url}}/property/border-top-width" data-property-name="border-top-width"><span class="item-name">border-top-width</span></a></li><li class="menu-item" data-property-name="border-width"><a class="menu-link" href="{{site.url}}/property/border-width" data-property-name="border-width"><span class="item-name">border-width</span></a></li><li class="menu-item" data-property-name="box-sizing"><a class="menu-link" href="{{site.url}}/property/box-sizing" data-property-name="box-sizing"><span class="item-name">box-sizing</span></a></li><li class="menu-item" data-property-name="height"><a class="menu-link" href="{{site.url}}/property/height" data-property-name="height"><span class="item-name">height</span></a></li><li class="menu-item" data-property-name="line-height"><a class="menu-link" href="{{site.url}}/property/line-height" data-property-name="line-height"><span class="item-name">line-height</span></a></li><li class="menu-item" data-property-name="margin-bottom"><a class="menu-link" href="{{site.url}}/property/margin-bottom" data-property-name="margin-bottom"><span class="item-name">margin-bottom</span></a></li><li class="menu-item" data-property-name="margin-left"><a class="menu-link" href="{{site.url}}/property/margin-left" data-property-name="margin-left"><span class="item-name">margin-left</span></a></li><li class="menu-item" data-property-name="margin-right"><a class="menu-link" href="{{site.url}}/property/margin-right" data-property-name="margin-right"><span class="item-name">margin-right</span></a></li><li class="menu-item" data-property-name="margin-top"><a class="menu-link" href="{{site.url}}/property/margin-top" data-property-name="margin-top"><span class="item-name">margin-top</span></a></li><li class="menu-item" data-property-name="margin"><a class="menu-link" href="{{site.url}}/property/margin" data-property-name="margin"><span class="item-name">margin</span></a></li><li class="menu-item" data-property-name="max-height"><a class="menu-link" href="{{site.url}}/property/max-height" data-property-name="max-height"><span class="item-name">max-height</span></a></li><li class="menu-item" data-property-name="max-width"><a class="menu-link" href="{{site.url}}/property/max-width" data-property-name="max-width"><span class="item-name">max-width</span></a></li><li class="menu-item" data-property-name="min-height"><a class="menu-link" href="{{site.url}}/property/min-height" data-property-name="min-height"><span class="item-name">min-height</span></a></li><li class="menu-item" data-property-name="min-width"><a class="menu-link" href="{{site.url}}/property/min-width" data-property-name="min-width"><span class="item-name">min-width</span></a></li><li class="menu-item" data-property-name="padding-bottom"><a class="menu-link" href="{{site.url}}/property/padding-bottom" data-property-name="padding-bottom"><span class="item-name">padding-bottom</span></a></li><li class="menu-item" data-property-name="padding-left"><a class="menu-link" href="{{site.url}}/property/padding-left" data-property-name="padding-left"><span class="item-name">padding-left</span></a></li><li class="menu-item" data-property-name="padding-right"><a class="menu-link" href="{{site.url}}/property/padding-right" data-property-name="padding-right"><span class="item-name">padding-right</span></a></li><li class="menu-item" data-property-name="padding-top"><a class="menu-link" href="{{site.url}}/property/padding-top" data-property-name="padding-top"><span class="item-name">padding-top</span></a></li><li class="menu-item" data-property-name="padding"><a class="menu-link" href="{{site.url}}/property/padding" data-property-name="padding"><span class="item-name">padding</span></a></li><li class="menu-item" data-property-name="width"><a class="menu-link" href="{{site.url}}/property/width" data-property-name="width"><span class="item-name">width</span></a></li>