Revert "Additional cleanup on packages"

This reverts commit 6ccbc07628.

src/layouts/partials/package-thumbnail.html

@@ -1,13 +1,13 @@
 
-  <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 -}}">
+  <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%;">
-        <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,62 +66,219 @@ div.card.card-thumbnail{
 
 }
 
-.card-thumb-label i{
+
+
+@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: 0vw;
+    padding: 1.116vw;
+    text-align: left;
+    width: 90%;
+    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: 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;
+  }
+
 }
 
-.card-thumb-label {
+@media only screen and (min-width: 768px) and (max-width: 992px) {
-  position: absolute;
+
-  background: rgba(255,255,255,0.9);
+  .card-thumb-label i{
-  left: 0;
+    font-size: 2vw;
-  bottom: 0px;
+  }
-  text-align: left;
+
-  width: 90%;
+  .card-thumb-label {
-  height: auto;
+    position: absolute;
-  min-height: 50%;
+    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;
+  }
+
 }
 
-.card-thumb-label h3 {
+@media only screen and (min-width: 576px) and (max-width: 768px) {
-  color: black;
-  padding: 0px;
-  font-size: 1.5rem;
-}
 
-.card-thumb-label h4 {
+  .card-thumb-label i{
-  color: black;
+    font-size: 2.5vw;
-  margin: 0px;
+  }
-  padding: 0px;
-}
 
-.card-thumbnail{
+  .card-thumb-label {
-  background: none;
+    position: absolute;
-  border-radius: 0px !important;
+    background: rgba(255,255,255,0.9);
-  border: 1px solid #949494;
+    left: 0;
-}
+    bottom: 0vw;
+    padding: 1.116vw;
+    text-align: left;
+    width: 90%;
+    height: 40%;
+  }
 
-.thumbnail-body{
+  .card-thumb-label h3 {
-  display: flex;
+    color: black;
-  border-radius: 0px !important;
+    font-size: 3vw;
-  padding: 0vw;
+    line-height: 3vw;
-  justify-content: space-between;
+    margin: 0px 0px 0.5vw 0vw;
-}
+    padding: 0px;
+  }
 
-.card-img-top{
+  .card-thumb-label h4 {
-  border-radius: 0px;
+    color: black;
-}
+    font-size: 1.5vw;
+    line-height: 1.5vw;
+    margin: 0px;
+    padding: 0px;
+  }
 
-.card-text{
+  .card-thumbnail{
-  float:left;
+    background: none;
-  position: relative;
+    border-radius: 0px !important;
-}
+    border: 1px solid #949494;
+    padding: 1.674vw;
+  }
 
-.card-text-container{
+  .thumbnail-body{
-  float:left;
+    display: flex;
-  position: relative;
+    border-radius: 0px !important;
-  width:48%;
+    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;
+  }
 
-.thumbnail-body-mobile{
-  display: none;
 }
 
 @media only screen and (max-width: 576px) {