small navigation improvements

7 files changed, 56 insertions, 6 deletions

diff --git a/etc/og:image.xcf b/etc/og:image.xcf
new file mode 100644
index 0000000..d0f5fb4
--- /dev/null
+++ b/etc/og:image.xcf
diff --git a/pages/shop/_product/index.fnl b/pages/shop/_product/index.fnl
index 30cbc33..6903144 100644
--- a/pages/shop/_product/index.fnl
+++ b/pages/shop/_product/index.fnl
@@ -57,11 +57,21 @@
    (HTML
     [:div {:class "content"}
      (if (not agreed-to-cookies?) (templates.cookies-agreement) "")
-     [:div {:class "back"} [:a {:href "/shop"} "⟵ Обратно к списку"]]
+     ;; this method of going back to the list requires JS and is bug prone but
+     ;; at the same time it's the simplest one. doing the same thing without
+     ;; JS would require storing "back URL" in query parameter (which will make
+     ;; URLs ugly and also hurt SEO) or in a cookie (which is brittle)
+     ;; TODO: also add <noscript> version of this link
+     [:div {:class "back"} [:a {:href "#"
+                                :onclick "history.length > 1
+                                           ? history.back()
+                                           : location.assign('/shop')"}
+                             "⟵ Обратно к списку"]]
 
      [:div {:class "product-page-layout"}
       [:section {}
-        [:h2 {:class "product-page-title" :id "content"} product.title]
+        [:div {:id "content"} ""]
+        [:h2 {:class "product-page-title"} product.title]
         (if authenticated?
          (HTML
            [:div {:class "mb-1" :style "margin-top: -0.5rem;"}
diff --git a/static/logo-bg.png b/static/logo-bg.png
index 4762622..62f26e6 100644
--- a/static/logo-bg.png
+++ b/static/logo-bg.png
diff --git a/static/logo-bg2.png b/static/logo-bg2.png
new file mode 100644
index 0000000..81255be
--- /dev/null
+++ b/static/logo-bg2.png
diff --git a/static/og:image.png b/static/og:image.png
new file mode 100644
index 0000000..0f39cec
--- /dev/null
+++ b/static/og:image.png
diff --git a/static/style.css b/static/style.css
index 00d4bf2..869b0bc 100644
--- a/static/style.css
+++ b/static/style.css
@@ -142,7 +142,6 @@ nav a.active {
 
 .container {
   display: flex;
-  flex-wrap: wrap;
   gap: 2rem;
 }
 
@@ -174,7 +173,7 @@ nav a.active {
   margin-bottom: -0.25rem;
 }
 
-.logo::before {
+.logo-bg::before {
   animation: infinite linear logo-rotation 120s;
   background-image: url("/static/logo-bg.png");
   background-repeat: no-repeat;
@@ -188,6 +187,21 @@ nav a.active {
   height: 215px;
 }
 
+.logo-bg2::before {
+  /* animation: linear both logo-rotation 20s; */
+  background-image: url("/static/logo-bg2.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  position: absolute;
+  content: "";
+  left: calc(50% - 108px);
+  top: -30px;
+  z-index: -1;
+  width: 215px;
+  height: 155px;
+}
+
 .logo-glasses {
   position: absolute;
   top: 10px;
@@ -374,6 +388,11 @@ h2[id=content] {
   margin-top: -1.5rem;
 }
 
+.product-page-layout #content {
+  position: absolute;
+  top: -1.5rem;
+}
+
 .product-page-layout {
   display: flex;
   gap: 0 2rem;
@@ -638,7 +657,7 @@ select {
   margin-right: 0.5rem !important;
 }
 
-@media screen and (max-width: 50rem) {
+@media screen and (max-width: 70rem) {
   body {
     margin: 2rem;
   }
@@ -647,6 +666,10 @@ select {
     max-width: 100%;
   }
 
+  .container {
+    flex-wrap: wrap;
+  }
+
   .content h2 {
     font-size: 2.5rem;
   }
diff --git a/templates.fnl b/templates.fnl
index 1ae1ebc..0e4c1bb 100644
--- a/templates.fnl
+++ b/templates.fnl
@@ -20,6 +20,23 @@
                           (.. "Уютный чайный клуб в Омске: "
                               "ул. Пушкина, д. 133/9, этаж 2. "
                               "Посещение по предварительной договоренности."))}]
+     (if title
+      (HTML [:meta {:property "og:title" :content title}])
+      "")
+     (if description
+      (HTML [:meta {:property "og:description" :content description}])
+      "")
+     [:meta {:property "og:type" :content "website"}]
+     [:meta {:property "og:image"
+             :content "https://whitetoad.ru/static/og:image.png"}]
+     [:meta {:property "twitter:image"
+             :content "https://whitetoad.ru/static/og:image.png"}]
+     [:meta {:property "vk:image"
+             :content "https://whitetoad.ru/static/og:image.png"}]
+     [:meta {:property "og:image:width" :content "1200"}]
+     [:meta {:property "og:image:height" :content "630"}]
+     [:meta {:property "twitter:card" :content "summary_large_image"}]
+     [:meta {:property "og:locale" :content "ru_RU"}]
      [:style {} [:NO-ESCAPE (read-file "static/style.css")]]
      [:link {:rel "icon" :href "/static/favicon.svg" :type "image/svg+xml"}]]
     [:body {}
@@ -33,7 +50,7 @@
 
   (HTML
    [:section {}
-    [:div {:class "logo"}
+    [:div {:class "logo logo-bg"}
       (if authenticated?
         (HTML [:img {:class "logo-glasses" :src "/static/glasses.png"
                      :alt "Солнцезащитные очки"}])