From dc4ccccd974cfd84ebc1e480e7cac40d6b780009 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 22 Sep 2022 16:50:12 -0400
Subject: [PATCH] Mobile styling for full-width CTA

---
 src/layouts/partials/full-width-cta.html |   2 +-
 src/static/css/buttons.css               | 290 ++++++++++++++++++++---
 2 files changed, 254 insertions(+), 38 deletions(-)

diff --git a/src/layouts/partials/full-width-cta.html b/src/layouts/partials/full-width-cta.html
index f61e952..e73187a 100644
--- a/src/layouts/partials/full-width-cta.html
+++ b/src/layouts/partials/full-width-cta.html
@@ -1,5 +1,5 @@
 <hr>
   <div class="row button-container">
-    <a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4" id="nav-cta"><i class="icon-enter-arrow"></i>Authenticate with tea<span style="float:right; margin-top:0.837vw;font-size:1vw;"><u id="count1"></u> devs authenticated</span></a>
+    <a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-0 mt-0" id="nav-cta"><i class="icon-enter-arrow"></i>Authenticate with tea<span class="dev-count"style="float:right; margin-top:0.837vw;font-size:1vw;"><u id="count1"></u> devs authenticated</span></a>
   </div>
 <hr>
diff --git a/src/static/css/buttons.css b/src/static/css/buttons.css
index d38dc08..043526c 100644
--- a/src/static/css/buttons.css
+++ b/src/static/css/buttons.css
@@ -1,49 +1,265 @@
 /* Full-Width CTA */
 
