Add some buttons

_includes/2017/top-nav.html

@@ -1,9 +1,18 @@
 <div class='top-nav'>
-  <a class='brand' href='{{base}}'>
-    Rico's cheatsheets
-  </a>
+  <div class='container'>
+    <a class='brand' href='{{base}}'>
+      Rico's cheatsheets
+    </a>
 
-  <div class='actions'>
-    {% include social-list.html class="social" page=include.page %}
+    <div class='actions'>
+      {% include social-list.html class="social page-actions" page=include.page %}
+      <ul class='page-actions'>
+        <li class='github'>
+          <a href='https://github.com/rstacruz/cheatsheets/blob/gh-pages/{{ page.path }}.md'>
+            <span class='text -visible'>Edit</span>
+          </a>
+        </li>
+      </ul>
+    </div>
   </div>
 </div>

_includes/social-list.html

@@ -2,5 +2,5 @@
 <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="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="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 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/top-nav.scss

@@ -6,9 +6,32 @@
     text-align: center;
   }
 
+  >.container {
+    @include gutter(padding-left);
+    @include gutter(padding-right);
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+
+.top-nav > .container {
+  & {
+    display: flex;
+    align-items: center;
+  }
+
+  & > .brand {
+    flex: 1 1 auto;
+  }
+
+  & > .actions {
+    flex: 0 0 auto;
+    display: flex;
+  }
+
   & > .brand {
     @include font-size(-1);
-    display: block;
+    display: inline-block;
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -25,7 +48,59 @@
   }
 
   & > .actions > .social {
-    // TODO
-    display: none;
+  }
+}
+
+@mixin action-bar {
+  & {
+    height: 32px;
+  }
+
+  &,
+  & > li {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  & > li > a,
+  & > li > a:visited {
+    color: $base-mute;
+    text-decoration: none;
+  }
+
+  & > li > a::before {
+    font-size: 16px;
+    height: 32px;
+    width: 32px;
+    line-height: 32px;
+    text-align: center;
+  }
+
+  & > li > a > .text {
+    display: none;
+  }
+
+  & > li > a > .text.-visible {
+    display: inline-block;
+    padding-left: 8px;
+  }
+}
+
+.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');
   }
 }

_sass/2017/style.scss

@@ -1,8 +1,11 @@
+@import url('https://unpkg.com/hint.css@2.5.0/hint.min.css');
 @import './variables';
-@import '../vendor/modularscale';
+@import '../vendor/modularscale/modularscale';
+@import '../vendor/iconfonts/ionicons@3';
 @import './utils/font-size';
 @import './utils/gutter';
 @import './utils/heading-style';
+@include ion-font;
 @import './base/base';
 @import './markdown/code';
 @import './markdown/headings';