From af653afcfc5887a8f699f16500348be13954f27d Mon Sep 17 00:00:00 2001 From: unwox Date: Mon, 21 Oct 2024 23:35:53 +0600 Subject: small html/styling improvements --- bin/serve.fnl | 59 +++++++++++++++++--------- static/logo-hor.svg | 55 ++++++++++++++++++++++++ static/style.css | 119 ++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 202 insertions(+), 31 deletions(-) create mode 100644 static/logo-hor.svg diff --git a/bin/serve.fnl b/bin/serve.fnl index 988df00..728279f 100644 --- a/bin/serve.fnl +++ b/bin/serve.fnl @@ -250,7 +250,8 @@ (fn item-template [product] [:div {:class "tile"} [:a {:href product.url :style "display: block;" :rel "nofollow"} - [:img {:src product.image :title product.title :alt product.title} ""]] + [:img {:class "img" :src product.image :title product.title + :alt product.title} ""]] (site-name-template product.site) [:a {:href product.url :style "text-decoration: none;" :rel "nofollow"} [:NO-ESCAPE (.. "

" (unescape product.title) "

")]] @@ -289,7 +290,36 @@ [:div {} "Всего: " [:strong {} (string.format "%d" total)]]] "")) -(fn aside-template [form paginator] +(fn menu-template [path extra-class] + [:nav {:class (.. "menu" (if (str.empty? extra-class) + "" + (.. " " extra-class)))} + [:a {:href "/red-tea" + :class (if (= path "/red-tea") "active" "")} + "Красный чай"] + [:a {:href "/sheng-puer" + :class (if (= path "/sheng-puer") "active" "")} + "Шен пуэр"] + [:a {:href "/shou-puer" + :class (if (= path "/shou-puer") "active" "")} + "Шу пуэр"] + [:a {:href "/oolong" + :class (if (= path "/oolong") "active" "")} + "Улун"] + [:a {:href "/green-tea" + :class (if (= path "/green-tea") "active" "")} + "Зеленый чай"] + [:a {:href "/white-tea" + :class (if (= path "/white-tea") "active" "")} + "Белый чай"] + [:a {:href "/yellow-tea" + :class (if (= path "/yellow-tea") "active" "")} + "Желтый чай"] + [:a {:href "/teaware" + :class (if (= path "/teaware") "active" "")} + "Посуда"]]) + +(fn aside-template [form path paginator] [:aside {:class "aside"} [:div {:class "aside-content"} (if (not (form-empty? form)) @@ -298,6 +328,7 @@ :alt "Логотип meicha.ru" :title "Логотип meicha.ru"}]] [:img {:class "logo" :src "/static/logo.svg" :alt "Логотип meicha.ru" :title "Логотип meicha.ru"}]) + (menu-template path "menu-mobile") [:form {:class "form"} [:input {:type :search :name "query" :value form.query :autofocus true :placeholder "Поисковый запрос"}] @@ -324,18 +355,7 @@ [:button {:type :submit} "Искать"]] paginator]]) -(fn menu-template [] - [:nav {:class "menu"} - [:a {:href "/red-tea"} "Красный чай"] - [:a {:href "/sheng-puer"} "Шен пуэр"] - [:a {:href "/shou-puer"} "Шу пуэр"] - [:a {:href "/oolong"} "Улун"] - [:a {:href "/green-tea"} "Зеленый чай"] - [:a {:href "/white-tea"} "Белый чай"] - [:a {:href "/yellow-tea"} "Желтый чай"] - [:a {:href "/teaware"} "Посуда"]]) - -(fn base-template [form page total items] +(fn base-template [form path page total items] (local paginator (paginator-template form page 48 total)) (local menu-path (if (and form.tags (< 0 (# form.tags))) @@ -361,14 +381,15 @@ [:body {} [:div {:class "container"} [:div {:class "content"} - (aside-template form paginator) + (aside-template form path paginator) [:section {} - (menu-template) + (menu-template path) (if (. form.tags 1) [:h1 {} (. form.tags 1)] "") (if (and menu-path (. texts (.. menu-path "-description"))) - [:NO-ESCAPE (. texts (.. menu-path "-description"))] + [:div {:class "description"} + [:NO-ESCAPE (. texts (.. menu-path "-description"))]] "") (if (< 0 (# items)) [:div {:class "list"} @@ -378,7 +399,7 @@ (string.format texts.no-results-with-suggestion spellfix-suggestion spellfix-suggestion)] - texts.no-results)) + [:NO-ESCAPE texts.no-results])) [:footer {} paginator]]]]]]) (fn root-handler [{: path : query}] @@ -400,7 +421,7 @@ (cache.set db cache-key (.. "\n" (html.render - (base-template form page total results) + (base-template form path page total results) true)))))) (match (str.split path "/") diff --git a/static/logo-hor.svg b/static/logo-hor.svg new file mode 100644 index 0000000..35082a1 --- /dev/null +++ b/static/logo-hor.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + diff --git a/static/style.css b/static/style.css index 1dc0bc2..c08277e 100644 --- a/static/style.css +++ b/static/style.css @@ -5,8 +5,12 @@ body { color: #352a2e; } +* { + box-sizing: border-box; +} + .container { - max-width: 76rem; + max-width: 82.5rem; margin: 0 auto; } @@ -31,10 +35,18 @@ body { margin-bottom: 2rem; } +.menu-mobile { + display: none; +} + .menu a { color: blue; } +.menu a.active { + text-decoration: none; +} + .list { display: flex; flex-wrap: wrap; @@ -53,8 +65,8 @@ body { margin-top: 0; } -.tile img { - width: 100%; +.tile .img { + width: 12.5rem; height: 12.5rem; object-fit: cover; object-position: center; @@ -65,24 +77,25 @@ body { margin-bottom: 0.25rem; } -.paginator-numbers { - width: 100%; -} - -.paginator-numbers a { - text-decoration: none; -} - .paginator { display: flex; gap: 0.5rem; flex-wrap: wrap; + max-width: 50rem; } .paginator a { color: blue; } +.paginator-numbers { + width: 100%; +} + +.paginator-numbers a { + text-decoration: none; +} + .paginator-active { font-weight: bold; text-decoration: none; @@ -118,7 +131,7 @@ body { .form-price input { flex: 1; - max-width: calc(50% - 1rem); + max-width: calc(50% - 0.5rem); } .form-price-per input { @@ -139,3 +152,85 @@ body { width: auto; object-fit: contain; } + +.description { + max-width: 50rem; + margin-bottom: 2rem; +} + +@media screen and (max-width: 44.9rem) { + body { + margin: 2rem; + } + + .menu { + display: none; + } + + .menu-mobile { + display: flex; + } + + .content { + flex-direction: column; + } + + .aside { + width: 100%; + } + + .logo { + display: block; + box-sizing: border-box; + background: url("/static/logo-hor.svg") no-repeat; + background-position: left center; + background-size: contain; + width: 100%; + height: 8rem; + padding-left: calc(100vw - 4rem); + } + + .tile { + width: calc(50% - 1rem); + } + + .tile .img { + height: 12.5rem; + } + + button, + select, + input { + padding: 0 0.5rem; + height: 2rem; + } + + .aside .paginator { + display: none; + } + + .paginator-numbers { + font-size: 1.25rem; + } + + .form { + margin-bottom: 0; + } + + h1 { + margin-top: 0; + } + + .form-price-per { + position: relative; + } + + .form-price-per label { + position: absolute; + top: 0; + padding: 0.5rem 2rem; + left: 0; + width: 100%; + height: 100%; + } +} -- cgit v1.2.3