From 57375cd447bd992afcf2babc173136fa1e407607 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Tue, 18 Oct 2022 22:51:48 -0400
Subject: [PATCH] Generative art for tea-cli hero section

---
 src/layouts/page/tea-cli.html | 25 ++++++++++++++++++-------
 src/static/css/products.css   | 26 ++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/layouts/page/tea-cli.html b/src/layouts/page/tea-cli.html
index 6982dc5..bbb007f 100644
--- a/src/layouts/page/tea-cli.html
+++ b/src/layouts/page/tea-cli.html
@@ -1,5 +1,8 @@
 {{ define "main" }}
 
+<div class="teacli-gen-art-1"></div>
+<div class="teacli-gen-art-2"></div>
+
 <section class="tea-cli">
   <div class="container tea-cli-container two-boxes">
     <div class="row">
@@ -11,8 +14,18 @@
   </div>
 </section>
 
+<style>
+
+  .tea-cli-container{
+    background-image: url("/Images/x-large-grid.svg");
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+</style>
+
 <hr>
-  <div class="row button-container">
+  <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) install&nbsp;{{- .Title -}}" id="myInput" readonly>
 
     <!-- The button used to copy the text -->
@@ -33,26 +46,24 @@
       border: none;
       background-color: #1a1a1a !important;
       font-family: "pp-neue-machina";
-      color:#4d4d4d;
+      color:#ffffff;
       font-size: 2vw;
       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;
+      color:#ffffff;
       font-size: 2.1vw;
-      float:right;
+      float:right !important;
       background-color: #1a1a1a !important;
       border: none;
       border-right: 2px solid #949494;
@@ -161,7 +172,7 @@
 </script>
 
 <section class="teal-bg two-boxes">
-  <div class="container tea-cli-container">
+  <div class="container">
     <div class="row">
       <div class="col">
         <h3 class="black text-center">Oh @#$%... the documentation <em>is</em> the script!?"</h3>
diff --git a/src/static/css/products.css b/src/static/css/products.css
index 9de2f73..dbe93c1 100644
--- a/src/static/css/products.css
+++ b/src/static/css/products.css
@@ -138,3 +138,29 @@
   height: 7vw;
   box-shadow: 0px 0px 12px #1a1a1a;
 }
+
+.teacli-gen-art-1{
+  background-image: url("/Images/gen-art/glass-triangles.jpg");
+  background-position: center;
+  background-repeat: repeat;
+  background-size: cover;
+  position: absolute;
+  right: 8.3vw;
+  top: 12.2vw;
+  width: 16.7vw;
+  height: 17vw;
+  z-index: 0;
+}
+
+.teacli-gen-art-2{
+  background-image: url("/Images/gen-art/pixel-mouth.jpg");
+  background-position: center;
+  background-repeat: repeat;
+  background-size: cover;
+  position: absolute;
+  right: 16.5vw;
+  top: 16.5vw;
+  width: 12vw;
+  height: 17vw;
+  z-index: 0;
+}