Revert "Major package grid overhaul"

This reverts commit adec95a693.

src/layouts/page/packages.html

@@ -35,6 +35,7 @@
   }
 </style>
 
+<hr>
 
 <section>
   <div class="container">

src/layouts/partials/no-results-found.html

@@ -1,3 +1,4 @@
+<hr>
   <section id="noResult" class="no-results">
     <div class="container black-bg">
       <div class="row">
@@ -8,6 +9,8 @@
       </div>
     </div>
   </section>
+<hr>
+
 <style>
   .no-results {
     display: none;
@@ -15,4 +18,4 @@
   .no-results.show {
     display: block;
   }
-</style>
+</style>

src/layouts/partials/package-grid.html

@@ -4,6 +4,7 @@
     <div class="row">
       <div class="col">
         {{- partial "search-menu.html" "searchTermDesktop" -}}
+        <hr>
 
         <div class="package-grid">
 
@@ -34,9 +35,7 @@
   }
   .package-grid {
     display: grid;
-    grid-template-columns:auto;
-    grid-column-gap: 1rem;
-    grid-row-gap: 1rem;
+    grid-template-columns: auto;
   }
 
   @media only screen and (min-width: 1200px) {

src/layouts/partials/package-thumbnail.html

@@ -1,18 +1,20 @@
-<a href="/+{{- lower .full_name -}}/">
+
   <div class="card card-thumbnail" 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%; border-radius: 4px !important;">
+        <img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
         <article class="card-thumb-label">
           <i class="icon-tea-logo-iconasset-1"></i>
-          <h5 class="black">{{- .name -}}</h5>
+          <h3>{{- .name -}}</h3>
           {{ if not (eq .maintainer "") }}
-            <p class="small black">&#x2022;&nbsp;{{- .maintainer -}}</p>
+            <h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
           {{end}}
         </article>
       </figure>
+    </a>
     <div class="card-body thumbnail-body">
       <div class="card-text-container">
-        <p class="card-text small">
+        <p class="card-text">
           <span class="package-version-no">V&NonBreakingSpace;{{- .version -}}</span>
           <!--
           TODO: uncomment once install counts improve
@@ -20,11 +22,9 @@
           <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
         </p>
       </div>
-      <!--
       <a href="/+{{- lower .full_name -}}/">
         {{- partial "detail-btn.html" . -}}
       </a>
-      -->
     </div>
     <div class="card-body thumbnail-body-mobile">
       <a href="/+{{- lower .full_name -}}/">
@@ -32,14 +32,12 @@
       </a>
     </div>
   </div>
-</a>
 
 <style>
 
 div.card.card-thumbnail{
   background-color: #1a1a1a;
   transition: all .3s;
-  border-radius: 7px !important;
 }
 
 .card-img-top {
@@ -52,7 +50,28 @@ div.card.card-thumbnail{
   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);
+  }
+
+}
+
+
+
+@media only screen and (min-width: 992px) {
+
   .card-thumb-label i{
+    font-size: 1.5vw;
   }
 
   .card-thumb-label {
@@ -63,43 +82,49 @@ div.card.card-thumbnail{
     padding: 1.116vw;
     text-align: left;
     width: 90%;
-    min-height: 50%;
-    border-radius: 0px 0px 0px 3px;
+    height: 40;
   }
 
   .card-thumb-label h3 {
     color: black;
+    font-size: 1.8vw;
+    line-height: 1.8vw;
+    margin: 0px 0px 0.5vw 0vw;
     padding: 0px;
   }
 
   .card-thumb-label h4 {
     color: black;
+    font-size: .9vw;
+    line-height: 1vw;
+    margin: 0px;
+    padding: 0px;
   }
 
   .card-thumbnail{
     background: none;
+    border-radius: 0px !important;
     border: 1px solid #949494;
-    padding: 15px;
-  }
-
-  .card-thumbnail:hover{
-    box-shadow: 0px 10px 18px rgba(10, 05, 05, .5);
+    padding: 1.674vw;
   }
 
   .thumbnail-body{
     display: flex;
+    border-radius: 0px !important;
     padding: 0vw;
     justify-content: space-between;
   }
 
   .card-img-top{
-    border-radius: 7px !important;
+    border-radius: 0px;
+    margin-bottom: 1.674vw;
   }
 
   .card-text{
+    font-size: 0.781vw;
     float:left;
     position: relative;
-    font-size: 12px;
+    top:0.502vw;
   }
 
   .card-text-container{
@@ -112,6 +137,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{

src/static/css/package-grid.css

@@ -17,6 +17,14 @@
   float:right;
 }
 
+.package-grid{
+  padding-top: 0vw !important;
+  padding-bottom: 0vw !important;
+  background-image: url("/Images/x-large-grid.svg");
+  background-attachment: scroll;
+  background-repeat: repeat;
+  background-size: contain;
+}
 
 @media only screen and (max-width: 576px) {