feat(header): move subscribe button (#9)

Widen · Sep 3, 2020 · 15651ae · 15651ae
1 parent 546ccd4
commit 15651ae
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 8 deletions.
diff --git a/_config.yml b/_config.yml
@@ -7,7 +7,7 @@ guardian:
     twitter: widendev
     github_org: widen
     github_repo: jekyll-theme-guardian
-    email_subscription_url: https://widen.com
+    email_subscription_url: https://www.widen.com
   tracking:
     google_analytics_code:
     disqus_shortname:
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -14,10 +14,7 @@
         </nav >
         <nav>
           <ul class="site-social-links inline">
-              <li><a target="_blank" title="RSS Feed" href="{{ "/feed.xml" | relative_url }}"><ion-icon name="logo-rss"></ion-icon></a></li>
-              {% if site.guardian.social_links.email_subscription_url %}
-              <li><a target="_blank" title="Email Subscription" href="{{ site.guardian.social_links.email_subscription_url }}"><ion-icon name="mail"></ion-icon></a></li>
-              {% endif %}
+              <li><a target="_blank" title="RSS Feed" href="{{ "/feed.xml" | relative_url }}"><ion-icon name="logo-rss"></ion-icon></a></li>          
               <li><a target="_blank" title="GitHub" href="https://github.com/{{ site.guardian.social_links.github_org }}"><ion-icon name="logo-github"></ion-icon></a></li>
               <li><a target="_blank" title="Twitter" href="https://twitter.com/{{ site.guardian.social_links.twitter }}"><ion-icon name="logo-twitter"></ion-icon></a></li>
           </ul>

diff --git a/_includes/header.html b/_includes/header.html
@@ -5,6 +5,8 @@
         <img width="400" alt="{{ site.title }} Logo" src="{{ site.guardian.style.logo_url }}">
       </a>
     </div>
-    <br class="clear"/>
+    {% if site.guardian.social_links.email_subscription_url %}
+      <a class="subscribe" target="_blank" title="Email Subscription" href="{{ site.guardian.social_links.email_subscription_url }}">Subscribe to Updates</a>
+    {% endif %}
   </div>
 </header>
diff --git a/_sass/_header.scss b/_sass/_header.scss
@@ -2,16 +2,43 @@ header.site-header{
 
     background-color: $dark-grey;
     background-image: url($header_background_url);
+    background-size: cover;
     padding: 20px 0 18px 0;
 
+    .wrapper {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+
+      @media (max-width: 767px) {
+        flex-direction: column;
+      }
+    }
+
     .logo {
 
         a {
-            float: left;
             display: inline-block;
-            color: $white;
         }
 
+        @media (max-width: 767px) {
+          margin-bottom: 8px;
+        }
+    }
+
+    .subscribe {
+      padding: 10px 12px;
+      background-color: $white;
+      border-radius: 4px;
+      font-size: 10px;
+      font-weight: 400;
+      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+      text-transform: uppercase;
+      letter-spacing: 2px;
+
+      &:hover {
+        background-color: darken($white, 5%);
+      }
     }
 
     h2 {