From 3bc2c54748300bcc966be9d7924f5f8f964ece33 Mon Sep 17 00:00:00 2001 From: unwox Date: Tue, 22 Oct 2024 22:17:34 +0600 Subject: improve mobile version --- bin/serve.fnl | 5 +++-- static/style.css | 20 +++++++++++++++----- 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; + } +} -- cgit v1.2.3