feat: added scroll navigate on page/#61 (#71)

frontend/src/scss/ui/_animal-card.scss

@@ -41,7 +41,8 @@
         font-weight: 800;
         font-size: 28px;
         line-height: 1.4;
-
+        margin: 0 0 0.5em;
+
         @include for-mobile {
             font-size: 20px;
         }

frontend/src/scss/ui/_param-list.scss

@@ -1,36 +1,37 @@
-@import "../mixins.scss";
+@import '../mixins.scss';
 
 .param-list {
-  display: flex;
-  gap: 10px;
-  color: rgba($primary-txt-color, 50%);
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.4;
-  text-transform: capitalize;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  &__item {
     display: flex;
-    align-items: center;
-    gap: 10px;
+    gap: 5px 10px;
+    flex-wrap: wrap;
+    color: rgba($primary-txt-color, 50%);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+    text-transform: capitalize;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 
-    &::after {
-      content: "";
-      @include square(4px);
-      background-color: $accent-bg-color;
-      border-radius: 50%;
-    }
+    &__item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
 
-    &:last-child::after {
-      content: none;
+        &::after {
+            content: '';
+            @include square(4px);
+            background-color: $accent-bg-color;
+            border-radius: 50%;
+        }
+
+        &:last-child::after {
+            content: none;
+        }
     }
-  }
 
-  &__link {
-    color: rgba($primary-txt-color, 50%);
-    text-decoration: none;
-  }
+    &__link {
+        color: rgba($primary-txt-color, 50%);
+        text-decoration: none;
+    }
 }

frontend/src/static/styles.css

@@ -1091,7 +1091,8 @@ template {
 ========================= */
 .param-list {
   display: flex;
-  gap: 10px;
+  gap: 5px 10px;
+  flex-wrap: wrap;
   color: rgba(41, 42, 53, 0.5);
   font-size: 14px;
   font-weight: 500;
@@ -1188,6 +1189,7 @@ template {
   font-weight: 800;
   font-size: 28px;
   line-height: 1.4;
+  margin: 0 0 0.5em;
 }
 @media (max-width: 767.9px) {
   .animal-card__description-name {

frontend/src/templates/general/footer.njk

@@ -4,7 +4,7 @@
 {% from  "ui/section_header.njk" import section_header with context %}
 
 {% set footer_databag = { international_number: "+7 987 654 32 10", international_number_href: "+79876543210", european_number: "+3 123 456 789", european_number_href: "+3123456789", location: "Georgia, Poti", email: "[email protected]" } %}
-<footer class="page-footer">
+<footer class="page-footer" id="contacts">
   <div class="container">
     <div class="page-footer__in">
         {{ section_header(className="page-footer__title", title="Contact Us", align_prop_title='right') }}

frontend/src/templates/general/header.njk

@@ -1,9 +1,8 @@
-
 {% from "ui/icon.njk" import icon with context %}
 
 {% from "ui/buttons.njk" import button %}
 
-{% set header_databag = { shelter_name: "Territory Of Goodness", menu_items: [{ title: "Main", link: "#" }, { title: "Contacts", link: "#contacts" }, { title: "Donations", link: "#donations" }, { title: "Adopted", link: "#adopted" }] } %}
+{% set header_databag = { shelter_name: "Territory Of Goodness", menu_items: [{ title: "About", link: "#about" }, { title: "Contacts", link: "#contacts" }, { title: "Donations", link: "#" // пока поставил заглушку }, { title: "Adopted", link: "#adopted" }] } %}
 <header class="page-header">
   <div class="page-header__in">
     <p class="page-header__logo">{{ header_databag.shelter_name }}</p>
@@ -29,24 +28,49 @@
   </div>
 </header>
 <script>
-const toggle_mobile_menu = (burger, force) => {
+  const toggle_mobile_menu = (burger, force) => {
     const menu = document.querySelector('.page-menu');
 
-    burger.classList.toggle('burger--opened', force);
-    menu.classList.toggle('page-menu--opened', force);
-    document.body.classList.toggle('body-menu-opened', force);
-};
+    burger
+      .classList
+      .toggle('burger--opened', force);
+    menu
+      .classList
+      .toggle('page-menu--opened', force);
+    document
+      .body
+      .classList
+      .toggle('body-menu-opened', force);
+  };
 
-const init = () => {
+  const init = () => {
     const burger = document.querySelector('.burger');
+    const navLinkOnPage = document.querySelectorAll('.page-menu__link[href^="#"]');
 
     burger.addEventListener('click', () => toggle_mobile_menu(burger));
 
     const menu_items = document.querySelectorAll('.page-menu a');
     menu_items.forEach(item => {
-        item.addEventListener('click', () => toggle_mobile_menu(burger, false));
+      item.addEventListener('click', () => toggle_mobile_menu(burger, false));
+    });
+
+    navLinkOnPage.forEach((link) => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault()
+        const self = e.currentTarget;
+        const href = self.getAttribute('href');
+        if(href ==='#') return;
+        
+        const targetElement = document.querySelector(href);
+        if (targetElement) {
+          const offsetTop = targetElement
+            .getBoundingClientRect()
+            .top + window.scrollY;
+          window.scrollTo({top: offsetTop, behavior: 'smooth'});
+        }
+      });
     });
-};
+  };
 
-document.addEventListener('DOMContentLoaded', init);
-</script>
+  document.addEventListener('DOMContentLoaded', init);
+</script>

frontend/src/templates/pages/index/sections/about_section.njk

@@ -1,7 +1,7 @@
 {% from  "ui/video_container.njk" import video with context %}
 {% from  "ui/section_header.njk" import section_header with context %}
 
-<section class="about-section">
+<section class="about-section" id="about">
   <div class="container">
     {{ section_header(className="about-section__header", sup_title="Who Are We", title="About the shelter") }}
     <p class="about-section__text">