ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-09-20 23:30:46 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Generative art for tea-cli hero section

Browse source
This commit is contained in:
Thomas Smith 2022-10-18 22:51:48 -04:00
parent b41e83633a
commit 57375cd447
2 changed files with 44 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/layouts/page/tea-cli.html
View file

@ -1,5 +1,8 @@
{{ define "main" }} {{ define "main" }}
<div class="teacli-gen-art-1"></div>
<div class="teacli-gen-art-2"></div>
<section class="tea-cli"> <section class="tea-cli">
<div class="container tea-cli-container two-boxes"> <div class="container tea-cli-container two-boxes">
<div class="row"> <div class="row">
@ -11,8 +14,18 @@
</div> </div>
</section> </section>
<style>
.tea-cli-container{
background-image: url("/Images/x-large-grid.svg");
background-repeat: repeat;
background-size: cover;
}
</style>
<hr> <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> <input class="one-liner" type="text" value="$ sh <(curl tea.xyz) install&nbsp;{{- .Title -}}" id="myInput" readonly>
<!-- The button used to copy the text --> <!-- The button used to copy the text -->
@ -33,26 +46,24 @@
border: none; border: none;
background-color: #1a1a1a !important; background-color: #1a1a1a !important;
font-family: "pp-neue-machina"; font-family: "pp-neue-machina";
color:#4d4d4d; color:#ffffff;
font-size: 2vw; font-size: 2vw;
border-left: 2px solid #949494; border-left: 2px solid #949494;
border-right: 2px solid #949494;
} }
.one-liner:focus{ .one-liner:focus{
border:none; border:none;
outline: none; outline: none;
border-left: 2px solid #949494; border-left: 2px solid #949494;
border-right: 2px solid #949494;
} }
.clipboard-copy{ .clipboard-copy{
height: 8.371vw; height: 8.371vw;
width: 14%; width: 14%;
font-family: "pp-neue-machina"; font-family: "pp-neue-machina";
color:#4d4d4d; color:#ffffff;
font-size: 2.1vw; font-size: 2.1vw;
float:right; float:right !important;
background-color: #1a1a1a !important; background-color: #1a1a1a !important;
border: none; border: none;
border-right: 2px solid #949494; border-right: 2px solid #949494;
@ -161,7 +172,7 @@
</script> </script>
<section class="teal-bg two-boxes"> <section class="teal-bg two-boxes">
<div class="container tea-cli-container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h3 class="black text-center">Oh @#$%... the documentation <em>is</em> the script!?"</h3> <h3 class="black text-center">Oh @#$%... the documentation <em>is</em> the script!?"</h3>

26
src/static/css/products.css
View file

@ -138,3 +138,29 @@
height: 7vw; height: 7vw;
box-shadow: 0px 0px 12px #1a1a1a; 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;
}