www/src/layouts/page/package-detail.html

{{ define "main" }}

<section class="one-box">
  <div class="container">
    <div class="row">
      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
        <div class="package-thumbnail">
          {{ range where $.Site.Data.packages "name" .Title }}
          <img class="package-image mb-5" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
          {{ end }}
        </div>
      </div>
      <div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
        <h3 class="display-4" style="margin-top:-10px;">{{- .Title -}}</h3>
        {{ range where $.Site.Data.packages "name" .Title }}
          <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>
</section>


<!-- Copy to clipboard field -->

<section>
  <div class="container">
    <div class="row">
      <div class="col bottles-container">

        {{- partial "package-bottle.html" .Title -}}

      </div>
    </div>
  </div>
</section>



<style>

  .package-thumbnail{
    width: 100%;
  }

  a:hover{
    text-decoration: none;
  }

  #purple-bg-btn{
    background-color: #8000FF;
    border: 2px solid #8000FF;
  }

  #standard-detail-btn:hover{
    background-color: #212020 !important;
    box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
  }

  table{
    color: #fff;
    width: 100%;
  }

  table, th, td {
    border: 1px solid #949494;
    font-family: "sono", sans-serif;
    padding: 20px;
  }

  .expand{
    cursor: pointer;
  }

  .tea-icon{
    display:block;
    text-align:center;
    animation: pulse 1s infinite;
  }
  @keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
  #bottle-preloader {
    width: 100%;
    height: 200px;
    background: #1a1a1a;
    border: 1px solid #949494;;
  }
  #bottle-status {
    width: 100%;
    height: 200px;
    position: relative;
    background-position: center;
  }
  #bottle-loading-text {
    font-size: 20px;
    text-align: center;
    animation: pulse 1s infinite !important;
  }

  @media screen and (max-width: 576px) {

    .bottles-container{
      padding: 0px !important;
    }

    table, th, td {
      border: 1px solid #949494;
      font-family: "sono", sans-serif;
      padding: 10px;
      font-size: 12px;
    }

    .title-col{
      padding: 4vw !important;

    }

  }


</style>
{{ end }}