add files

.gitignore

@@ -0,0 +1,64 @@
+# Node modules and dependencies
+node_modules/
+bower_components/
+vendor/
+
+# Build and compiled files
+/.vite
+dist-ssr
+build/
+*.min.css
+*.min.js
+*.map
+*.local
+
+# Cache and temporary files
+.tmp
+.cache
+*.tmp
+
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+
+# IDE and editor files
+.vscode/
+.idea/
+*.iml
+*.ipynb
+*.swp
+*.swo
+*.sublime-workspace
+*.sublime-project
+
+# OS-specific files
+.DS_Store
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+
+# Environment variables
+.env
+.env.local
+.env.*.local
+!.env.example
+
+# Vite cache
+.vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# Vite cache
+.vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+.vscode/*
+!.vscode/extensions.json

Dockerfile

@@ -0,0 +1,20 @@
+# Указываем базовый образ
+FROM node:18-alpine AS base
+
+# Устанавливаем рабочую директорию
+WORKDIR /app
+
+# Копируем package.json и package-lock.json для установки зависимостей
+COPY package*.json ./
+
+# Устанавливаем зависимости
+RUN npm install && npm install -g npm@11.7.0
+
+# Копируем исходный код проекта в контейнер
+COPY . .
+
+# Открываем порт для dev-сервера
+EXPOSE 5173
+
+# По умолчанию выполняем сборку проекта
+CMD ["npm", "run", "build"]

__docker-compose.yml

@@ -0,0 +1,33 @@
+version: '3'
+
+services:
+  # Сервис для разработки с запуском на порту 5173
+  dev:
+    build:
+      context: .
+    volumes:
+      - .:/app  # Монтируем текущую директорию в контейнер
+      - /app/node_modules  # Исключаем node_modules из монтирования
+    ports:
+      - '5173:5173'  # Пробрасываем порт для dev сервера
+    environment:
+      - NODE_ENV=development
+    command: npm run dev -- --host
+    networks:
+      - aklemp_default  # Подключаем к сети
+
+  # Сервис для сборки проекта
+  build:
+    build:
+      context: .
+    volumes:
+      - .:/app  # Монтируем директорию для получения результата сборки
+    environment:
+      - NODE_ENV=production
+    command: npm run build
+    networks:
+      - aklemp_default  # Подключаем к сети
+
+networks:
+  aklemp_default:
+    external: true  # Используем уже существующую сеть    

dist/assets/main.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){function t(){const i=new Date,c=["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"],r=["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"],v=i.getDate(),y=c[i.getMonth()],b=i.getFullYear(),f=r[i.getDay()],L=String(i.getHours()).padStart(2,"0"),h=String(i.getMinutes()).padStart(2,"0"),p=`${v} ${y} ${b}, ${f} | Московское время: ${L}:${h}`,m=document.getElementById("current-datetime");m&&(m.textContent=p)}t(),setInterval(t,6e4);const e=document.getElementById("mobile-menu-toggle"),s=document.getElementById("mobile-menu-close"),n=document.querySelector(".mobile-menu-overlay"),l=document.body;function d(){window.innerWidth>768&&(e&&(e.style.display=""),n&&(n.classList.remove("active"),n.style.display="",l.classList.remove("menu-open")),document.querySelectorAll(".mobile-main-menu .menu-item-has-children.active").forEach(c=>c.classList.remove("active")))}window.addEventListener("resize",d),e&&e.addEventListener("click",function(){n.style.display="block",setTimeout(()=>{n.classList.add("active")},10),l.classList.add("menu-open"),e.style.display="none"});function o(){n.classList.remove("active"),l.classList.remove("menu-open"),e.style.display="block",setTimeout(()=>{n.style.display="none"},300),document.querySelectorAll(".mobile-main-menu .menu-item-has-children.active").forEach(c=>c.classList.remove("active"))}s&&s.addEventListener("click",o),n&&n.addEventListener("click",function(i){i.target===this&&o()}),document.querySelectorAll(".mobile-main-menu .menu-item-has-children > a").forEach(i=>{i.addEventListener("click",function(c){c.preventDefault(),this.parentElement.classList.add("active")})}),document.querySelectorAll(".mobile-main-menu .sub-menu").forEach(i=>{i.addEventListener("click",function(c){(c.target===this||c.target.textContent&&c.target.textContent.includes("Назад"))&&this.parentElement.classList.remove("active")})})});document.addEventListener("DOMContentLoaded",function(){const t=document.getElementById("mobile-menu-toggle"),e=document.getElementById("mobile-menu-close"),s=document.querySelector(".mobile-menu-overlay"),n=document.body;function l(){window.innerWidth>768&&(t&&(t.style.display=""),s&&(s.classList.remove("active"),n.classList.remove("menu-open")),document.querySelectorAll(".mobile-main-menu .menu-item-has-children.active").forEach(a=>a.classList.remove("active")))}window.addEventListener("resize",l),t&&t.addEventListener("click",function(){s.classList.add("active"),n.classList.add("menu-open"),t.style.display="none"}),e&&e.addEventListener("click",function(){s.classList.remove("active"),n.classList.remove("menu-open"),t.style.display="block",document.querySelectorAll(".mobile-main-menu .menu-item-has-children.active").forEach(a=>a.classList.remove("active"))}),s&&s.addEventListener("click",function(u){u.target===this&&(s.classList.remove("active"),n.classList.remove("menu-open"),t.style.display="block")}),document.querySelectorAll(".mobile-main-menu .menu-item-has-children > a").forEach(u=>{u.addEventListener("click",function(a){a.preventDefault(),this.parentElement.classList.add("active")})}),document.querySelectorAll(".mobile-main-menu .sub-menu").forEach(u=>{u.addEventListener("click",function(a){(a.target===this||a.target.textContent&&a.target.textContent.includes("Назад"))&&this.parentElement.classList.remove("active")})})});document.addEventListener("click",async function(t){const e=t.target.closest(".js-copy-link");if(!e)return;t.preventDefault();const s=e.dataset.copy,n=e.getAttribute("data-title")||e.getAttribute("aria-label")||"",l=()=>{e.classList.add("is-copied"),e.setAttribute("data-title","Скопировано"),clearTimeout(e._copiedTimer),e._copiedTimer=setTimeout(()=>{e.classList.remove("is-copied"),e.setAttribute("data-title",n)},1700)};try{await navigator.clipboard.writeText(s),l()}catch{const o=document.createElement("textarea");o.value=s,o.style.position="fixed",o.style.opacity="0",document.body.appendChild(o),o.focus(),o.select(),document.execCommand("copy"),document.body.removeChild(o),l()}});document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("[aria-label]").forEach(t=>{if(t.classList.contains("has-tooltip"))return;const e=t.getAttribute("aria-label");e&&(t.classList.add("has-tooltip"),t.setAttribute("data-title",e))})});

docker-compose.yml

@@ -0,0 +1,26 @@
+version: '3'
+
+services:
+  dev:
+    #build:
+    #  context: .
+    image: vetandlife_app_image  
+    command: npm run dev
+    volumes:
+      - ./dist:/app/dist
+      - ./src:/app/src
+      - ./public:/app/public
+    ports:
+      - 5173:5173
+    container_name: sportpressa_dev 
+
+  build:
+    build:
+      context: .
+    image: sportpressa_app_image  
+    command: npm run build
+    volumes:
+      - ./dist:/app/dist
+      - ./src:/app/src
+      - ./public:/app/public
+    container_name: sportpressa_build  

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "concierges-theme",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && node ./src/removeQueryParams.js",
+    "preview": "vite preview",
+    "postbuild": "node ./src/removeQueryParams.js"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^7.0.1",
+    "postcss": "^8.4.38",
+    "vite": "^5.2.11"
+  },
+  "dependencies": {
+    "nouislider": "^15.8.1",
+    "reset-css": "^5.0.2",
+    "@fortawesome/fontawesome-free": "^6.5.2"
+  }
+}

src/js/current-datetime.js

@@ -0,0 +1,110 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Функция обновления даты и времени
+    function updateDateTime() {
+        const now = new Date();
+        const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 
+                        'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
+        const days = ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'];
+        
+        const day = now.getDate();
+        const month = months[now.getMonth()];
+        const year = now.getFullYear();
+        const dayName = days[now.getDay()];
+        const hours = String(now.getHours()).padStart(2, '0');
+        const minutes = String(now.getMinutes()).padStart(2, '0');
+        
+        const dateTimeString = `${day} ${month} ${year}, ${dayName} | Московское время: ${hours}:${minutes}`;
+        
+        const dateTimeElement = document.getElementById('current-datetime');
+        if (dateTimeElement) {
+            dateTimeElement.textContent = dateTimeString;
+        }
+    }
+    
+    // Обновляем сразу при загрузке (перезаписывая закешированную дату)
+    updateDateTime();
+    
+    // Обновляем каждую минуту
+    setInterval(updateDateTime, 60000);
+    
+    // Мобильное меню
+    const hamburger = document.getElementById('mobile-menu-toggle');
+    const closeButton = document.getElementById('mobile-menu-close');
+    const mobileMenu = document.querySelector('.mobile-menu-overlay');
+    const body = document.body;
+    
+    // Функция для сброса на десктопе
+    function resetMobileMenu() {
+        if (window.innerWidth > 768) {
+            if (hamburger) hamburger.style.display = '';
+            if (mobileMenu) {
+                mobileMenu.classList.remove('active');
+                mobileMenu.style.display = '';
+                body.classList.remove('menu-open');
+            }
+            const activeSubMenus = document.querySelectorAll('.mobile-main-menu .menu-item-has-children.active');
+            activeSubMenus.forEach(item => item.classList.remove('active'));
+        }
+    }
+    
+    window.addEventListener('resize', resetMobileMenu);
+    
+    // Открыть меню
+    if (hamburger) {
+        hamburger.addEventListener('click', function() {
+            mobileMenu.style.display = 'block';
+            setTimeout(() => {
+                mobileMenu.classList.add('active');
+            }, 10);
+            body.classList.add('menu-open');
+            hamburger.style.display = 'none';
+        });
+    }
+    
+    // Закрыть меню
+    function closeMenu() {
+        mobileMenu.classList.remove('active');
+        body.classList.remove('menu-open');
+        hamburger.style.display = 'block';
+        
+        setTimeout(() => {
+            mobileMenu.style.display = 'none';
+        }, 300);
+        
+        const activeSubMenus = document.querySelectorAll('.mobile-main-menu .menu-item-has-children.active');
+        activeSubMenus.forEach(item => item.classList.remove('active'));
+    }
+    
+    if (closeButton) {
+        closeButton.addEventListener('click', closeMenu);
+    }
+    
+    if (mobileMenu) {
+        mobileMenu.addEventListener('click', function(e) {
+            if (e.target === this) {
+                closeMenu();
+            }
+        });
+    }
+    
+    // Обработка подменю
+    const menuItems = document.querySelectorAll('.mobile-main-menu .menu-item-has-children > a');
+    
+    menuItems.forEach(item => {
+        item.addEventListener('click', function(e) {
+            e.preventDefault();
+            this.parentElement.classList.add('active');
+        });
+    });
+    
+    // Обработка кнопки "Назад"
+    const subMenus = document.querySelectorAll('.mobile-main-menu .sub-menu');
+    
+    subMenus.forEach(subMenu => {
+        subMenu.addEventListener('click', function(e) {
+            if (e.target === this || (e.target.textContent && e.target.textContent.includes('Назад'))) {
+                this.parentElement.classList.remove('active');
+            }
+        });
+    });
+});

src/js/js-copy-link.js

@@ -0,0 +1,40 @@
+document.addEventListener('click', async function(e){
+  const a = e.target.closest('.js-copy-link');
+  if(!a) return;
+
+  e.preventDefault();
+
+  const url = a.dataset.copy;
+
+  // запоминаем исходный текст tooltip
+  const originalTitle = a.getAttribute('data-title') || a.getAttribute('aria-label') || '';
+
+  // функция показа "Скопировано"
+  const showCopied = () => {
+    a.classList.add('is-copied');
+    a.setAttribute('data-title', 'Скопировано');
+
+    clearTimeout(a._copiedTimer);
+    a._copiedTimer = setTimeout(() => {
+      a.classList.remove('is-copied');
+      a.setAttribute('data-title', originalTitle);
+    }, 1700);
+  };
+
+  try {
+    await navigator.clipboard.writeText(url);
+    showCopied();
+  } catch (err) {
+    // fallback для старых браузеров
+    const ta = document.createElement('textarea');
+    ta.value = url;
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    document.execCommand('copy');
+    document.body.removeChild(ta);
+    showCopied();
+  }
+});

src/js/mobilemenu.js

@@ -0,0 +1,77 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const hamburger = document.getElementById('mobile-menu-toggle');
+    const closeButton = document.getElementById('mobile-menu-close');
+    const mobileMenu = document.querySelector('.mobile-menu-overlay');
+    const body = document.body;
+    
+    // Функция для сброса inline-стилей на десктопе
+    function resetMobileMenu() {
+        if (window.innerWidth > 768) {
+            if (hamburger) hamburger.style.display = '';
+            if (mobileMenu) {
+                mobileMenu.classList.remove('active');
+                body.classList.remove('menu-open');
+            }
+            // Закрываем все открытые подменю
+            const activeSubMenus = document.querySelectorAll('.mobile-main-menu .menu-item-has-children.active');
+            activeSubMenus.forEach(item => item.classList.remove('active'));
+        }
+    }
+    
+    // Отслеживаем изменение размера окна
+    window.addEventListener('resize', resetMobileMenu);
+    
+    // Открыть меню
+    if (hamburger) {
+        hamburger.addEventListener('click', function() {
+            mobileMenu.classList.add('active');
+            body.classList.add('menu-open');
+            hamburger.style.display = 'none';
+        });
+    }
+    
+    // Закрыть меню
+    if (closeButton) {
+        closeButton.addEventListener('click', function() {
+            mobileMenu.classList.remove('active');
+            body.classList.remove('menu-open');
+            hamburger.style.display = 'block';
+            
+            // Закрываем все открытые подменю
+            const activeSubMenus = document.querySelectorAll('.mobile-main-menu .menu-item-has-children.active');
+            activeSubMenus.forEach(item => item.classList.remove('active'));
+        });
+    }
+    
+    // Закрыть при клике вне меню
+    if (mobileMenu) {
+        mobileMenu.addEventListener('click', function(e) {
+            if (e.target === this) {
+                mobileMenu.classList.remove('active');
+                body.classList.remove('menu-open');
+                hamburger.style.display = 'block';
+            }
+        });
+    }
+    
+    // Обработка подменю
+    const menuItems = document.querySelectorAll('.mobile-main-menu .menu-item-has-children > a');
+    
+    menuItems.forEach(item => {
+        item.addEventListener('click', function(e) {
+            e.preventDefault();
+            this.parentElement.classList.add('active');
+        });
+    });
+    
+    // Обработка кнопки "Назад"
+    const subMenus = document.querySelectorAll('.mobile-main-menu .sub-menu');
+    
+    subMenus.forEach(subMenu => {
+        subMenu.addEventListener('click', function(e) {
+            if (e.target === this || (e.target.textContent && e.target.textContent.includes('Назад'))) {
+                this.parentElement.classList.remove('active');
+            }
+        });
+    });
+});

src/js/tooltip.js

@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('[aria-label]').forEach(el => {
+    // если tooltip уже задан вручную — не трогаем
+    if (el.classList.contains('has-tooltip')) return;
+
+    const label = el.getAttribute('aria-label');
+    if (!label) return;
+
+    el.classList.add('has-tooltip');
+    el.setAttribute('data-title', label);
+  });
+});

src/main.js

@@ -0,0 +1,23 @@
+import './styles/reset.css'
+import './styles/main.css'
+import './styles/components/main-menu.css'
+import './styles/newslist.css'
+import './styles/posts.css'
+
+
+import './styles/components/breadcrumbs.css'
+import './styles/components/social.css'
+import './styles/components/subscripts.css'
+import './styles/components/pagination.css'
+import './styles/components/post-tags.css'
+
+import './js/current-datetime.js'
+import './js/mobilemenu.js'
+import './js/js-copy-link.js'
+import './js/tooltip.js'
+
+
+
+
+
+

src/removeQueryParams.js

@@ -0,0 +1,30 @@
+import { readdir, lstatSync, renameSync } from 'fs';
+import { join, basename } from 'path';
+
+const assetDirectory = 'dist/assets'; // Укажите путь к папке, где нужно убрать часть имени файла начиная с знака ?
+
+async function removeQueryParams(directory) {
+  readdir(directory, async (err, files) => {
+    if (err) {
+      console.error('Error reading directory:', err);
+      return;
+    }
+
+    for (const file of files) {
+      const filePath = join(directory, file);
+      if (lstatSync(filePath).isDirectory()) {
+        await removeQueryParams(filePath);
+      } else {
+        
+        const fileName = basename(filePath);
+        const newFileName = fileName.split('?')[0]; // Убираем часть имени файла начиная с знака ?
+        
+        if (fileName !== newFileName) {
+          renameSync(filePath, join(directory, newFileName));
+        }
+      }
+    }
+  });
+}
+
+removeQueryParams(assetDirectory);

src/styles/components/breadcrumbs.css

@@ -0,0 +1,37 @@
+.breadcrumbs {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 15px;
+    padding: 12px 0;
+    border-bottom: 1px solid #eee;
+}
+
+.breadcrumbs_list {
+    display: flex;
+    gap: 8px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    flex-wrap: wrap;
+}
+
+.breadcrumbs_list li:not(:last-child)::after {
+    content: ' > ';
+    color: #999;
+    display: inline-block;
+    width: 8px;             /* Ширина разделителя */
+    margin: 0 4px;
+}
+
+.breadcrumbs a {
+    color: #007cba;
+    text-decoration: none;
+}
+
+.breadcrumbs a:hover {
+    text-decoration: underline;
+}
+
+.breadcrumbs [itemprop="name"] {
+    font-weight: 500;
+}

