improve mobile version

2 files changed, 18 insertions, 7 deletions

diff --git a/bin/serve.fnl b/bin/serve.fnl
index d96056a..985d06f 100644
--- a/bin/serve.fnl
+++ b/bin/serve.fnl
@@ -236,7 +236,7 @@
 
 (fn item-template [product]
   [:div {:class "tile"}
-   [:a {:href product.url :style "display: block;" :rel "nofollow"}
+   [:a {:href product.url :class "img-link" :rel "nofollow"}
     [:img {:class "img" :src product.image :title product.title
            :alt product.title} ""]]
    (site-name-template product.site)
@@ -359,7 +359,8 @@
     ;; inline styles so the page loads faster
     [:style {} [:NO-ESCAPE (fs.read-file "static/style.css")]]
     [:link {:rel "icon" :href "/static/favicon.png"}]
-    [:link {:rel "preload" :href "/static/logo-hor.svg"}]
+    [:link {:rel "preload" :fetchpriority "high" :as "image"
+            :href "/static/logo-hor.svg" :type "image/svg"}]
     [:title {} (if (str.empty? form.query)
                  texts.meta-title
                  (.. form.query " | " texts.meta-title))]
diff --git a/static/style.css b/static/style.css
index c47ae13..e8f2557 100644
--- a/static/style.css
+++ b/static/style.css
@@ -73,6 +73,12 @@ body {
   object-position: center;
 }
 
+.tile .img-link {
+  display: block;
+  width: 12.5rem;
+  height: 12.5rem;
+}
+
 .tile .price {
   font-weight: 500;
   margin-bottom: 0.25rem;
@@ -150,7 +156,7 @@ body {
 
 .site-icon img {
   height: 24px;
-  width: auto;
+  width: 24px;
   object-fit: contain;
 }
 
@@ -195,10 +201,6 @@ body {
     width: calc(50% - 1rem);
   }
 
-  .tile .img {
-    height: 12.5rem;
-  }
-
   button,
   select,
   input {
@@ -239,3 +241,11 @@ body {
     height: 100%;
   }
 }
+
+@media screen and (max-width: 30rem) {
+  .tile .img-link,
+  .tile .img {
+    height: 9rem;
+    width: 9rem;
+  }
+}