-.btn-primary{
-  padding: 2.455vw 4.185vw;
-  border-radius: 0px !important;
-  font-family: "pp-neue-machina", sans-serif;
-  text-transform: uppercase;
-  font-size: 2vw;
-  border-left: 2px solid #949494 !important;
-  border-right: 2px solid #949494 !important;
-  background-color: #1a1a1a !important;
-  outline: none !important;
-  box-shadow: none !important;
-  text-align: left;
-  border-top-color:#1a1a1a;
-  border-bottom-color: #1a1a1a;
-  transition: 0.2s linear;
+@media only screen and (min-width: 1200px) {
+
+  .btn-primary{
+    padding: 2.455vw 4.185vw;
+    border-radius: 0px !important;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2vw;
+    border-left: 2px solid #949494 !important;
+    border-right: 2px solid #949494 !important;
+    background-color: #1a1a1a !important;
+    outline: none !important;
+    box-shadow: none !important;
+    text-align: left;
+    border-top-color:#1a1a1a;
+    border-bottom-color: #1a1a1a;
+    transition: 0.2s linear;
+  }
+
+  .btn-primary:hover{
+    background-color: #00ffd0 !important;
+    color: #1a1a1a;
+    border-top-color:#00ffd0;
+    border-bottom-color:#00ffd0;
+    border-left-color:#00ffd0;
+    border-right-color:#00ffd0;
+    box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+    padding: 2.455vw 5.580vw;
+    border-top-color:#1a1a1a;
+    border-bottom-color: #1a1a1a;
+  }
+
+  .button-container{
+    padding: 0vw 8.929vw;
+  }
+
+  /* Icon Styling */
+
+  .btn-primary .icon-enter-arrow{
+   display: inline-block;
+   position: relative;
+   margin-right: 0.558vw;
+   transition: 0.2s linear;
+  }
+
+  .btn-primary:hover .icon-enter-arrow{
+   display: inline-block;
+   transform: rotate(-45deg) !important;
+  }
+
 }
 
-.btn-primary:hover{
-  background-color: #00ffd0 !important;
-  color: #1a1a1a;
-  border-top-color:#00ffd0;
-  border-bottom-color:#00ffd0;
-  border-left-color:#00ffd0;
-  border-right-color:#00ffd0;
-  box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
-  padding: 2.455vw 5.580vw;
-  border-top-color:#1a1a1a;
-  border-bottom-color: #1a1a1a;
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+
+  .btn-primary{
+    padding: 2.455vw 4.185vw;
+    border-radius: 0px !important;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2vw;
+    border-left: 2px solid #949494 !important;
+    border-right: 2px solid #949494 !important;
+    background-color: #1a1a1a !important;
+    outline: none !important;
+    box-shadow: none !important;
+    text-align: left;
+    border-top-color:#1a1a1a;
+    border-bottom-color: #1a1a1a;
+    transition: 0.2s linear;
+  }
+
+  .btn-primary:hover{
+    background-color: #00ffd0 !important;
+    color: #1a1a1a;
+    border-top-color:#00ffd0;
+    border-bottom-color:#00ffd0;
+    border-left-color:#00ffd0;
+    border-right-color:#00ffd0;
+    box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+    padding: 2.455vw 5.580vw;
+    border-top-color:#1a1a1a;
+    border-bottom-color: #1a1a1a;
+  }
+
+  .button-container{
+    padding: 0vw 8.929vw;
+  }
+
+  /* Icon Styling */
+
+  .btn-primary .icon-enter-arrow{
+   display: inline-block;
+   position: relaitve;
+   margin-right: 0.558vw;
+   transition: 0.2s linear;
+  }
+
+  .btn-primary:hover .icon-enter-arrow{
+   display: inline-block;
+   transform: rotate(-45deg) !important;
+  }
+
 }
 
-.button-container{
-  padding: 0vw 8.929vw;
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+
+  .btn-primary{
+    padding: 2.455vw 4.185vw;
+    border-radius: 0px !important;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2vw;
+    border-left: 2px solid #949494 !important;
+    border-right: 2px solid #949494 !important;
+    background-color: #1a1a1a !important;
+    outline: none !important;
+    box-shadow: none !important;
+    text-align: left;
+    border-top-color:#1a1a1a;
+    border-bottom-color: #1a1a1a;
+    transition: 0.2s linear;
+  }
+
+  .btn-primary:hover{
+    background-color: #00ffd0 !important;
+    color: #1a1a1a;
+    border-top-color:#00ffd0;
+    border-bottom-color:#00ffd0;
+    border-left-color:#00ffd0;
+    border-right-color:#00ffd0;
+    box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+    padding: 2.455vw 5.580vw;
+    border-top-color:#1a1a1a;
+    border-bottom-color: #1a1a1a;
+  }
+
+  .button-container{
+    padding: 0vw 8.929vw;
+  }
+
+  /* Icon Styling */
+
+  .btn-primary .icon-enter-arrow{
+   display: inline-block;
+   position: relaitve;
+   margin-right: 0.558vw;
+   transition: 0.2s linear;
+  }
+
+  .btn-primary:hover .icon-enter-arrow{
+   display: inline-block;
+   transform: rotate(-45deg) !important;
+  }
+
 }
 
-/* Icon Styling */
+@media only screen and (min-width: 576px) and (max-width: 768px){
+
+  .btn-primary{
+    padding: 2.455vw 4.185vw;
+    border-radius: 0px !important;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 2vw;
+    border-left: 2px solid #949494 !important;
+    border-right: 2px solid #949494 !important;
+    background-color: #1a1a1a !important;
+    outline: none !important;
+    box-shadow: none !important;
+    text-align: left;
+    border-top-color:#1a1a1a;
+    border-bottom-color: #1a1a1a;
+    transition: 0.2s linear;
+  }
+
+  .btn-primary:hover{
+    background-color: #00ffd0 !important;
+    color: #1a1a1a;
+    border-top-color:#00ffd0;
+    border-bottom-color:#00ffd0;
+    border-left-color:#00ffd0;
+    border-right-color:#00ffd0;
+    box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+    padding: 2.455vw 5.580vw;
+    border-top-color:#1a1a1a;
+    border-bottom-color: #1a1a1a;
+  }
+
+  .button-container{
+    padding: 0vw 8.929vw;
+  }
+
+  /* Icon Styling */
+
+  .btn-primary .icon-enter-arrow{
+   display: inline-block;
+   position: relaitve;
+   margin-right: 0.558vw;
+   transition: 0.2s linear;
+  }
+
+  .btn-primary:hover .icon-enter-arrow{
+   display: inline-block;
+   transform: rotate(-45deg) !important;
+  }
 
-.btn-primary .icon-enter-arrow{
- display: inline-block;
- position: relaitve;
- margin-right: 0.558vw;
- transition: 0.2s linear;
 }
 
-.btn-primary:hover .icon-enter-arrow{
- display: inline-block;
- transform: rotate(-45deg) !important;
+@media only screen and (max-width: 576px) {
+
+  .btn-primary{
+    padding: 7.5vw 11.200vw;
+    border-radius: 0px !important;
+    font-family: "pp-neue-machina", sans-serif;
+    text-transform: uppercase;
+    font-size: 4vw;
+    border-left: 2px solid #949494 !important;
+    border-right: 2px solid #949494 !important;
+    background-color: #1a1a1a !important;
+    outline: none !important;
+    box-shadow: none !important;
+    text-align: left;
+    border-top-color:#1a1a1a;
+    border-bottom-color: #1a1a1a;
+    transition: 0.2s linear;
+  }
+
+  .btn-primary:hover{
+    background-color: #00ffd0 !important;
+    color: #1a1a1a;
+    border-top-color:#00ffd0;
+    border-bottom-color:#00ffd0;
+    border-left-color:#00ffd0;
+    border-right-color:#00ffd0;
+    box-shadow: inset 0vw 0vw 0vw 1vw #1a1a1a !important;
+    padding: 7.5vw 11.200vw;
+    border-top-color:#1a1a1a;
+    border-bottom-color: #1a1a1a;
+  }
+
+  .button-container{
+    padding: 0vw 8.929vw;
+  }
+
+  .dev-count{
+    display: none;
+  }
+
+  /* Icon Styling */
+
+  .btn-primary .icon-enter-arrow{
+   display: inline-block;
+   position: relative;
+   margin-right: 3vw;
+   transition: 0.2s linear;
+  }
+
+  .btn-primary:hover .icon-enter-arrow{
+   display: inline-block;
+   transform: rotate(-45deg) !important;
+  }
+
 }