Add Can I use

Author: jgthms

_includes/collections/animations.html

@@ -89,18 +89,6 @@
   <p class="footer-title">
     <strong>{{site.subtitle}}</strong> <small>Created by <a href="https://twitter.com/jgthms">@jgthms</a></small>
   </p>
-  <div class="footer-facebook">
-    <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 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>
-    <a class="footer-share-button is-github" href="https://github.com/jgthms/css-reference" target="_blank">
-      {% include svg/github.html %}
-    </a>
-  </p> -->
   <p class="footer-share footer-share--social">
     <strong class="footer-share-label">Share</strong>
     <a class="footer-share-button is-twitter"
@@ -120,4 +108,16 @@
     </a>
     <a id="menu-nav-open" class="footer-share-nav">Menu</a>
   </p>
+  <div class="footer-facebook">
+    <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 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="110px" height="20px"></iframe>
+  </div>
+  <!-- <p class="footer-share footer-share--contribute">
+    <strong class="footer-share-label">Contribute</strong>
+    <a class="footer-share-button is-github" href="https://github.com/jgthms/css-reference" target="_blank">
+      {% include svg/github.html %}
+    </a>
+  </p> -->
 </footer>

_includes/collections/box-model.html

@@ -30,10 +30,30 @@
     {% include menu.html %}
     <main class="main">
       <header class="heading">
-        <h1 class="heading-title">
-          <strong>{{page.collection_name}}</strong> in CSS
-        </h1>
-        <p class="heading-description">The CSS properties that allow you to {{page.description}}</p>
+        <div class="heading-content">
+          <h1 class="heading-title">
+            <strong>{{page.collection_name}}</strong> in CSS
+          </h1>
+          <p class="heading-description">The CSS properties that allow you to {{page.description}}</p>
+        </div>
+        <p class="heading-share">
+          <strong class="heading-share-label">Share this page</strong>
+          <a class="heading-share-button is-twitter"
+            data-social-network="Twitter"
+            data-social-action="tweet"
+            data-social-target="{{site.url}}{{page.url}}"
+            href="https://twitter.com/intent/tweet?url={{site.url | url_encode}}{{page.url | url_encode}}&text={{page.collection_name | prepend: 'Learn how ' | append: ' works in CSS' | url_encode}}"
+            rel="external nofollow"
+            target="_blank">
+            {% include svg/twitter.html %}
+          </a>
+          <a class="heading-share-button is-facebook"
+            href="http://www.facebook.com/sharer.php?u={{site.url | url_encode}}{{page.url | url_encode}}"
+            rel="external nofollow"
+            target="_blank">
+            {% include svg/facebook.html %}
+          </a>
+        </p>
       </header>
       <section class="list">
         {{content}}