Improve back button appearance

_includes/2017/top-nav.html

@@ -1,8 +1,10 @@
 <nav class='top-nav'>
   <div class='container'>
-    <div class='left'>
-      <a class='home' href='{{base}}'></a>
-    </div>
+    {% unless include.is_home %}
+      <div class='left'>
+        <a class='home back-button' href='{{base}}'></a>
+      </div>
+    {% endunless %}
 
     <a class='brand' href='{{base}}'>
       Rico's cheatsheets

_layouts/2017/home.html

@@ -9,7 +9,7 @@ type: website
   | sort: "updated", "first"
 %}
 {% include 2017/head.html %}
-{% include 2017/top-nav.html page=page %}
+{% include 2017/top-nav.html page=page is_home=true %}
 
 <div class='SideAd'>
   <script async src='//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=ricostacruzcom' id="_carbonads_js"></script>

_sass/2017/components/back-button.scss

@@ -0,0 +1,48 @@
+/*
+ * Home link
+ */
+
+.back-button {
+  text-decoration: none;
+  width: 48px;
+  height: 48px;
+  line-height: 48px - 2px;
+  text-align: center;
+  display: inline-block;
+  border-radius: 50%;
+  transition: all 100ms linear;
+
+  // Smaller on mobile
+  @media (max-width: 480px) {
+    width: 32px;
+    height: 32px;
+    line-height: 32px - 2;
+  }
+
+  // Colors
+  &,
+  &:visited {
+    color: $base-mute;
+  }
+
+  // Active
+  &:hover,
+  &:focus {
+    color: white;
+    background: $base-a;
+    opacity: 1;
+  }
+
+  // Icon
+  &::before {
+    @include ion-icon('md-arrow-back');
+    font-size: 24px;
+  }
+
+  // Icon: smaller on mobile
+  @media (max-width: 480px) {
+    &::before {
+      font-size: 16px;
+    }
+  }
+}

_sass/2017/components/headline-ad.scss

@@ -30,6 +30,7 @@
     text-align: right;
   }
 
+  // Clearfix
   & > div > span::after {
     content: '';
     display: table;
@@ -49,12 +50,14 @@
     margin-bottom: -0.02em;
   }
 
-  .carbon-poweredby::before {
-    display: block;
-    content: '';
-    width: 32px;
-    height: 1px;
-    background: $dark-line-color;
-    margin: 8px (130px + 16px) 8px auto;
+  @media (min-width: 481px) {
+    .carbon-poweredby::before {
+      display: block;
+      content: '';
+      width: 32px;
+      height: 1px;
+      background: $dark-line-color;
+      margin: 8px (130px + 16px) 8px auto;
+    }
   }
 }

_sass/2017/components/main-heading.scss

@@ -48,10 +48,12 @@
     }
   }
 
+  // Mobile: reorder things
   @media (max-width: 540px) {
     & {
       flex-direction: column;
       flex-wrap: wrap;
+      margin-top: 0;
     }
 
     & > h1,

_sass/2017/components/top-nav.scss

@@ -1,29 +1,52 @@
 .top-nav {
-  & {
+  &,
+  & > .container {
     height: 64px;
     line-height: 64px;
     text-align: center;
     position: relative;
   }
 
-  // Horiz line
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 40%;
-    right: 40%;
-    bottom: 0;
-    height: 1px;
-    background: $dark-line-color;
+  // Smaller on mobile
+  @media (max-width: 480px) {
+    & > .container {
+      height: 32px;
+      line-height: 32px;
+      margin-top: 8px;
+    }
 
-    @media (max-width: 480px) {
-      left: 0;
-      right: 0;
+    & {
+      height: 32px + 8px + 8px;
+      padding: 8px 0;
+      border-bottom: solid 1px $dark-line-color;
+      margin-bottom: 8px;
     }
   }
 
-  > .container {
+  // Horiz line
+  @media (min-width: 481px) {
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 40%;
+      right: 40%;
+      bottom: 0;
+      height: 1px;
+      background: linear-gradient(to right,
+        transparent,
+        $dark-line-color 20%,
+        $dark-line-color 80%,
+        transparent);
+
+      @media (max-width: 480px) {
+        left: 0;
+        right: 0;
+      }
+    }
+  }
+
+  & > .container {
     @include gutter(padding-left);
     @include gutter(padding-right);
     max-width: $area-width;
@@ -70,6 +93,18 @@
     }
   }
 
+  // Mobile
+  @media (max-width: 480px) {
+    & > .brand {
+      display: none;
+    }
+
+    & > .actions {
+      margin-left: auto;
+    }
+  }
+
+  // Desktop: absolute the actions
   @media (min-width: 481px) {
     & > .actions {
       position: absolute;
@@ -84,23 +119,9 @@
     }
   }
 
-  // Home link
+  // Offset so it doesn't look misasligned
   & > .left > .home {
-    text-decoration: none;
-
-    &,
-    &:visited {
-      color: $base-mute;
-    }
-
-    &:hover,
-    &:focus {
-      color: $base-a;
-    }
-  }
-
-  & > .left > .home::before {
-    @include ion-icon('md-arrow-back');
-    font-size: 16px;
+    position: relative;
+    left: -16px;
   }
 }

_sass/2017/style.scss

@@ -15,6 +15,7 @@
 @import './markdown/table';
 @import './markdown/ul';
 @import './components/attribute-peg';
+@import './components/back-button';
 @import './components/body-area';
 @import './components/h2-section';
 @import './components/h3-section';