Hopefully fixed show more issue

src/layouts/partials/package-grid.html

@@ -1,6 +1,15 @@
 <!-- Package Grid -->
 
 <section>
+  <!-- Package Grid Header -->
+  <hr>
+    <div class="container package-grid-header two-boxes">
+      <section class="flex flex-column flex-md-row">
+        <h3>packages</h3>
+      </section>
+      <p style="width:60%;">There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here. We use <a href="https://stability.ai/blog/stable-diffusion-public-release">Stable Diffusion</a> to generate the artwork for each package using their title and code for input. That’s the power of Open Source.</p>
+    </div>
+  <hr>
 
   {{- partial "search-menu.html" "searchTermDesktop" -}}
   <hr>
@@ -18,7 +27,7 @@
       {{- partial "no-results-found.html" }}
     </div>
   </div>
-
+  <hr>
   <div id="loadMoreSection" class="container small">
     <div id="loadMorePackagesBtn"><i class="icon-enter-arrow"></i> SHOW MORE</div>
   </div>
@@ -33,15 +42,9 @@
     display: grid;
     grid-template-columns: auto;
   }
-
-  @media only screen and (min-width: 1200px) {
   #loadMorePackagesBtn {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
     cursor: pointer;
     font-size: 2rem;
-      height:  4.185vw !important;
     font-family: "pp-neue-machina", sans-serif;
     background-color: #1a1a1a;
     color: #fff;
@@ -50,74 +53,14 @@
     text-transform: uppercase;
     transition: 0.1s linear;
   }
-  }
-
-  @media only screen and (min-width: 992px) and (max-width: 1200px) {
-    #loadMorePackagesBtn {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      cursor: pointer;
-      font-size: 2rem;
-      height:  5vw !important;
-      font-family: "pp-neue-machina", sans-serif;
-      background-color: #1a1a1a;
-      color: #fff;
-      padding-top: 0.279vw;
-      text-decoration: none;
-      text-transform: uppercase;
-      transition: 0.1s linear;
-    }
-  }
-
-  @media only screen and (min-width: 768px) and (max-width: 992px) {
-    #loadMorePackagesBtn {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      cursor: pointer;
-      font-size: 2rem;
-      height:  5.141vw !important;
-      font-family: "pp-neue-machina", sans-serif;
-      background-color: #1a1a1a;
-      color: #fff;
-      padding-top: 0.279vw;
-      text-decoration: none;
-      text-transform: uppercase;
-      transition: 0.1s linear;
-    }
-  }
-
-  @media only screen and (min-width: 576px) and (max-width: 768px) {
-    #loadMorePackagesBtn {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      cursor: pointer;
-      font-size: 2rem;
-      height:  6.771vw!important;
-      font-family: "pp-neue-machina", sans-serif;
-      background-color: #1a1a1a;
-      color: #fff;
-      padding-top: 0.279vw;
-      text-decoration: none;
-      text-transform: uppercase;
-      transition: 0.1s linear;
-    }
-  }
-
-  @media only screen and (max-width: 576px) {
-
-  }
   #loadMorePackagesBtn .icon-enter-arrow {
     display: inline-block;
     position: relaitve;
     transition: all 0.2s ease-in-out;
-    margin-right:20px;
   }
   #loadMorePackagesBtn:hover .icon-enter-arrow{
     display: inline-block;
-    transform: rotate(90deg) !important;
+    transform: rotate(-45deg) !important;
   }
   #loadMoreSection.hidden {
     display: none;

src/layouts/partials/package-thumbnail.html

@@ -1,13 +1,12 @@
-
+<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
-  <div class="card card-thumbnail p-3" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
   <a href="/+{{- lower .full_name -}}/">
     <figure class="card-img-top" >
       <img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
-        <article class="card-thumb-label p-4">
+      <article class="card-thumb-label">
         <i class="icon-tea-logo-iconasset-1"></i>
         <h3>{{- .name -}}</h3>
         {{ if not (eq .maintainer "") }}
-            <p class="small black">&#x2022;&nbsp;{{- .maintainer -}}</p>
+          <h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
         {{end}}
       </article>
     </figure>
@@ -66,28 +65,37 @@ div.card.card-thumbnail{
 
 }
 
