From 60c0fcc7847e2bfede681179511e575339f19f22 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 14 Oct 2022 16:23:32 -0400
Subject: [PATCH 1/3] Some styling for package labels

---
 src/layouts/partials/package-grid.html      |  2 +-
 src/layouts/partials/package-thumbnail.html | 98 +++++++++++++++------
 2 files changed, 71 insertions(+), 29 deletions(-)

diff --git a/src/layouts/partials/package-grid.html b/src/layouts/partials/package-grid.html
index 6d92fb4..9525eed 100644
--- a/src/layouts/partials/package-grid.html
+++ b/src/layouts/partials/package-grid.html
@@ -41,4 +41,4 @@
       grid-template-columns: auto auto auto auto;
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layouts/partials/package-thumbnail.html b/src/layouts/partials/package-thumbnail.html
index c73b99f..4144b08 100644
--- a/src/layouts/partials/package-thumbnail.html
+++ b/src/layouts/partials/package-thumbnail.html
@@ -2,7 +2,7 @@
   <figure class="card-img-top" >
     <img src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
     <article class="card-thumb-label">
-      <img src="/Images/tea-logo-no-bg.svg" width="26" alt="tea"/>
+      <i class="icon-tea-logo-iconasset-1"></i>
       <h3>{{- .name -}}</h3>
       {{ if not (eq .maintainer "") }}
         <h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
@@ -13,8 +13,8 @@
     <div class="card-text-container">
       <p class="card-text">
         <span class="package-version-no">V&NonBreakingSpace;{{- .version -}}</span>
-        <!-- 
-        TODO: uncomment once install counts are not disappointing anymore  
+        <!--
+        TODO: uncomment once install counts are not disappointing anymore
         <br>
         <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
       </p>
@@ -29,37 +29,48 @@
 </div>
 
 <style>
+
+div.card.card-thumbnail{
+  background-color: #1a1a1a;
+}
+
 .card-img-top {
   position: relative;
 }
 
-.card-thumb-label {
-  position: absolute;
-  background: rgba(255,255,255,0.9);
-  left: 0;
-  bottom: 10px;
-  padding: 10px;
-  text-align: left;
-}
-
-.card-thumb-label h3 {
-  color: black;
-  font-size: 1.1em;
-  line-height: 1.1em;
-  margin: 0px;
-  padding: 0px;
-}
-
-.card-thumb-label h4 {
-  color: black;
-  font-size: 0.9em;
-  line-height: 0.9em;
-  margin: 0px;
-  padding: 0px;
-}
-
 @media only screen and (min-width: 576px) {
 
+  .card-thumb-label i{
+    font-size: 1.5vw;
+  }
+
+  .card-thumb-label {
+    position: absolute;
+    background: rgba(255,255,255,0.9);
+    left: 0;
+    bottom: 1.116vw;
+    padding: 1.116vw;
+    text-align: left;
+    width: 90%;
+    height: 60%;
+  }
+
+  .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;
@@ -99,6 +110,37 @@
 
 @media only screen and (max-width: 576px) {
 
+  .card-thumb-label i{
+    font-size: 5vw;
+  }
+
+  .card-thumb-label {
+    position: absolute;
+    background: rgba(255,255,255,0.9);
+    left: 0;
+    bottom: 0;
+    padding: 3vw;
+    text-align: left;
+    width: 100%;
+    height: 50%;
+  }
+
+  .card-thumb-label h3 {
+    color: black;
+    font-size: 6.8vw;
+    line-height: 6.8vw;
+    margin: 0px 0px 1vw 0vw;
+    padding: 0px;
+  }
+
+  .card-thumb-label h4 {
+    color: black;
+    font-size: 3vw;
+    line-height: 3vw;
+    margin: 0px;
+    padding: 0px;
+  }
+
   .card-thumbnail{
     background: none;
     border-radius: 0px !important;

From 7bd67494670b983aff43ad3f2559c79c8231e12a Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 14 Oct 2022 17:35:32 -0400
Subject: [PATCH 2/3] right-align detail button with right edge of pakacge
 image

---
 src/layouts/partials/package-thumbnail.html | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/layouts/partials/package-thumbnail.html b/src/layouts/partials/package-thumbnail.html
index 4144b08..d79d4b1 100644
--- a/src/layouts/partials/package-thumbnail.html
+++ b/src/layouts/partials/package-thumbnail.html
@@ -38,6 +38,12 @@ div.card.card-thumbnail{
   position: relative;
 }
 
+.detail-btn{
+  position: relative;
+  float:right!important;
+  right: 0;
+}
+
 @media only screen and (min-width: 576px) {
 
   .card-thumb-label i{
@@ -82,6 +88,7 @@ div.card.card-thumbnail{
     display: flex;
     border-radius: 0px !important;
     padding: 0vw;
+    justify-content: space-between;
   }
 
   .card-img-top{

From 440ec4bc4a6a9caa7c5fb81737cb70d5fb433d75 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 14 Oct 2022 17:58:43 -0400
Subject: [PATCH 3/3] Label styling for smaller screens

---
 src/layouts/partials/package-thumbnail.html | 144 +++++++++++++++++++-
 1 file changed, 143 insertions(+), 1 deletion(-)

diff --git a/src/layouts/partials/package-thumbnail.html b/src/layouts/partials/package-thumbnail.html
index d79d4b1..0387e8f 100644
--- a/src/layouts/partials/package-thumbnail.html
+++ b/src/layouts/partials/package-thumbnail.html
@@ -44,7 +44,7 @@ div.card.card-thumbnail{
   right: 0;
 }
 
-@media only screen and (min-width: 576px) {
+@media only screen and (min-width: 992px) {
 
   .card-thumb-label i{
     font-size: 1.5vw;
@@ -115,6 +115,148 @@ div.card.card-thumbnail{
 
 }
 
+@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: 1.116vw;
+    padding: 1.116vw;
+    text-align: left;
+    width: 90%;
+    height: 60%;
+  }
+
+  .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: 1.116vw;
+    padding: 1.116vw;
+    text-align: left;
+    width: 90%;
+    height: 60%;
+  }
+
+  .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{