From 3ab44b9cd6a184b094e36a4afd2a5b83cfcd2859 Mon Sep 17 00:00:00 2001
From: Sebastiaan van Stijn <github@gone.nl>
Date: Tue, 27 Oct 2020 12:32:04 +0100
Subject: [PATCH] _scss: some refactoring of landing-page cta-banners

Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
---
 _includes/landing-page/community-banner.html  | 17 ++--
 _includes/landing-page/docker-aci.html        |  2 +-
 _includes/landing-page/docker-hub-signup.html |  2 +-
 _includes/landing-page/docker-pricing.html    |  2 +-
 _includes/landing-page/dockercon-banner.html  |  2 +-
 .../landing-page/dockercon-wrapup-banner.html |  2 +-
 _scss/_landing.scss                           | 79 +++++++------------
 7 files changed, 43 insertions(+), 63 deletions(-)

diff --git a/_includes/landing-page/community-banner.html b/_includes/landing-page/community-banner.html
index 0cc8b0e72a..40a9026e4c 100644
--- a/_includes/landing-page/community-banner.html
+++ b/_includes/landing-page/community-banner.html
@@ -1,19 +1,18 @@
-<section class="join-community slack">
+<section class="cta-banner slack">
   <div class="container">
     <div class="row">
       <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">
-        <h5 class="title">
+        <h2>Join the Docker Community Slack channel</h2>
+        <h5>
           Connect with Docker Captains and Docker enthusiasts through our
-          Community Slack channel.
+          Community Slack channel. It’s a great place to learn and ask questions
+          along your journey.
         </h5>
-        <p>
-          It’s a great place to learn and ask questions along your journey.
-        </p>
       </div>
       <div class="col-xs-12 col-md-6 col-lg-4 text-center">
-        <a href="http://dockr.ly/slack" class="slack-button">
-          <img src="/images/slack-icon.svg" alt="slack" />
-          <span>Join the community</span>
+        <a href="http://dockr.ly/slack" class="btn slack-button">
+          <img src="/images/slack-icon.svg" width="56" height="56" alt="slack" />
+          Join the community
         </a>
       </div>
     </div>
diff --git a/_includes/landing-page/docker-aci.html b/_includes/landing-page/docker-aci.html
index 9263727677..152fd1f3cd 100644
--- a/_includes/landing-page/docker-aci.html
+++ b/_includes/landing-page/docker-aci.html
@@ -1,4 +1,4 @@
-<section class="join-community dockercon">
+<section class="cta-banner dockercon">
   <div class="container">
     <div class="row">
       <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">
diff --git a/_includes/landing-page/docker-hub-signup.html b/_includes/landing-page/docker-hub-signup.html
index 6c121c67bc..7d49a95092 100644
--- a/_includes/landing-page/docker-hub-signup.html
+++ b/_includes/landing-page/docker-hub-signup.html
@@ -1,4 +1,4 @@
-<section class="join-community dockercon">
+<section class="cta-banner dockercon">
   <div class="container">
     <div class="row">
       <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">
diff --git a/_includes/landing-page/docker-pricing.html b/_includes/landing-page/docker-pricing.html
index 118c66a966..07b472d699 100644
--- a/_includes/landing-page/docker-pricing.html
+++ b/_includes/landing-page/docker-pricing.html
@@ -1,4 +1,4 @@
-<section class="join-community dockercon">
+<section class="cta-banner dockercon">
   <div class="container">
     <div class="row">
       <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">
diff --git a/_includes/landing-page/dockercon-banner.html b/_includes/landing-page/dockercon-banner.html
index 2fc26ae340..654cb33465 100644
--- a/_includes/landing-page/dockercon-banner.html
+++ b/_includes/landing-page/dockercon-banner.html
@@ -1,4 +1,4 @@
-<section class="join-community dockercon">
+<section class="cta-banner dockercon">
   <div class="container">
     <div class="row">
       <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">
diff --git a/_includes/landing-page/dockercon-wrapup-banner.html b/_includes/landing-page/dockercon-wrapup-banner.html
index 466e4b3a61..bec64e576d 100644
--- a/_includes/landing-page/dockercon-wrapup-banner.html
+++ b/_includes/landing-page/dockercon-wrapup-banner.html
@@ -1,4 +1,4 @@
-<section class="join-community dockercon">
+<section class="cta-banner dockercon">
   <div class="container">
     <div class="row">
       <div class="col-xs-12 col-md-6 col-lg-offset-1 col-lg-7">
diff --git a/_scss/_landing.scss b/_scss/_landing.scss
index 0554cd3f44..9c96a980bd 100644
--- a/_scss/_landing.scss
+++ b/_scss/_landing.scss
@@ -243,65 +243,46 @@ body.landing {
     }
   }
 
-  section.join-community {
+  section.cta-banner {
     background-color: $dark-blue;
-    padding: 75px 0;
+    padding:          75px 0;
 
     h2, h5, p {
       color: white;
     }
 
-    &.dockercon {
-      text-align: center;
+    text-align: center;
 
-      @include md-width {
-        text-align: left;
-      }
-
-      img {
-        margin-bottom: 20px;
-        max-height: 100px;
-      }
-
-      h2 {
-        color: white;
-        font-size: 32px;
-        line-height: 37px;;
-      }
-
-      a.btn {
-        background-color: #FF3F73;
-        color: white;
-        font-family: 'Open Sans', sans-serif;
-        font-size: 17px;
-        font-weight: bold;
-        padding: 20px 60px;
-        margin-top: 50px;
-      }
+    @include md-width {
+      text-align: left;
     }
 
-    &.slack {
-      a.slack-button {
-        background: #FFFFFF;
-        border: 2px solid #FFFFFF;
-        box-sizing: border-box;
-        border-radius: 3px;
-        align-items: center;
-        display: inline-flex;
-        padding: 0 26px 0 2px;
-        text-transform: none;
-        margin-top: 2rem;
+    img {
+      margin-bottom: 20px;
+      max-height:    100px;
+    }
 
-        img {
-          height: 56px;
-          width: 56px;
-        }
-        span {
-          font-weight: bold;
-          font-size: 17px;
-          line-height: 24px;
-          color: $dark-blue;
-        }
+    h2 {
+      font-size:   32px;
+      line-height: 37px;;
+    }
+
+    a.btn {
+      background:  #FF3F73;
+      color:       white;
+      font-size:   17px;
+      font-weight: bold;
+      margin-top:  50px;
+      padding:     20px 60px;
+
+      img {
+        margin: 0;
+      }
+
+      &.slack-button {
+        background:  white;
+        color:       $dark-blue;
+        padding:     2px 25px 2px 10px;
       }
     }
   }