From 9314568c95da933abe20ce2fa45e5e07d3fb2cb3 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Mon, 17 Oct 2022 17:37:39 -0400
Subject: [PATCH] Design of copy button on mobile

---
 src/layouts/page/tea-cli.html            | 129 +++--------------------
 src/layouts/partials/clipboard-copy.html |   5 +-
 2 files changed, 14 insertions(+), 120 deletions(-)

diff --git a/src/layouts/page/tea-cli.html b/src/layouts/page/tea-cli.html
index 4e295cb..bf50b34 100644
--- a/src/layouts/page/tea-cli.html
+++ b/src/layouts/page/tea-cli.html
@@ -22,106 +22,17 @@
 
 <style>
 
-  @media only screen and (min-width: 1200px) {
+  @media only screen and (min-width: 768px) {
 
     .one-liner{
       width: 85%;
-      height: 8.371vw;
+      padding: 2.455vw 4.185vw;
       border-radius: 0px;
       border: none;
       background-color: #1a1a1a !important;
       font-family: "pp-neue-machina";
       color:#4d4d4d;
-      font-size: 2.1vw;
-      padding-left: 4.185vw;
-      border-left: 2px solid #949494;
-      border-right: 2px solid #949494;
-    }
-
-    .one-liner:focus{
-      border:none;
-      outline: none;
-      border-left: 2px solid #949494;
-      border-right: 2px solid #949494;
-    }
-
-    .clipboard-copy{
-      height: 8.371vw;
-      width: 14%;
-      font-family: "pp-neue-machina";
-      color:#4d4d4d;
-      font-size: 2.1vw;
-      float:right;
-      background-color: #1a1a1a !important;
-      border: none;
-      border-right: 2px solid #949494;
-      transition: 0.2s linear;
-    }
-
-    .clipboard-copy:hover{
-      background-color: #00ffd0 !important;
-      color: #1a1a1a !important;
-      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
-    }
-
-  }
-
-  @media only screen and (min-width: 992px) and (max-width: 1200px) {
-
-    .one-liner{
-      width: 85%;
-      height: 8.371vw;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#4d4d4d;
-      font-size: 2.1vw;
-      padding-left: 4.185vw;
-      border-left: 2px solid #949494;
-      border-right: 2px solid #949494;
-    }
-
-    .one-liner:focus{
-      border:none;
-      outline: none;
-      border-left: 2px solid #949494;
-      border-right: 2px solid #949494;
-    }
-
-    .clipboard-copy{
-      height: 8.371vw;
-      width: 14%;
-      font-family: "pp-neue-machina";
-      color:#4d4d4d;
-      font-size: 2.1vw;
-      float:right;
-      background-color: #1a1a1a !important;
-      border: none;
-      border-right: 2px solid #949494;
-      transition: 0.2s linear;
-    }
-
-    .clipboard-copy:hover{
-      background-color: #00ffd0 !important;
-      color: #1a1a1a !important;
-      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
-    }
-
-  }
-
-  @media only screen and (min-width: 768px) and (max-width: 992px) {
-
-    .one-liner{
-      width: 85%;
-      height: 8.371vw;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#4d4d4d;
-      font-size: 2.1vw;
-      padding-left: 4.185vw;
+      font-size: 2vw;
       border-left: 2px solid #949494;
       border-right: 2px solid #949494;
     }
@@ -158,14 +69,13 @@
 
     .one-liner{
       width: 85%;
-      height: 8.371vw;
+      padding: 5vw 4vw;
       border-radius: 0px;
       border: none;
       background-color: #1a1a1a !important;
       font-family: "pp-neue-machina";
       color:#4d4d4d;
-      font-size: 2.1vw;
-      padding-left: 4.185vw;
+      font-size: 3.5vw;
       border-left: 2px solid #949494;
       border-right: 2px solid #949494;
     }
@@ -178,11 +88,11 @@
     }
 
     .clipboard-copy{
-      height: 8.371vw;
+      padding: 5vw 4vw;
       width: 14%;
       font-family: "pp-neue-machina";
       color:#4d4d4d;
-      font-size: 2.1vw;
+      font-size: 3.5vw;
       float:right;
       background-color: #1a1a1a !important;
       border: none;
@@ -201,15 +111,15 @@
   @media only screen and (max-width: 576px) {
 
     .one-liner{
-      width: 85%;
-      height: 8.371vw;
+      width: 100%;
+      padding: 7.5vw 7.5vw !important;
       border-radius: 0px;
       border: none;
       background-color: #1a1a1a !important;
       font-family: "pp-neue-machina";
       color:#4d4d4d;
-      font-size: 2.1vw;
-      padding-left: 4.185vw;
+      text-align: center !important;
+      font-size: 4vw;
       border-left: 2px solid #949494;
       border-right: 2px solid #949494;
     }
@@ -222,22 +132,7 @@
     }
 
     .clipboard-copy{
-      height: 8.371vw;
-      width: 14%;
-      font-family: "pp-neue-machina";
-      color:#4d4d4d;
-      font-size: 2.1vw;
-      float:right;
-      background-color: #1a1a1a !important;
-      border: none;
-      border-right: 2px solid #949494;
-      transition: 0.2s linear;
-    }
-
-    .clipboard-copy:hover{
-      background-color: #00ffd0 !important;
-      color: #1a1a1a !important;
-      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+      display: none;
     }
 
   }
diff --git a/src/layouts/partials/clipboard-copy.html b/src/layouts/partials/clipboard-copy.html
index e6a10af..1740c8f 100644
--- a/src/layouts/partials/clipboard-copy.html
+++ b/src/layouts/partials/clipboard-copy.html
@@ -11,14 +11,13 @@
 
   .one-liner{
     width: 85%;
-    height: 8.371vw;
+    padding: 2.455vw 4.185vw;
     border-radius: 0px;
     border: none;
     background-color: #1a1a1a !important;
     font-family: "pp-neue-machina";
     color:#4d4d4d;
     font-size: 2.1vw;
-    padding-left: 4.185vw;
     border-left: 2px solid #949494;
     border-right: 2px solid #949494;
   }
@@ -52,7 +51,7 @@
 </style>
 
 <script>
-  
+
     function myFunction() {
     // Get the text field
     var copyText = document.getElementById("myInput");