From 7615bf6c1f70e6f9f9db04c1c5a02a1bd16b6ac8 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Wed, 11 Jan 2023 11:35:22 -0500
Subject: [PATCH] Packages images clickable + scale() on hover

---
 src/layouts/partials/package-thumbnail.html | 69 ++++++++++++---------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/layouts/partials/package-thumbnail.html b/src/layouts/partials/package-thumbnail.html
index e268138..3ef1e04 100644
--- a/src/layouts/partials/package-thumbnail.html
+++ b/src/layouts/partials/package-thumbnail.html
@@ -1,34 +1,37 @@
-<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
-  <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">
-      <i class="icon-tea-logo-iconasset-1"></i>
-      <h3>{{- .name -}}</h3>
-      {{ if not (eq .maintainer "") }}
-        <h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
-      {{end}}
-    </article>
-  </figure>
-  <div class="card-body thumbnail-body">
-    <div class="card-text-container">
-      <p class="card-text">
-        <span class="package-version-no">V&NonBreakingSpace;{{- .version -}}</span>
-        <!--
-        TODO: uncomment once install counts improve
-        <br>
-        <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
-      </p>
+
+  <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">
+          <i class="icon-tea-logo-iconasset-1"></i>
+          <h3>{{- .name -}}</h3>
+          {{ if not (eq .maintainer "") }}
+            <h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
+          {{end}}
+        </article>
+      </figure>
+    </a>
+    <div class="card-body thumbnail-body">
+      <div class="card-text-container">
+        <p class="card-text">
+          <span class="package-version-no">V&NonBreakingSpace;{{- .version -}}</span>
+          <!--
+          TODO: uncomment once install counts improve
+          <br>
+          <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 -}}/">
+        <button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
+      </a>
     </div>
-    <a href="/+{{- lower .full_name -}}/">
-      {{- partial "detail-btn.html" . -}}
-    </a>
   </div>
-  <div class="card-body thumbnail-body-mobile">
-    <a href="/+{{- lower .full_name -}}/">
-      <button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
-    </a>
-  </div>
-</div>
 
 <style>
 
@@ -53,6 +56,14 @@ div.card.card-thumbnail{
     box-shadow: 0px 0px 12px #0c0c0c !important;
   }
 
+  figure{
+    transition: 0.2s ease-in-out;
+  }
+
+  figure:hover{
+    transform: scale(1.02);
+  }
+
 }