From b9b3dbbd9b420c60198f1e1184ecbe7b2bb04f15 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Fri, 1 Sep 2017 04:23:55 +0800
Subject: [PATCH] Improve back button appearance

---
 _includes/2017/top-nav.html             |  8 ++-
 _layouts/2017/home.html                 |  2 +-
 _sass/2017/components/back-button.scss  | 48 ++++++++++++++
 _sass/2017/components/headline-ad.scss  | 17 +++--
 _sass/2017/components/main-heading.scss |  2 +
 _sass/2017/components/top-nav.scss      | 85 +++++++++++++++----------
 _sass/2017/style.scss                   |  1 +
 7 files changed, 120 insertions(+), 43 deletions(-)
 create mode 100644 _sass/2017/components/back-button.scss

diff --git a/_includes/2017/top-nav.html b/_includes/2017/top-nav.html
index e5b69d227..2db0d1345 100644
--- a/_includes/2017/top-nav.html
+++ b/_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
diff --git a/_layouts/2017/home.html b/_layouts/2017/home.html
index 8778eb377..5fd3d5752 100644
--- a/_layouts/2017/home.html
+++ b/_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>
diff --git a/_sass/2017/components/back-button.scss b/_sass/2017/components/back-button.scss
new file mode 100644
index 000000000..5f2dbe0c8
--- /dev/null
+++ b/_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;
+    }
+  }
+}
diff --git a/_sass/2017/components/headline-ad.scss b/_sass/2017/components/headline-ad.scss
index 156e62ebd..94f5886c8 100644
--- a/_sass/2017/components/headline-ad.scss
+++ b/_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;
+    }
   }
 }
diff --git a/_sass/2017/components/main-heading.scss b/_sass/2017/components/main-heading.scss
index cc1557768..4ef4959d2 100644
--- a/_sass/2017/components/main-heading.scss
+++ b/_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,
diff --git a/_sass/2017/components/top-nav.scss b/_sass/2017/components/top-nav.scss
index 8d0a1779d..82771f7f9 100644
--- a/_sass/2017/components/top-nav.scss
+++ b/_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;
   }
 }
diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index 5cda48d62..1c651c4c2 100644
--- a/_sass/2017/style.scss
+++ b/_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';