packages.html

{{ define "main" }}

<!-- Package Grid -->

<!-- Desktop/Tablet Package Display -->

  <span class="grid-package-display black-bg">
    {{- partial "package-grid.html" . -}}
  </span>

<hr>

<section>
  <div class="container">
    <div class="row two-boxes">
      <div class="col packing-illustration me-4">

      </div>
      <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">
        <h2 class="display-5 text-left">Wanna help us with the top 300 packages?</h2>
        <p class="lead text-left">In order to ensure that the sun never sets on our packaging empire, we at tea are looking for help from the communi'tea to package up the top 300 packages.</p>
        <p class="mb-5">Our developers are working hard, but it's a daunting task that we can't handle on our own. And of course, we're also grateful for packages <i>outside</i> of that top 300 roster. While at the moment, we're requesting that you assist purely for your love of open-source, once we launch our protocol, maintainers & contributors will be remunerated for their work via tea token.</p>
        <div class="row desktop-ctas">
          <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
            <a href="https://github.com/teaxyz/pantry.extra">
              <button class="hbtn hb-fill-right text-uppercase" style="width:100% !important;">Contribute to Our Pantry</button>
            </a>
          </div>
          <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>

  .packing-illustration{
    background: url('/Images/futuristic-packaging.jpg');
    background-size: cover;
    background-position: scroll;
    border-radius: 10px;
  }
  .detail-btn{
    width: 100px !important;
    height: 30px;
    padding:0px;
  }

  .package-title{
    font-size: 1.5rem;
  }

  div.card.card-thumbnail{
  background-color: #1a1a1a;
  transition: all .3s;
  }

  .card-img-top {
  position: relative;
  }

  .detail-btn{
  position: relative;
  float:right!important;
  right: 0;
  }

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

  .package-image{
    box-shadow: 0px 0px 12px #0c0c0c !important;
  }

  figure{
    transition: 0.2s ease-in-out;
  }

  figure:hover{
    transform: scale(1.02);
  }

  }

  .card-thumb-label i{

  }

  .card-thumb-label {
    position: absolute;
    background: rgba(255,255,255,0.9);
    left: 0;
    bottom: 0vw;
    padding: 1.116vw;
    text-align: left;
    width: 90%;
    height: 50%;
  }

  .card-thumb-label h3 {
    color: black;
    margin: 0px 0px 0.5vw 0vw;
    padding: 0px;
  }

  .card-thumb-label h4 {
    color: black;
    margin: 0px;
    padding: 0px;
  }

  .card-thumbnail{
    background: none;
    border-radius: 0px !important;
    border: 1px solid #949494;
  }

  .thumbnail-body{
    display: flex;
    border-radius: 0px !important;
    padding: 0vw;
    justify-content: space-between;
  }

  .card-img-top{
    border-radius: 0px;
  }

  .card-text{
    float:left;
    position: relative;
    font-size: .8rem;
    top:2px;
  }

  .card-text-container{
    float:left;
    position: relative;
    width:48%;
    display: flex;
  }

  .thumbnail-body-mobile{
    display: none;
  }

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

  .card-thumb-label i{
    font-size: 28px;
  }

  .card-thumb-label h3 {
    color: black;
    font-size: 28px;
    line-height: 36px;
  }

  .card-thumb-label h4 {
    color: black;
    font-size: 20px;
    line-height: 26px;
  }

  }

</style>

{{ end }}