content adjustments

3 files changed, 105 insertions, 32 deletions

diff --git a/bin/serve.fnl b/bin/serve.fnl
index 8235468..222c4b5 100644
--- a/bin/serve.fnl
+++ b/bin/serve.fnl
@@ -51,4 +51,4 @@
 (luna.router.static "GET /static/" "static/")
 
 (when luna.debug
-  (luna.evalfn (fn [code] (fennel.eval code {:env _G}))))
+  (luna.on-eval (fn [code] (fennel.eval code {:env _G}))))
diff --git a/pages/index.fnl b/pages/index.fnl
index 7d14412..d6a1d2e 100644
--- a/pages/index.fnl
+++ b/pages/index.fnl
@@ -8,23 +8,42 @@
       [:img {:src (.. "static/" chosen.name "-p.webp") :alt chosen.alt}]]]))
 
 (fn content []
-  [[:article {:class "article"}
-    [:img {:class "logo" :src "/static/logo.svg"
-           :alt "Белая жаба в мультяшном стиле с чайником на голове"}]
-    [:h1 {} [:NO-ESCAPE "Чайная «Белая жаба»"]]
-    [:nav {}
-     [:a {:href "https://t.me/whitetoadtea"} "телеграм"]
-     [:span {} "~"]
-     [:a {:href "https://vk.com/whitetoadtea"} "вконтакте"]]
-    [:p {}
-      [:NO-ESCAPE
-       (..
-        "Уютная чайная комната в Омске: Омск, ул. Пушкина, д. 133/9, этаж 2. "
-        "Вход с крыльца Магнита, дверь слева, домофон 4. "
-        "Посещение по предварительной договоренности, стоимость 500 рублей с человека.")]]
-    [:p {}
-     [:a {:href "https://t.me/whitetoadvlad" :class "button"}
-       "Записаться"]]]
+  [[:div {:class "content"}
+    [:article {:class "article"}
+     [:img {:class "logo" :src "/static/logo.svg"
+            :alt "Белая жаба в мультяшном стиле с чайником на голове"}]
+     [:h1 {} [:NO-ESCAPE "Чайная комната «Белая жаба»"]]
+     [:nav {}
+      [:a {:href "https://t.me/whitetoadtea"} "телеграм"]
+      [:span {} "~"]
+      [:a {:href "https://vk.com/whitetoadtea"} "вконтакте"]]]
+    [:article {:class "article"}
+     [:h2 {} "Адрес"]
+     [:p {}
+       [:NO-ESCAPE
+        (..
+          "г. Омск, ул. Пушкина, д. 133/9, этаж 2. "
+          "Вход с крыльца Магнита, дверь слева, домофон 4")]]]
+    [:article {:class "article"}
+     [:h2 {} "Форматы участия"]
+     [:ol {}
+      [:li {}
+       [:NO-ESCAPE
+         (..
+           "Индивидуальная чайная церемония: мастер готовит для вас чай "
+           "на ваш выбор. О времени встречи договариваемся. "
+           "Стоимость 1000 рублей с человека, до 5 человек.")]
+       [:div {:class "button-wrapper"}
+        [:a {:href "https://t.me/whitetoadvlad" :class "button"} "Записаться"]]]
+      [:li {}
+       [:NO-ESCAPE
+         (..
+           "Еженедельное мероприятие: каждую субботу в 15:00 мы собираемся "
+           "и пьем чай из нашей коллекции. Для посещения необходима запись "
+           "в комментариях под соответствующим постом в нашей группе "
+           "в телеграме. Стоимость 500 рублей с человека.")]
+       [:div {:class "button-wrapper"}
+        [:a {:href "https://t.me/whitetoadtea" :class "button"} "Подписаться"]]]]]]
    [:div {:class "gallery"}
     (pick-gallery-photo [{:name "people" :alt "Люди в чайной"}
                          {:name "gaiwan2" :alt "Близко сфотографированный чайный столик с пиалами и гайванью"}
diff --git a/static/style.css b/static/style.css
index 6b252c3..fb3fb3a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,26 +1,42 @@
 body {
   background: #ffffff;
-  margin: 3rem;
+  margin: 4rem;
   font-family: sans-serif, monospace, serif;
+  line-height: 1.4;
+}
+
+nav {
+  margin-bottom: 0.5rem;
+}
+
+ol {
+  padding-left: 0;
+  margin-top: 0;
 }
 
 .container {
   display: flex;
   flex-wrap: wrap;
-  gap: 3rem;
+  gap: 4rem;
+}
+
+.button-wrapper {
+  display: block;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
 }
 
 .button {
+  border: 0.1875rem solid;
+  box-shadow: 1px 1px 0 0, 2px 2px 0 0, 3px 3px 0 0, 4px 4px 0 0;
+  color: #000000;
   display: inline-block;
   font-size: 1rem;
-  text-decoration: none;
-  text-transform: uppercase;
   font-weight: bold;
-  color: #000000;
-  border: 0.1875rem solid;
   padding: 0.75rem 2.5rem;
-  box-shadow: 1px 1px 0 0, 2px 2px 0 0, 3px 3px 0 0, 4px 4px 0 0;
   position: relative;
+  text-decoration: none;
+  text-transform: uppercase;
   transition: box-shadow 0.2s, top 0.2s, left: 0.2s;
 }
 
@@ -31,22 +47,39 @@ body {
 }
 
 .logo {
-  width: 294px;
-  height: 259px;
+  width: 227px;
+  height: 200px;
 }
 
-h1 {
+h1,
+h2 {
   font-weight: 900;
   font-style: italic;
-  font-size: 1.75rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
+  line-height: 1.1;
 }
 
-.article {
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.375rem;
+}
+
+.content {
   max-width: 30rem;
   font-size: 1.25rem;
 }
 
+.article + .article {
+  margin-top: 2rem;
+}
+
+p {
+  margin-top: 0;
+}
+
 .form-row {
   display: block;
   margin: 0.5rem 0;
@@ -108,7 +141,28 @@ h1 {
 
 @media screen and (max-width: 50rem) {
   body {
-    margin: 2rem 1rem 1rem;
+    margin: 2rem;
+  }
+
+  ol {
+    counter: ol-counter;
+  }
+
+  ol li {
+    counter-increment: ol-counter;
+  }
+
+  ol li::before {
+    display: block;
+    content: counter(ol-counter) ".";
+  }
+
+  ol li::marker {
+    content: '';
+  }
+
+  .content {
+    max-width: 100%;
   }
 
   .container {