diff options
| -rw-r--r-- | pages/shop/index.fnl | 14 | ||||
| -rw-r--r-- | static/style.css | 42 |
2 files changed, 44 insertions, 12 deletions
diff --git a/pages/shop/index.fnl b/pages/shop/index.fnl index 854803f..27060eb 100644 --- a/pages/shop/index.fnl +++ b/pages/shop/index.fnl @@ -112,6 +112,8 @@ [:section {:class (.. "shop-item" (if (not product.published) " shop-item-not-published" ""))} + [:div {:class "shop-item-backdrop" + :style (.. "transform: rotate(" (- (math.random 4) 2) "deg)")} ""] [:a {:href item-url} [:div {:class "shop-item-imgs"} [:img {:class "shop-item-img" @@ -130,12 +132,10 @@ :style (.. "z-index: " (+ idx 2) ";" "width: calc(100% / " (# without-videos) ");" "left: calc(100% / " (# without-videos) " * " (- idx 1) ")")}]))))]] - [:a {:href item-url} - [:h3 {:class "shop-item-title" :data-parser "title"} product.title]] - (templates.product-overview product "mb-0-25 font-size-0-875") - [:div {:class "shop-item-price"} - (templates.add-to-basket-form product basket "mb-0-5" redirect-url)] - [:div {:data-parser "description"} product.short-description]])) + [:h3 {:class "shop-item-title" :data-parser "title"} product.title] + (templates.product-overview product "mb-1-25") + [:div {:class "shop-item-price mt-auto mb-0-5"} + (templates.add-to-basket-form product basket "" redirect-url)]])) (fn content [db products page total filters basket agreed-to-cookies? authenticated?] (local redirect-url (filters-path page filters)) @@ -160,7 +160,7 @@ [:a {:style "white-space: nowrap; margin-left: 1rem;" :href (.. "/shop/order/list")} "☰ Список заказов"]]) "") - [:form {:class "d-flex-desktop gap-0-5 mb-1"} + [:form {:class "d-flex-desktop gap-0-5 mb-2"} [:input {:name "search" :type "search" :placeholder "Поиск" :value (or filters.search "")}] [:select {:name "type"} diff --git a/static/style.css b/static/style.css index 869b0bc..867b9a6 100644 --- a/static/style.css +++ b/static/style.css @@ -141,6 +141,9 @@ nav a.active { } .container { + max-width: 81rem; + width: 100%; + margin: 0 auto; display: flex; gap: 2rem; } @@ -335,6 +338,27 @@ p { .shop-item { width: 17.66rem; + transition: background-color 0.2s; + position: relative; + display: flex; + flex-direction: column; +} + +.shop-item:hover .shop-item-backdrop { + opacity: 1; +} + +.shop-item-backdrop { + position: absolute; + opacity: 0; + content: ''; + left: -1rem; + transition: opacity 0.2s; + top: -1rem; + right: -1rem; + bottom: -1rem; + background-color: #ffed7a; + z-index: -1; } .shop-item-not-published { @@ -344,7 +368,7 @@ p { .shop-item-imgs { background-color: #00000011; position: relative; - width: 17.5rem; + width: 17.66rem; margin-bottom: 1rem; aspect-ratio: 1; overflow: hidden; @@ -377,10 +401,10 @@ p { } .shop-item-title { - font-size: 1.25rem; - margin-top: 0.375rem; - margin-bottom: 0.25rem; - font-weight: 600; + font-size: 1.375rem; + margin-bottom: 0.375rem; + font-weight: 700; + position: relative; } h2[id=content] { @@ -641,6 +665,10 @@ select { margin-bottom: 1rem !important; } +.mb-1-25 { + margin-bottom: 1.25rem !important; +} + .mb-1-5 { margin-bottom: 1.5rem !important; } @@ -653,6 +681,10 @@ select { margin-top: 2rem !important; } +.mt-auto { + margin-top: auto !important; +} + .mr-0-5 { margin-right: 0.5rem !important; } |