2 files changed, 39 insertions, 6 deletions

diff --git a/pages/index.fnl b/pages/index.fnl
index 23a7801..dc229d7 100644
--- a/pages/index.fnl
+++ b/pages/index.fnl
@@ -3,19 +3,22 @@
 
 (local content
   [[:article {:class "article"}
-    [:img {:class "logo" :src "static/logo.svg"
+    [: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 рублей с человека.")]]
-    [:nav {}
-     [:a {:href "https://t.me/whitetoadtea"} "телеграм"]
-     [:span {} "~"]
-     [:a {:href "https://vk.com/whitetoadtea"} "вконтакте"]]]
+    [:p {}
+     [:a {:href "https://t.me/whitetoadvlad" :class "button"}
+       "Записаться"]]]
    [:div {:class "gallery"}
     [:div {}
      [:a {:href "static/people.jpg" :target "_blank"}
diff --git a/static/style.css b/static/style.css
index 72f35c3..c55407f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -10,6 +10,26 @@ body {
   gap: 3rem;
 }
 
+.button {
+  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;
+  transition: box-shadow 0.2s, top 0.2s, left: 0.2s;
+}
+
+.button:active {
+  box-shadow: 0px 0px 0px 0px;
+  top: 5px;
+  left: 5px;
+}
+
 .logo {
   width: 294px;
   height: 259px;
@@ -19,6 +39,7 @@ h1 {
   font-weight: 900;
   font-style: italic;
   font-size: 1.75rem;
+  margin-bottom: 0.75rem;
 }
 
 .article {
@@ -80,7 +101,7 @@ h1 {
   object-fit: cover;
 }
 
-@media screen and (max-width: 56rem) {
+@media screen and (max-width: 50rem) {
   body {
     margin: 2rem 1rem 1rem;
   }
@@ -89,6 +110,11 @@ h1 {
     gap: 2rem;
   }
 
+  .logo {
+    width: 180px;
+    height: 159px;
+  }
+
   .gallery {
     display: flex;
     flex-direction: column;
@@ -119,4 +145,8 @@ h1 {
   .gallery > div {
     background-color: #ffffff22;
   }
+
+  .button {
+    color: #ffffff;
+  }
 }