From c416a6bca52adfc08b368867b18a763834f4106e Mon Sep 17 00:00:00 2001
From: Flummi <flummi@f0ck.space>
Date: Sun, 16 May 2021 15:40:57 +0200
Subject: [PATCH] thumbnail on hover

---
 public/s/css/f0ck.css | 13 ++++++++++++-
 views/item.html       |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css
index 8caca23..6afd38e 100644
--- a/public/s/css/f0ck.css
+++ b/public/s/css/f0ck.css
@@ -1012,4 +1012,15 @@ div.about > div img {
 div.about > div p {
   font-size: 7pt;
   margin-top: 0;
-}
\ No newline at end of file
+}
+
+a.id-link:hover:after {
+  content: "";
+  background-image: var(--hover-image);
+  border: 1px solid var(--accent);
+  height: 128px;
+  width: 128px;
+  display: inline-block;
+  position: absolute;
+  margin-left: 5px;
+}
diff --git a/views/item.html b/views/item.html
index 252786c..624a312 100644
--- a/views/item.html
+++ b/views/item.html
@@ -46,7 +46,7 @@
       </div>
     </div>
     <div class="metadata">
-      <span class="badge badge-dark"><a href="/{{=item.id}}" class="id-link">{{=item.id}}</a></span>
+      <span class="badge badge-dark"><a href="/{{=item.id}}" style="--hover-image: url('/t/{{=item.id}}.png');" class="id-link">{{=item.id}}</a></span>
       <span class="badge badge-dark">{{=user.network}} / {{=user.channel}}</span>
       <span class="badge badge-dark image-source"><a class="post_source" title="{{=item.src.long}}" href="{{=item.src.long}}" target="_blank">{{=item.src.short}}</a></span>
       <span class="badge badge-dark"><a class="dest-link" href="{{=item.dest}}" target="_blank">{{=item.mime}}</a> / {{=item.size}}</span>