From 01f19eeff00c492182a4b15fd65c64e6c951a4c3 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 22 Sep 2022 16:09:52 -0400
Subject: [PATCH] Dedicated CSS file for buttons

---
 src/layouts/page/style-guide.html        |  3 ++
 src/layouts/partials/full-width-cta.html | 51 ------------------------
 src/layouts/partials/head.html           |  1 +
 src/static/css/buttons.css               | 49 +++++++++++++++++++++++
 4 files changed, 53 insertions(+), 51 deletions(-)
 create mode 100644 src/static/css/buttons.css

diff --git a/src/layouts/page/style-guide.html b/src/layouts/page/style-guide.html
index 842dd7f..54afbb3 100644
--- a/src/layouts/page/style-guide.html
+++ b/src/layouts/page/style-guide.html
@@ -13,6 +13,9 @@
       </div>
     </div>
   </div>
+  <div class="full-width-cta-container">
+     {{- partial "full-width-cta.html" . -}}
+  </div>
 </section>
 
 <style>
diff --git a/src/layouts/partials/full-width-cta.html b/src/layouts/partials/full-width-cta.html
index 3ad6f19..f61e952 100644
--- a/src/layouts/partials/full-width-cta.html
+++ b/src/layouts/partials/full-width-cta.html
@@ -1,54 +1,3 @@
-<style>
-  .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;
- }
-
-</style>
-
 <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>
diff --git a/src/layouts/partials/head.html b/src/layouts/partials/head.html
index 7865c15..2b23269 100644
--- a/src/layouts/partials/head.html
+++ b/src/layouts/partials/head.html
@@ -54,6 +54,7 @@
     <link rel="stylesheet" href="/css/generative-art.css">
     <link rel="stylesheet" href="/css/footer.css">
     <link rel="stylesheet" href="/css/package-grid.css">
+    <link rel="stylesheet" href="/css/buttons.css">
     <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap" rel="stylesheet">
     <link href="https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/icons.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/src/static/css/buttons.css b/src/static/css/buttons.css
new file mode 100644
index 0000000..d38dc08
--- /dev/null
+++ b/src/static/css/buttons.css
@@ -0,0 +1,49 @@
+/* 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;
+}
+
+.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;
+}