From e60183973b1f79b72148c55fc607c5f8a6629d4d Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Mon, 17 Oct 2022 17:16:50 -0400
Subject: [PATCH] Progress on clipboard styling

---
 src/layouts/page/tea-cli.html            | 249 ++++++++++++++++++++---
 src/layouts/partials/clipboard-copy.html |  27 ++-
 2 files changed, 243 insertions(+), 33 deletions(-)

diff --git a/src/layouts/page/tea-cli.html b/src/layouts/page/tea-cli.html
index 726fb03..4e295cb 100644
--- a/src/layouts/page/tea-cli.html
+++ b/src/layouts/page/tea-cli.html
@@ -12,46 +12,240 @@
 </section>
 
 <hr>
+  <div class="row button-container">
+    <input class="one-liner" type="text" value="$ sh <(curl tea.xyz) install&nbsp;{{- .Title -}}" id="myInput" readonly>
 
-<!-- The text field -->
-<code class="one-liner" data-lang="sh">$ sh <(curl tea.xyz) install</code>
-
-<!-- The button used to copy the text -->
-<button class="clipboard-copy" onclick="myFunction()"><i class="icon-download-arrow"></i></button>
+    <!-- The button used to copy the text -->
+    <button class="clipboard-copy" onclick="myFunction()"><i class="icon-clipboard"></i></button>
+  </div>
+<hr>
 
 <style>
 
-  .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: 8.371vw;
+  @media only screen and (min-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;
+    }
+
   }
 
-  .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;
+  @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;
+    }
+
   }
 
-  .clipboard-copy:hover{
-    background-color: #00ffd0 !important;
-    color: #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;
+      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: 576px) and (max-width: 768px) {
+
+    .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 (max-width: 576px) {
+
+    .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;
+    }
+
   }
 
 </style>
 
 <script>
+
     function myFunction() {
     // Get the text field
     var copyText = document.getElementById("myInput");
@@ -66,6 +260,7 @@
     // Alert the copied text
     alert("Copied " + copyText.value + " to clipboard");
   }
+
 </script>
 
 <section class="teal-bg">
diff --git a/src/layouts/partials/clipboard-copy.html b/src/layouts/partials/clipboard-copy.html
index 25d1635..e6a10af 100644
--- a/src/layouts/partials/clipboard-copy.html
+++ b/src/layouts/partials/clipboard-copy.html
@@ -1,10 +1,11 @@
 <hr>
+  <div class="row button-container">
+    <input class="one-liner" type="text" value="$ sh <(curl tea.xyz) install&nbsp;{{- .Title -}}" id="myInput" readonly>
 
-<!-- The text field -->
-<input class="one-liner" type="text" value="$ sh <(curl tea.xyz) install {{- .Title -}}" id="myInput">
-
-<!-- The button used to copy the text -->
-<button class="clipboard-copy" onclick="myFunction()"><i class="icon-download-arrow"></i></button>
+    <!-- The button used to copy the text -->
+    <button class="clipboard-copy" onclick="myFunction()"><i class="icon-clipboard"></i></button>
+  </div>
+<hr>
 
 <style>
 
@@ -17,7 +18,16 @@
     font-family: "pp-neue-machina";
     color:#4d4d4d;
     font-size: 2.1vw;
-    padding-left: 8.371vw;
+    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{
@@ -29,16 +39,20 @@
     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;
   }
 
 </style>
 
 <script>
+  
     function myFunction() {
     // Get the text field
     var copyText = document.getElementById("myInput");
@@ -53,4 +67,5 @@
     // Alert the copied text
     alert("Copied " + copyText.value + " to clipboard");
   }
+
 </script>