From b7f957289a7847254b04f35d094ea72510bca53d Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Tue, 28 Feb 2023 00:12:20 -0500
Subject: [PATCH] Cleaner package detail page

---
 src/layouts/page/package-detail.html          |  52 ++---
 .../clipboard-copy-package-detail.html        | 185 +++---------------
 2 files changed, 50 insertions(+), 187 deletions(-)

diff --git a/src/layouts/page/package-detail.html b/src/layouts/page/package-detail.html
index cf2eb49..239b6d4 100644
--- a/src/layouts/page/package-detail.html
+++ b/src/layouts/page/package-detail.html
@@ -11,20 +11,34 @@
         </div>
       </div>
       <div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
-        <h3 class="display-4 mt-5">{{- .Title -}}</h3>
+        <h3 class="display-4" style="margin-top:-10px;">{{- .Title -}}</h3>
         {{ range where $.Site.Data.packages "name" .Title }}
-          <p class="one-box-down lead">{{- .desc -}}</p>
-          {{ if not (eq .package_yml_url "#")}}
-            <a target="_blank" href="{{- .package_yml_url -}}">
-              <button class="detail-btn-large me-3 mb-3" id="purple-bg-btn"><i class="icon-enter-arrow"></i>View on GitHub</button>
-            </a>
-          {{end}}
-          {{ if not (eq .homepage "") }}
-            <a target="_blank" href="{{- .homepage -}}">
-                <button class="detail-btn-large" id="standard-detail-btn"><i class="icon-enter-arrow"></i>Visit package home</button>
-            </a>
-          {{end}}
-        {{ end }}
+          <p class="mb-5">{{- .desc -}}</p>
+          <div class="row">
+            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
+              {{ if not (eq .package_yml_url "#")}}
+                <a target="_blank" href="{{- .package_yml_url -}}">
+                <button class="hbtn hb-fill-right mb-3" style="width:100% !important;">VIEW ON GITHUB</button>
+              </a>
+            {{end}}
+            </div>
+            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
+              {{ if not (eq .homepage "") }}
+                <a target="_blank" href="{{- .homepage -}}">
+                <button class="hbtn-light hb-light-fill-right" style="width:100% !important;">VISIT PACKAGE HOME</button>
+              </a>
+              {{end}}
+            {{ end }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              {{ range where $.Site.Data.packages "name" .Title }}
+                {{- partial "clipboard-copy-package-detail.html" .  -}}
+              {{ end }}
+                  <p class="small grid-gray">Copy the tea one-liner above into your terminal to install &#160;{{- .Title -}}. tea will interpret the documentation and take care of any dependencies.</p>
+            </div>
+          </div>
       </div>
     </div>
   </div>
@@ -42,27 +56,15 @@
 
       </div>
     </div>
-    <div class="row">
-      <div class="col grid-gray mb-5">
-        Copy the tea one-liner below into your terminal to install &#160;{{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
-      </div>
-    </div>
   </div>
 </section>
 
-{{ range where $.Site.Data.packages "name" .Title }}
-  {{- partial "clipboard-copy-package-detail.html" .  -}}
-
-{{ end }}
-
 
 
 <style>
 
   .package-thumbnail{
     width: 100%;
-    height: 100%;
-    background-color: gray;
   }
 
   a:hover{
diff --git a/src/layouts/partials/clipboard-copy-package-detail.html b/src/layouts/partials/clipboard-copy-package-detail.html
index 6066c67..2f8854e 100644
--- a/src/layouts/partials/clipboard-copy-package-detail.html
+++ b/src/layouts/partials/clipboard-copy-package-detail.html
@@ -1,181 +1,42 @@
-<hr>
-  <div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;">
-    <input class="one-liner" type="text" value="sh <(curl tea.xyz) +{{- .full_name -}}" id="shortcodeCopy" readonly>
+<div class="row mt-3 mb-3" onclick="myFunction()">
+    <div class="col">
+      <div class="input-container p-1" style="display:flex; justify-content:space-between;">
+        <input class="one-liner ms-3" type="text" value="sh <(curl tea.xyz) +{{- .full_name -}}" id="shortcodeCopy" readonly>
 
-    <!-- The button used to copy the text -->
+        <!-- The button used to copy the text -->
 
-    <button type="button" class="clipboard-copy" id="liveToastBtn" onclick="changeCopied()">copy</button>
+        <button type="button" class="clipboard-copy hbtn hb-fill-right" id="liveToastBtn" onclick="changeCopied()">copy</button>
+      </div>
+    </div>
   </div>
-<hr>
 
 <style>
-
-  .button-container{
-    background-color: #1a1a1a;
-  }
-
-  @media only screen and (min-width: 992px) {
-
     .one-liner{
-      width: 80%;
-      padding: 2.455vw 4.185vw;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 2vw;
-      border-left: 2px solid #949494;
-    }
-
-    .one-liner:focus{
+      width:75%;
+      height:100%;
+      background-color:#1a1a1a;
       border:none;
-      outline: none;
-      border-left: 2px solid #949494;
+      color: #fff;
     }
-
-    .clipboard-copy{
-      height: 8.371vw;
-      width: 18%;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 2.1vw;
-      float:right !important;
-      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) {
-
-    .button-container{
-      padding:0px 6.1vw !important;
-    }
-
-    .one-liner{
-      width: 80%;
-      padding: 2.455vw 5.040vw !important;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 2vw;
-      border-left: 2px solid #949494;
-    }
-
     .one-liner:focus{
-      border:none;
-      outline: none;
-      border-left: 2px solid #949494;
+      box-shadow:none!important;
+      outline:none;
+      border:none !important;
     }
-
     .clipboard-copy{
-      height: 8.371vw;
-      width: 18%;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 2.1vw;
-      float:right !important;
-      background-color: #1a1a1a !important;
-      border: none;
-      border-right: 2px solid #949494;
-      transition: 0.2s linear;
+      width:25%;
+      height:100%;
     }
+    .input-container{
+      width:100%;
+      border: 2px solid gray;
+      border-radius: 7px;
+      height:60px;
 
-    .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) {
-
-    .button-container{
-      padding: 0vw 8vw !important;
-    }
-
-    .one-liner{
-      width: 77%;
-      padding: 5vw 4vw;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 3.5vw;
-      border-left: 2px solid #949494;
-    }
-
-    .one-liner:focus{
-      border:none;
-      outline: none;
-      border-left: 2px solid #949494;
-    }
-
-    .clipboard-copy{
-      padding: 5vw 4vw;
-      width: 20%;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      font-size: 3.5vw;
-      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: 100%;
-      padding: 7.5vw 7.5vw !important;
-      border-radius: 0px;
-      border: none;
-      background-color: #1a1a1a !important;
-      font-family: "pp-neue-machina";
-      color:#ffffff;
-      text-align: center !important;
-      font-size: 4vw;
-      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{
-      display: none;
-    }
-
-  }
-
 </style>
 
+
 <script>
 
   function changeCopied() {