Update

_sass/2017/components/body-area.scss

@@ -1,9 +1,5 @@
 .body-area {
-  max-width: $column * 3 + 32px;
+  max-width: $area-width;
   margin: 0 auto;
-  padding: 8px;
-
-  @media (min-width: 481px) {
-    padding: 16px;
-  }
+  @include gutter(padding);
 }

_sass/2017/components/page-actions.scss

@@ -9,6 +9,11 @@
     height: 32px;
     line-height: 32px;
     vertical-align: top;
+    width: auto;
+  }
+
+  & > .link.link > a {
+    padding: 0 8px;
   }
 
   &,
@@ -68,6 +73,7 @@
   & > .link.-button > a {
     box-shadow: inset 0 0 0 1px $dark-line-color;
     border-radius: 2px;
-    padding: 0 8px;
+    padding: 0 16px;
+    margin: 0 8px;
   }
 }

_sass/2017/components/top-nav.scss

@@ -9,7 +9,7 @@
   >.container {
     @include gutter(padding-left);
     @include gutter(padding-right);
-    max-width: 1200px;
+    max-width: $area-width;
     margin: 0 auto;
   }
 }
@@ -51,57 +51,4 @@
   }
 }
 
-@mixin action-bar {
-  &,
-  & > li,
-  & > li > a {
-    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;
-  }
-}
-
-.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');
-  }
-}
+// page-actions.scss

_sass/2017/variables.scss

@@ -6,6 +6,8 @@ $gut-small: 8px; // max 480px width
 $gut: 16px;
 $column: 400px;
 
+$area-width: $column * 3 + 32px;
+
 /*
  * Fonts
  */