{{ define "main" }}

<section class="tea-cli">
  <div class="container tea-cli-container">
    <div class="row">
      <div class="col my-auto">
        <h1>TEA CLI</h1>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
</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 button used to copy the text -->
    <button class="clipboard-copy" onclick="myFunction()" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="icon-clipboard"></i></button>
  </div>
<hr>

{{- partial "clipboard-modal.html" -}}

<style>

  @media only screen and (min-width: 768px) {

    .one-liner{
      width: 85%;
      padding: 2.455vw 4.185vw;
      border-radius: 0px;
      border: none;
      background-color: #1a1a1a !important;
      font-family: "pp-neue-machina";
      color:#4d4d4d;
      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;
      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%;
      padding: 5vw 4vw;
      border-radius: 0px;
      border: none;
      background-color: #1a1a1a !important;
      font-family: "pp-neue-machina";
      color:#4d4d4d;
      font-size: 3.5vw;
      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{
      padding: 5vw 4vw;
      width: 14%;
      font-family: "pp-neue-machina";
      color:#4d4d4d;
      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:#4d4d4d;
      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 myFunction() {
    // Get the text field
    var copyText = document.getElementById("myInput");

    // Select the text field
    copyText.select();
    copyText.setSelectionRange(0, 99999); // For mobile devices

     // Copy the text inside the text field
    navigator.clipboard.writeText(copyText.value);

    /* Alert the copied text
    alert("Copied " + copyText.value + " to clipboard");*/
  }

</script>

<section class="teal-bg two-boxes">
  <div class="container tea-cli-container">
    <div class="row">
      <div class="col">
        <h3 class="black text-center">Oh @#$%... the documentation <em>is</em> the script!?"</h3>
        <p class="black text-center">–tea drinker; re: the <strong>Executable Markdown</strong><sup style="font-size:12px;">TM</sup></p>
      </div>
    </div>
  </div>
</section>

<style>
  .tea-cli-data{
    font-size: 6.138vw;
    font-family: "pp-neue-machina";
  }
</style>

<section>
  <div class="container two-boxes">
    <div class="row">
      <h3>The new foundation of the internet.</h3>
    </div>
    <div class="row">
      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
        <h4>teaxyz/cmd</h4>
        <p>Homebrew was a massive success for 5 reasons, a big one was “viral contribution” this is a new form of viral contribution. tea is a packaging primitive. We are making it super easy and viral for people to create new tools on top of tea and to satisfy that “I'm a part of this” urge that open source vitality plays up.</p>
      </div>
      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
        <h4>executable markdown</h4>
        <p>Markdown has become the ultimate documentation file format (white paper is written in it). Every project has comprehensive readmes. Every dev team documents their internal workspaces with markdown. We’re iterating the format by making it able to execute itself.</p>
      </div>
      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
        <h4>universal interpreter</h4>
        <p>Making a PM or tool that uses other packages sucks RN. This has led to self contained ecosystems where people make a packaging tool (eg. npm) and then everybody can only use tools within that ecosystem because everything else is too much friction. tea changes this.</p>
      </div>
      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
        <h4>virtual environment</h4>
        <p>devshops and open source projects need specific versions of tools and they need the whole team to be on those tools. Currently you either cross your fingers or use Docker. Docker sucks and slows down dev and hinders innovation. Docker is great for deployment but it sucks for dev. tea ensures that checking out a project uses the exact versions of things that project needs whatever platform they are developing on.</p>
      </div>
      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
        <h4>pantries</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="col-xxl-4 col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12">
        <h4>Executable Blog Posts</h4>
        <p>Every blog post and tutorial on dev starts with brew install foo in tea’s future they will instead do sh <(curl tea.xyz) [<http://blog-post.com/article-url/>](<http://blog-post.com/article-url/>) (we will also release web-buttons that activate tea if installed or install it first otherwise).
</p>
      </div>
    </div>
  </div>
</section>

{{ end }}