Fix buttons

.gitignore

@@ -1,2 +1,3 @@
 _output
 _site
+.jekyll-metadata

_includes/2017/top-nav.html

@@ -7,8 +7,8 @@
     <div class='actions'>
       {% include social-list.html class="social page-actions" page=include.page %}
       <ul class='page-actions'>
-        <li class='github hint--bottom' data-hint='Edit this page on GitHub'>
+        <li class='link github -button hint--bottom' data-hint='Edit this page on GitHub'>
-          <a href='https://github.com/rstacruz/cheatsheets/blob/gh-pages/{{ page.path | remove: '.html' }}.md'>
+          <a href='https://github.com/rstacruz/cheatsheets/blob/gh-pages/{{ page.path | remove: '.html' }}'>
             <span class='text -visible'>Edit</span>
           </a>
         </li>

_includes/social-list.html

@@ -1,6 +1,6 @@
 {% assign description = "The ultimate cheatsheet for " | append: include.page.title | append: "." %}
 <ul class="social-list {{ include.class }}">
-  <li class="facebook hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ include.page.url }}" target="share"><span class="text">Like</span></a></li>
+  <li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ include.page.url }}" target="share"><span class="text">Like</span></a></li>
-  <li class="twitter hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text={{ description }} {{ site.url }}{{ include.page.url }}" target="share"><span class="text">Tweet</span></a></li>
+  <li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text={{ description }} {{ site.url }}{{ include.page.url }}" target="share"><span class="text">Tweet</span></a></li>
-  <!--<li class="googleplus hint--bottom" data-hint="Share on Google Plus"><a href="https://plus.google.com/share?url={{ site.url }}{{ include.page.url }}" target="share"><span class="text">+1</span></a></li>-->
+  <!--<li class="googleplus link hint--bottom" data-hint="Share on Google Plus"><a href="https://plus.google.com/share?url={{ site.url }}{{ include.page.url }}" target="share"><span class="text">+1</span></a></li>-->
 </ul>

_sass/2017/components/page-actions.scss

@@ -0,0 +1,73 @@
+@mixin action-bar {
+  & {
+    height: 32px;
+  }
+
+  & > .link.link > a,
+  & > .link.link > a::before {
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+    vertical-align: top;
+  }
+
+  &,
+  & > li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  & > li > a,
+  & > li > a:visited {
+    color: $base-mute;
+    text-decoration: none;
+  }
+
+  & > li > a:hover,
+  & > li > a:focus {
+    color: $base-b3;
+
+    & > .text {
+      color: $base-b3;
+    }
+  }
+
+  & > li > a::before {
+    font-size: 16px;
+    text-align: center;
+  }
+
+  & > li > a > .text {
+    @include font-size(-1);
+    display: none;
+  }
+
+  & > li > a > .text.-visible {
+    display: inline;
+  }
+}
+
+.page-actions {
+  & {
+    @include action-bar;
+  }
+
+  & > .facebook > a::before {
+    @include ion-icon('logo-facebook');
+  }
+
+  & > .twitter > a::before {
+    @include ion-icon('logo-twitter');
+  }
+
+  & > .github > a::before {
+    @include ion-icon('logo-github');
+  }
+
+  & > .link.-button > a {
+    box-shadow: inset 0 0 0 1px $dark-line-color;
+    border-radius: 2px;
+    padding: 0 8px;
+  }
+}

_sass/2017/style.scss

@@ -16,4 +16,5 @@
 @import './components/h3-section-list';
 @import './components/headline-ad';
 @import './components/main-heading';
+@import './components/page-actions';
 @import './components/top-nav';