+
+
+@media only screen and (min-width: 992px) {
+
 .card-thumb-label i{
+  font-size: 1.5vw;
 }
 
 .card-thumb-label {
   position: absolute;
   background: rgba(255,255,255,0.9);
   left: 0;
-  bottom: 0px;
+  bottom: 0vw;
+  padding: 1.116vw;
   text-align: left;
   width: 90%;
-  height: auto;
+  height: 40;
-  min-height: 50%;
 }
 
 .card-thumb-label h3 {
   color: black;
+  font-size: 1.8vw;
+  line-height: 1.8vw;
+  margin: 0px 0px 0.5vw 0vw;
   padding: 0px;
-  font-size: 1.5rem;
 }
 
 .card-thumb-label h4 {
   color: black;
+  font-size: .9vw;
+  line-height: 1vw;
   margin: 0px;
   padding: 0px;
 }
@@ -96,6 +104,7 @@ div.card.card-thumbnail{
   background: none;
   border-radius: 0px !important;
   border: 1px solid #949494;
+  padding: 1.674vw;
 }
 
 .thumbnail-body{
@@ -107,11 +116,14 @@ div.card.card-thumbnail{
 
 .card-img-top{
   border-radius: 0px;
+  margin-bottom: 1.674vw;
 }
 
 .card-text{
+  font-size: 0.781vw;
   float:left;
   position: relative;
+  top:0.502vw;
 }
 
 .card-text-container{
@@ -124,6 +136,150 @@ div.card.card-thumbnail{
   display: none;
 }
 
+}
+
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+
+.card-thumb-label i{
+  font-size: 2vw;
+}
+
+.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: 40%;
+}
+
+.card-thumb-label h3 {
+  color: black;
+  font-size: 2.8vw;
+  line-height: 2.8vw;
+  margin: 0px 0px 1vw 0vw;
+  padding: 0px;
+}
+
+.card-thumb-label h4 {
+  color: black;
+  font-size: 1.5vw;
+  line-height: 1.5vw;
+  margin: 0px;
+  padding: 0px;
+}
+
+.card-thumbnail{
+  background: none;
+  border-radius: 0px !important;
+  border: 1px solid #949494;
+  padding: 1.674vw;
+}
+
+.thumbnail-body{
+  display: flex;
+  border-radius: 0px !important;
+  padding: 0vw;
+  justify-content: space-between;
+}
+
+.card-img-top{
+  border-radius: 0px;
+  margin-bottom: 1.674vw;
+}
+
+.card-text{
+  font-size: 0.781vw;
+  float:left;
+  position: relative;
+  top:0.502vw;
+}
+
+.card-text-container{
+  float:left;
+  position: relative;
+  width:48%;
+}
+
+.thumbnail-body-mobile{
+  display: none;
+}
+
+}
+
+@media only screen and (min-width: 576px) and (max-width: 768px) {
+
+.card-thumb-label i{
+  font-size: 2.5vw;
+}
+
+.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: 40%;
+}
+
+.card-thumb-label h3 {
+  color: black;
+  font-size: 3vw;
+  line-height: 3vw;
+  margin: 0px 0px 0.5vw 0vw;
+  padding: 0px;
+}
+
+.card-thumb-label h4 {
+  color: black;
+  font-size: 1.5vw;
+  line-height: 1.5vw;
+  margin: 0px;
+  padding: 0px;
+}
+
+.card-thumbnail{
+  background: none;
+  border-radius: 0px !important;
+  border: 1px solid #949494;
+  padding: 1.674vw;
+}
+
+.thumbnail-body{
+  display: flex;
+  border-radius: 0px !important;
+  padding: 0vw;
+  justify-content: space-between;
+}
+
+.card-img-top{
+  border-radius: 0px;
+  margin-bottom: 1.674vw;
+}
+
+.card-text{
+  font-size: 0.781vw;
+  float:left;
+  position: relative;
+  top:0.502vw;
+}
+
+.card-text-container{
+  float:left;
+  position: relative;
+  width:48%;
+}
+
+.thumbnail-body-mobile{
+  display: none;
+}
+
+}
+
 @media only screen and (max-width: 576px) {
 
 .card-thumb-label i{