src/styles/components/main-menu.css

@@ -0,0 +1,254 @@
+.mobile-menu-overlay {
+    display: none;
+}    
+
+/* Гамбургер кнопка */
+.hamburger {
+    display: none;
+    cursor: pointer;
+    z-index: 10001;
+    width: 23px;
+    height: 16px;
+    background: none;
+    border: none;
+    position: relative;
+}
+
+.hamburger-icon {
+    display: block;
+    width: 23px;
+    height: 16px;
+    background-image: url('data:image/svg+xml;utf8,<svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H23V2H0V0Z" fill="%23FFFFFF"/><path d="M0 7H23V9H0V7Z" fill="%23FFFFFF"/><path d="M0 14H23V16H0V14Z" fill="%23FFFFFF"/></svg>');
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+/* Кнопка закрытия */
+.mobile-menu-close {
+    display: block;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+    padding: 10px;
+    z-index: 10001;
+    background: none;
+    border: none;
+}
+
+.close-icon {
+    display: block;
+    width: 22px;
+    height: 22px;
+    background-image: url('data:image/svg+xml;utf8,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="22.7616" height="1.4226" rx="0.711302" transform="matrix(0.707056 -0.707157 0.707056 0.707157 2.44824 18.5456)" fill="%23FFFFFF"/><rect width="22.7616" height="1.4226" rx="0.711302" transform="matrix(0.707056 0.707157 -0.707056 0.707157 3.4585 2.44843)" fill="%23FFFFFF"/></svg>');
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+/* Мобильные стили */
+@media (max-width: 768px) {
+    .hamburger {
+        display: block;
+        margin-left: auto;
+    }
+    
+    .site-header-content {
+        position: relative;
+        align-items: center;
+    }
+    
+    /* Скрываем десктопное меню */
+    .desktop-nav {
+        display: none;
+    }
+    
+     /* Меню скрыто по умолчанию */
+    .mobile-menu-overlay {
+        display: none; /* Изначально скрыто */
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100vh;
+        background-color: #3c3c3c;
+        z-index: 10000;
+        transform: translateX(100%);
+        transition: transform 0.3s ease;
+        overflow-y: auto;
+        padding: 20px;
+    }
+    
+    /* Когда активно - показываем и выдвигаем */
+    .mobile-menu-overlay.active {
+        display: block;
+        transform: translateX(0);
+    }
+    
+    /* Мобильная навигация */
+    .mobile-nav {
+        margin-top: 60px;
+    }
+    
+    .mobile-main-menu {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    
+    .mobile-main-menu > li {
+        border-bottom: 1px solid #555;
+    }
+    
+    .mobile-main-menu > li > a {
+        display: block;
+        padding: 18px 10px;
+        color: white;
+        font-size: 1.4rem;
+        font-weight: bold;
+        text-decoration: none;
+        position: relative;
+    }
+    
+    /* Стрелка для пунктов с подменю */
+    .mobile-main-menu .menu-item-has-children > a::after {
+        content: '›';
+        position: absolute;
+        right: 10px;
+        font-size: 2rem;
+        color: #006842;
+    }
+    
+    /* Подменю скрыто по умолчанию */
+    .mobile-main-menu .sub-menu {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100vh;
+        background-color: #2a2a2a;
+        z-index: 10002;
+        padding: 20px;
+        overflow-y: auto;
+        transform: translateX(100%);
+        transition: transform 0.3s ease;
+        list-style: none;
+        margin: 0;
+    }
+    
+    /* Показываем подменю при клике */
+    .mobile-main-menu .menu-item-has-children.active > .sub-menu {
+        display: block;
+        transform: translateX(0);
+    }
+    
+    /* Кнопка "Назад" в подменю */
+    .mobile-main-menu .sub-menu::before {
+        content: '‹ Назад';
+        display: block;
+        padding: 18px 10px;
+        color: white;
+        font-size: 1.2rem;
+        font-weight: bold;
+        border-bottom: 1px solid #444;
+        margin-bottom: 10px;
+        cursor: pointer;
+    }
+    
+    .mobile-main-menu .sub-menu li {
+        border-bottom: 1px solid #444;
+    }
+    
+    .mobile-main-menu .sub-menu a {
+        display: block;
+        padding: 15px 10px;
+        color: white;
+        font-size: 1.1rem;
+        text-decoration: none;
+    }
+    
+    .mobile-main-menu a:hover,
+    .mobile-main-menu a:active {
+        color: red;
+    }
+    
+    /* Блокировка скролла body при открытом меню */
+    body.menu-open {
+        overflow: hidden;
+    }
+}
+
+/* Десктопные стили */
+@media (min-width: 769px) {
+    .mobile-menu-overlay {
+        display: none !important;
+    }
+    
+    .desktop-nav {
+        display: block;
+        position: relative;
+        z-index: 100;
+    }
+    
+    .main-menu {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        list-style: none;
+        margin: 0 0 0 32px;
+        padding: 0;
+    }
+    
+    .main-menu li {
+        position: relative;
+    }
+    
+    .main-menu a {
+        font-weight: bold;
+        font-size: 1.6rem;
+        color: white;
+        text-decoration: none;
+        display: block;
+        padding: 10px 15px;
+    }
+    
+    .main-menu a:hover {
+        color: red;    
+    }
+    
+    .main-menu ul {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        background-color: #333;
+        min-width: 400px;
+        max-width: max-content;
+        padding: 15px;
+        list-style: none;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        z-index: 9999;
+        grid-template-columns: repeat(2, auto);
+        gap: 10px 20px;
+    }
+    
+    .main-menu li:hover > ul {
+        display: grid;
+    }
+    
+    .main-menu ul li {
+        width: auto;
+    }
+    
+    .main-menu ul a {
+        font-size: 1rem;
+        font-weight: normal;
+        padding: 8px 15px;
+        white-space: nowrap;
+    }
+    
+    .main-menu ul a:hover {
+        background-color: #555;
+        color: white;
+    }
+}

src/styles/components/pagination.css

@@ -0,0 +1,29 @@
+.pagination {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+}
+
+.nav-links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.page-numbers {
+    padding: 8px 12px;
+    background: #f5f5f5;
+    border-radius: 4px;
+    text-decoration: none;
+    color: #333;
+}
+
+.page-numbers.current {
+    background: #333;
+    color: #fff;
+}
+
+.page-numbers:hover {
+    background: #ddd;
+}

src/styles/components/post-tags.css

@@ -0,0 +1,39 @@
+.post-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+
+.post-tags a,
+.post-tags .tag-item {
+    display: inline-block;
+    padding: 6px 14px;
+    background: #f0f0f0;
+    color: #333;
+    text-decoration: none;
+    border-radius: 20px;
+    font-size: 14px;
+    transition: all 0.3s ease;
+}
+
+.post-tags a:hover,
+.post-tags .tag-item:hover {
+    background: #333;
+    color: #fff;
+    transform: translateY(-2px);
+}
+
+/* Альтернативный стиль с границами */
+.post-tags a {
+    background: transparent;
+    border: 2px solid #ddd;
+    color: #666;
+}
+
+.post-tags a:hover {
+    border-color: #333;
+    background: #333;
+    color: #fff;
+}

src/styles/components/social.css

@@ -0,0 +1,111 @@
+.share-panel{
+    border-top: 1px solid #F1F1F1;
+    margin-top: 8px;
+    padding-top: 12px;
+    margin-bottom: 12px;
+}
+
+.share-panel-title {
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: .8em;
+    margin-bottom: 12px;
+}
+
+.share-panel-inoi {
+    color: #909294;
+}
+
+
+.share-panel-buttons{
+    display: flex;
+    gap: 18px;
+}
+
+
+.social-icons {
+  display: flex;
+  gap: 48px;
+}
+
+
+
+.social-icon {
+  width: 36px;
+  height: 36px;
+  display: inline-block;
+  background-color: white;
+  transition: background-color 0.3s ease;
+}
+  
+
+.social-icon-footer {
+    background-color: #E2E2E2;
+}    
+
+.social-icon-vk{
+    background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='36' height='36' rx='10' fill='%23006842'/%3E%3Cpath d='M18.8932 25C12.06 25 8.1624 20.1201 8 12H11.4229C11.5353 17.96 14.0587 20.4845 16.0575 21.005V12H19.2805V17.1401C21.2542 16.9189 23.3279 14.5766 24.0275 12H27.2505C26.9869 13.3363 26.4614 14.6015 25.7069 15.7166C24.9524 16.8317 23.9852 17.7726 22.8657 18.4805C24.1153 19.1273 25.2191 20.0428 26.1041 21.1666C26.9891 22.2904 27.6353 23.597 28 25H24.4522C24.1248 23.7814 23.4594 22.6905 22.5394 21.8641C21.6194 21.0376 20.4858 20.5125 19.2805 20.3544V25H18.8932Z' fill='white'/%3E%3C/svg%3E");
+}
+
+.social-icon-tg {
+  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='36' height='36' rx='10' fill='%23006842'/%3E%3Cpath d='M26 11.5314L23.3109 25.3755C23.3109 25.3755 22.9347 26.3354 21.9011 25.8751L15.6967 21.017L15.668 21.0027C16.506 20.2342 23.0048 14.2671 23.2888 13.9966C23.7285 13.5777 23.4555 13.3283 22.945 13.6447L13.3456 19.8703L9.6421 18.5977C9.6421 18.5977 9.05928 18.386 9.00321 17.9257C8.94641 17.4646 9.66128 17.2152 9.66128 17.2152L24.7591 11.1667C24.7591 11.1667 26 10.6099 26 11.5314Z' fill='white'/%3E%3C/svg%3E");
+}
+
+.social-icon-dzen {
+  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='36' height='36' rx='10' fill='%23006842'/%3E%3Cg clip-path='url(%23clip0_68_1881)'%3E%3Cpath d='M26.7576 17.5944C26.7592 17.5944 26.7604 17.5944 26.762 17.5944C26.8736 17.5944 26.98 17.5476 27.0556 17.4656C27.1324 17.3824 27.1704 17.2708 27.1604 17.158C26.7588 12.7408 23.2616 9.2424 18.844 8.84C18.732 8.8312 18.6192 8.8676 18.536 8.9448C18.4528 9.0216 18.4064 9.13 18.4076 9.2432C18.4772 15.1136 19.2516 17.5124 26.7576 17.5944ZM26.7576 18.4056C19.2516 18.4876 18.4776 20.8864 18.408 26.7568C18.4068 26.87 18.4532 26.9784 18.5364 27.0552C18.6108 27.1236 18.708 27.1616 18.808 27.1616C18.82 27.1616 18.8324 27.1612 18.8444 27.16C23.262 26.7576 26.7592 23.2596 27.1604 18.842C27.1704 18.7292 27.1328 18.6176 27.0556 18.5344C26.9784 18.4512 26.8708 18.41 26.7576 18.4056ZM17.1292 8.842C12.7256 9.256 9.23959 12.7536 8.83999 17.1588C8.82999 17.2716 8.86759 17.3832 8.94479 17.4664C9.02039 17.5484 9.12719 17.5948 9.23839 17.5948C9.23999 17.5948 9.24159 17.5948 9.24319 17.5948C16.7244 17.5088 17.4968 15.1112 17.5672 9.2448C17.5684 9.1316 17.5216 9.0228 17.4384 8.946C17.3544 8.8692 17.242 8.8316 17.1292 8.842ZM9.24279 18.4052C9.11839 18.3912 9.02079 18.4504 8.94439 18.5336C8.86759 18.6168 8.82959 18.7284 8.83959 18.8412C9.23919 23.2464 12.7256 26.744 17.1292 27.158C17.1416 27.1592 17.1544 27.1596 17.1668 27.1596C17.2668 27.1596 17.3636 27.122 17.438 27.0536C17.5212 26.9768 17.568 26.868 17.5668 26.7548C17.4964 20.8888 16.7244 18.4912 9.24279 18.4052Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_68_1881'%3E%3Crect width='20' height='20' fill='white' transform='translate(8 8)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+
+.social-icon-rutube {
+    background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='36' height='36' rx='10' fill='%23006842'/%3E%3Cpath d='M21.0246 18.5434H14.6875V16.2053H21.0246C21.3948 16.2053 21.6522 16.2654 21.7813 16.3705C21.9105 16.4755 21.9905 16.6704 21.9905 16.955V17.7946C21.9905 18.0945 21.9105 18.2893 21.7813 18.3944C21.6522 18.4994 21.3948 18.5443 21.0246 18.5443V18.5434ZM21.4594 14.0009H12V24H14.6875V20.7469H19.6404L21.9905 24H25L22.4089 20.7316C23.3642 20.5996 23.7931 20.3267 24.1469 19.8768C24.5007 19.427 24.678 18.7077 24.678 17.7479V16.9981C24.678 16.4288 24.6135 15.979 24.5007 15.6342C24.3879 15.2894 24.1951 14.9895 23.9213 14.7201C23.6321 14.4651 23.3102 14.2855 22.9236 14.1652C22.5371 14.0602 22.0541 14 21.4594 14V14.0009Z' fill='white'/%3E%3Cpath d='M27 14C28.1046 14 29 13.1046 29 12C29 10.8954 28.1046 10 27 10C25.8954 10 25 10.8954 25 12C25 13.1046 25.8954 14 27 14Z' fill='white'/%3E%3C/svg%3E");
+}  
+
+.social-icon-ok{
+  background-image:url("data:image/svg+xml,%3Csvg%20width='36'%20height='36'%20viewBox='0%200%2036%2036'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20width='36'%20height='36'%20rx='10'%20fill='%23006842'/%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M%2019.663%2012.1451%20C%2019.3152%2011.7973%2018.8435%2011.6019%2018.3515%2011.6019%20C%2017.8596%2011.6019%2017.3879%2011.7973%2017.0401%2012.1451%20C%2016.6924%2012.4929%2016.4969%2012.9646%2016.4969%2013.4565%20C%2016.4969%2013.9482%2016.6924%2014.4201%2017.0401%2014.7679%20C%2017.3879%2015.1158%2017.8596%2015.3111%2018.3515%2015.3111%20C%2018.8435%2015.3111%2019.3152%2015.1158%2019.663%2014.7679%20C%2020.0107%2014.4201%2020.2063%2013.9482%2020.2063%2013.4565%20C%2020.2063%2012.9646%2020.0107%2012.4929%2019.663%2012.1451%20Z%20M%2022.823%2013.4565%20C%2022.823%2015.9209%2020.821%2017.9279%2018.3515%2017.9279%20C%2015.8871%2017.9279%2013.8801%2015.9209%2013.8801%2013.4565%20C%2013.8801%2010.9921%2015.8871%208.985%2018.3515%208.985%20C%2020.816%208.985%2022.823%2010.9921%2022.823%2013.4565%20Z%20M%2022.7519%2020.5142%20C%2021.9541%2021.013%2021.0781%2021.3736%2020.1605%2021.5812%20L%2020.1453%2021.5761%20L%2022.6502%2024.0812%20C%2022.772%2024.203%2022.8687%2024.3475%2022.9346%2024.5066%20C%2023.0006%2024.6657%2023.0345%2024.8362%2023.0345%2025.0085%20C%2023.0345%2025.1807%2023.0006%2025.3513%2022.9346%2025.5104%20C%2022.8687%2025.6695%2022.772%2025.8141%2022.6502%2025.9359%20C%2022.5285%2026.0576%2022.3839%2026.1544%2022.2248%2026.2203%20C%2022.0656%2026.2861%2021.8951%2026.3201%2021.7229%2026.3201%20C%2021.5507%2026.3201%2021.3801%2026.2861%2021.221%2026.2203%20C%2021.0619%2026.1544%2020.9174%2026.0576%2020.7956%2025.9359%20L%2018.3362%2023.4766%20L%2015.877%2025.941%20C%2015.6311%2026.1869%2015.2975%2026.325%2014.9497%2026.325%20C%2014.602%2026.325%2014.2684%2026.1869%2014.0224%2025.941%20C%2013.7765%2025.695%2013.6382%2025.3615%2013.6382%2025.0136%20C%2013.6382%2024.6657%2013.7765%2024.3322%2014.0224%2024.0864%20L%2016.5122%2021.5812%20C%2015.5976%2021.378%2014.7287%2021.0224%2013.9207%2020.5142%20C%2013.7754%2020.4221%2013.6494%2020.3024%2013.5503%2020.1615%20C%2013.451%2020.0209%2013.3806%2019.862%2013.3429%2019.694%20C%2013.3051%2019.526%2013.3009%2019.3523%2013.3303%2019.1826%20C%2013.3596%2019.013%2013.4221%2018.8507%2013.5143%2018.7052%20C%2013.6064%2018.5599%2013.7263%2018.434%2013.867%2018.3347%20C%2014.0076%2018.2356%2014.1665%2018.1651%2014.3345%2018.1274%20C%2014.5025%2018.0896%2014.6762%2018.0854%2014.8459%2018.1149%20C%2015.0155%2018.1442%2015.1777%2018.2068%2015.3232%2018.2989%20C%2016.2267%2018.8635%2017.2707%2019.1629%2018.3362%2019.1629%20C%2019.4019%2019.1629%2020.4459%2018.8635%2021.3495%2018.2989%20C%2021.495%2018.2068%2021.6571%2018.1442%2021.8267%2018.1149%20C%2021.9964%2018.0854%2022.1701%2018.0896%2022.3381%2018.1274%20C%2022.506%2018.1651%2022.665%2018.2356%2022.8057%2018.3347%20C%2022.9464%2018.434%2023.0663%2018.5599%2023.1584%2018.7052%20C%2023.2505%2018.8507%2023.313%2019.013%2023.3424%2019.1826%20C%2023.3717%2019.3523%2023.3675%2019.526%2023.3298%2019.694%20C%2023.292%2019.862%2023.2215%2020.0209%2023.1224%2020.1615%20C%2023.0232%2020.3024%2022.8974%2020.4221%2022.7519%2020.5142%20Z'%20fill='white'/%3E%3C/svg%3E");
+}
+
+.social-icon-email{
+  background-image:url("data:image/svg+xml,%3Csvg%20width='36'%20height='36'%20viewBox='0%200%2036%2036'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20width='36'%20height='36'%20rx='10'%20fill='%23006842'/%3E%3Cpath%20d='M11%2013.5H25C25.8284%2013.5%2026.5%2014.1716%2026.5%2015V22.5C26.5%2023.3284%2025.8284%2024%2025%2024H11C10.1716%2024%209.5%2023.3284%209.5%2022.5V15C9.5%2014.1716%2010.1716%2013.5%2011%2013.5Z'%20stroke='white'%20stroke-width='2'%20stroke-linejoin='round'/%3E%3Cpath%20d='M10.2%2015.2L18%2020.6L25.8%2015.2'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.social-icon-link{
+  background-image:url("data:image/svg+xml,%3Csvg%20width='36'%20height='36'%20viewBox='0%200%2036%2036'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20width='36'%20height='36'%20rx='10'%20fill='%23006842'/%3E%3Cg%20transform='translate(18%2018)%20rotate(-35)%20scale(0.82)%20translate(-18%20-18)'%3E%3Cpath%20d='M14.8%2020.2L13.4%2021.6C11.6%2023.4%2011.6%2026.3%2013.4%2028.1C15.2%2029.9%2018.1%2029.9%2019.9%2028.1L22.3%2025.7C24.1%2023.9%2024.1%2021%2022.3%2019.2'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.2%2015.8L22.6%2014.4C24.4%2012.6%2024.4%209.7%2022.6%207.9C20.8%206.1%2017.9%206.1%2016.1%207.9L13.7%2010.3C11.9%2012.1%2011.9%2015%2013.7%2016.8'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M15.6%2020.4L20.4%2015.6'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+
+
+.has-tooltip{ position:relative; }
+
+.has-tooltip::after{
+  content: attr(data-title);
+  position:absolute;
+  left:50%;
+  bottom:calc(100% + 16px); /* было +8px — подняли выше */
+  transform:translateX(-50%);
+  padding:4px 8px;
+  border-radius:6px;
+  background:#111;
+  color:#fff;
+  font-size:12px;
+  white-space:nowrap;
+  opacity:0;
+  pointer-events:none;
+  transition:opacity .15s ease;
+  z-index: 10; /* чтобы не пряталось за соседними элементами */
+}
+
+.has-tooltip:hover::after,
+.has-tooltip:focus-visible::after{ opacity:1; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/styles/components/subscripts.css

@@ -0,0 +1,14 @@
+.subscripts{
+    background-color: #F1F1F1;
+    margin-bottom: 12px;
+    padding: 12px;
+}
+
+.btn_sub_social {
+    display: inline-block;
+    border: 2px solid #000;
+    margin-right: 5px;
+    border-radius: 10px;
+    padding: 8px;
+    font-weight: bold;
+}    

src/styles/main.css

@@ -0,0 +1,264 @@
+body{
+    font-family: -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Helvetica,roboto,Arial;
+}
+
+header {
+    overflow: visible; /* Вместо hidden */
+}
+
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.site-header {
+    background-color: #3c3c3c;
+    width: 100%;
+    position: relative;
+}
+
+.site-header::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: calc((100% - 1200px) / 2); /* занимает пространство слева от контента */
+    z-index: 0;
+    background-color: white;
+}
+
+.site-header::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 0 18px 18px; /* размер треугольника */
+    border-color: transparent transparent white transparent;
+}
+
+
+
+
+
+/* Белая полоса с датой и временем */
+.header-top-bar {
+    background-color: white;
+    padding: 8px 0;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.header-top-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0;
+}
+
+#current-datetime {
+    font-size: 0.9rem;
+    color: #909294;
+}
+
+/* Основной header */
+.site-header-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 18px 0 4px 8px;
+    display: flex;
+    align-items: center;
+}
+
+
+.sportpressa-logo {
+    font-size: clamp(1.0625rem, 1.0625rem + 12*(100vw - 400px) / 800, 2.8125rem);
+    font-weight: bold;
+    color: white;
+    display: flex;
+}
+
+    .sportpressa-logo IMG{
+        width: 40px;
+    }
+
+.redword{
+    color: red;
+}
+
+
+
+
+.maintitle{
+    display: flex;
+   
+}
+
+.wrapper{
+    display: flex;    
+    gap: 15px;
+}
+
+
+.main{
+    margin: 22px 0;
+    flex: 3;
+}
+
+.sidebar{
+    flex: 1; 
+}   
+
+.sideparts {
+    background-color: #F1F1F1;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    padding: 18px 0 18px 22px;
+}
+
+.sideparts-title {
+    font-weight: bold;
+    margin-bottom: 12px;
+}
+
+
+.partslist a {
+    color: #0F2D5F;
+}
+
+.maintitle h1{
+    font-size: 1.6rem;
+}
+
+.h-telega {
+    color: #909294;
+    font-size: 1.6rem;
+    font-weight: bold;
+    margin-left: 4px;
+}
+
+footer{
+    background-color: #3c3c3c;
+    padding-top: 22px;
+    padding-bottom: 22px;
+    padding-right: 12px;
+    position: relative;
+}
+
+
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 18px 0;
+}
+
+.footer-line-1{
+    display: flex;
+}    
+
+
+.sportpressa-logo-footer {
+    font-size: 28px;
+    font-weight: bold;
+    color: white;
+    width: 90%;
+    display: flex;
+    gap: 1px;
+}
+
+.rating {
+    color: white;
+    font-weight: bold;
+    width: 10%;
+}
+
+
+
+#copyr {
+    margin-top: 18px;
+    font-size: small;
+    color: #999999;
+}
+
+.to-top {
+    position: absolute;
+    right: 20%;
+    top: 0;
+    transform: translate(-40%,-70%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 24px;
+    background: #22353a;
+    color: #fff;
+    text-decoration: none;
+    z-index: 10;
+    cursor: pointer;
+}
+
+.to-top:hover{
+    opacity: .9;
+}
+
+
+@media (max-width: 768px) {
+
+    body{
+        width: 100%;
+        max-width: 100%;
+    }
+
+    header{
+        width: 100%;
+        max-width: 100%;
+        overflow: hidden;
+    }
+
+    .header-top-content{
+        max-width: 100%;
+        margin-left: 4px;
+    }
+
+    .site-header-content{
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        padding: 8px;
+    }
+
+    .site-header::before {
+        content: none;
+    }
+
+    .sportpressa-logo {
+        font-size: 2rem;
+        font-weight: bold;
+        color: white;
+    }
+
+    .container {
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+    }
+
+    .sidebar {
+        display: none;
+    }
+
+    main{
+        padding: 12px;
+    }
+
+    footer{
+        padding: 18px;
+    }
+
+    .footer-content {
+        max-width: 100%;    
+    }    
+}

src/styles/newslist.css

@@ -0,0 +1,100 @@
+.news-block {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.news-item {
+    flex: 1 1 calc(33.333% - 1rem);
+    min-width: 250px;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Стандартный формат - заполняет всю ширину с обрезкой */
+.post-thumbnail {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    position: relative;
+}
+
+.post-thumbnail a {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.post-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+/* Портретный формат для всех остальных рубрик (витрина книг) */
+body.image-portrait .post-thumbnail {
+    height: 300px;
+    background: #f5f5f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+body.image-portrait .post-thumbnail a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+}
+
+body.image-portrait .post-thumbnail img {
+    object-fit: contain;
+}
+
+.news-item-title {
+    font-size: medium;
+    font-weight: bold;
+}
+
+.news-item-info {
+    margin-top: 8px;
+    font-size: medium;
+}
+
+.news-item-info-part a {
+    color: #909294;
+}
+
+/* Планшет - 2 карточки */
+@media (max-width: 1024px) {
+    .news-item {
+        flex: 1 1 calc(50% - 1rem);
+    }
+    
+    body.image-portrait .post-thumbnail {
+        height: 350px;
+    }
+}
+
+/* Мобильные - 1 карточка */
+@media (max-width: 768px) {
+    .h-telega {
+        display: none;
+    }
+
+    .news-item {
+        flex: 1 1 100%;
+        min-width: unset;
+    }
+    
+    .post-thumbnail {
+        height: 250px;
+    }
+    
+    body.image-portrait .post-thumbnail {
+        height: 400px;
+    }
+}

src/styles/posts.css

@@ -0,0 +1,51 @@
+article figcaption {
+    color: #909294;
+    margin-top: 0.5rem;
+}
+
+article figure {
+    background: #f9f9f9;
+    border-radius: 4px;
+    margin-bottom: 18px;
+}
+
+/* Стандартный формат - обрезка с заполнением */
+article IMG {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+}
+
+/* Портретный формат для постов из указанных рубрик */
+body.image-portrait article figure {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+}
+
+body.image-portrait article IMG {
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    max-height: 600px;
+    object-fit: contain;
+}
+
+.post-title {
+    padding-bottom: 18px;
+}
+
+p {
+    font-size: 1.125rem; 
+    line-height: 1.65;
+    margin: 0 0 1em;
+    max-width: 80ch;   
+}
+
+/* Мобильные устройства */
+@media (max-width: 768px) {
+    body.image-portrait article IMG {
+        max-height: 500px;
+    }
+}

src/styles/reset.css

@@ -0,0 +1,101 @@
+/* reset.css */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin and padding */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+
+/* Set default font styles */
+body {
+  font-family: Arial, sans-serif;
+  line-height: 1.5;
+}
+
+/* Remove list styles on ul, ol elements */
+ul,
+ol,
+li {
+  list-style: none;
+}
+
+
+
+/* Remove default link styles */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Remove default styles for images and videos */
+img,
+video {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Remove default styles for blockquote */
+blockquote {
+  quotes: none;
+}
+
+/* Remove default styles for tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Remove default outline styles */
+:focus {
+  outline: none;
+}
+
+/* Reset form element styles */
+input,
+textarea,
+button,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+button{
+  
+border-radius: 0;
+  -webkit-appearance: none;
+  -webkit-border-radius: none;
+}

vite.config.js

@@ -0,0 +1,53 @@
+/**
+ * View your website at your own local server.
+ * Example: if you're using WP-CLI then the common URL is: http://localhost:8080.
+ * 
+ * http://localhost:5173 is serving Vite on development. Access this URL will show empty page.
+ * 
+ */
+
+import { defineConfig } from "vite";
+import { resolve } from 'path';
+
+export default defineConfig({
+    plugins: [
+        {
+            handleHotUpdate({ file, server }) {
+                if (file.endsWith('.php')) {
+                    server.ws.send({ type: 'full-reload', path: '*' });
+                }
+            }
+        }
+    ],
+
+    build: {
+        // emit manifest so PHP can find the hashed files
+        minify: true,
+        manifest: false,
+        chunkFileNames: 'assets/[name].js',
+        cssCodeSplit: false,
+        rollupOptions: {
+            input: {
+                main: resolve(__dirname + '/src/main.js')
+            },
+            output: {
+              // Используем параметры шаблонизации для добавления хеша к имени файла
+                entryFileNames: `assets/[name].js?v=[hash]`,
+                chunkFileNames: `assets/[name].js?v=[hash]`,
+                assetFileNames: `assets/[name].[ext]?v=[hash]`,
+            }
+        }
+    },
+
+    server: {
+        // required to load scripts from custom host
+        cors: {
+            origin: "*"
+        },
+        
+        // We need a strict port to match on PHP side.
+        // You can change it. But, please update it on your .env file to match the same port
+        strictPort: true,
+        port: 5173
+    },
+});