Павильон Хивадо (NiwadoBlog)

Персональный блог-витрина: обзоры, уроки и размышления обо всём интересном. Статический сайт на HTML, CSS и JavaScript без сборки.

---

О проекте

Павильон Хивадо — лендинг блога с главной страницей новостей и страницей полной статьи. Интерфейс на русском языке, адаптивная вёрстка, семантическая разметка и базовая доступность (ARIA, фокус, клавиатура).

---

Возможности

• Главная — лента карточек новостей с тегами, рейтингом, пагинацией и виджетами в сайдбаре.
• Полная новость — заголовок, мета, изображение, текст статьи с цитатами, теги, рейтинг записи.
• Блок «Будет интересно» — сетка похожих статей с заголовком, описанием и датой.
• Комментарии — древовидные комментарии с рейтингом, свёрткой веток и правилами комментирования (с сохранением состояния в localStorage).
• Выделение автора — комментарии автора блога с бейджем «Автор».
• Полезные и скрытые комментарии — подсветка комментариев с высоким рейтингом; комментарии с низким рейтингом скрыты за «замывкой» с раскрытием по клику.
• Сортировка комментариев — выпадающий список: без сортировки, по рейтингу, по дате (закрытие по клику вне области).
• Поиск — модальное окно поиска с разделами (Главное, Автор, Проекты, Контакты).
• Лайтбокс — просмотр изображений статей в полноэкранном режиме.
• Мобильное меню — выдвижная панель навигации и действий на узких экранах.
• Кнопка «Наверх» — фиксированная полоса/кнопка с плавной прокруткой.
• Адаптив — отдельные стили под разные ширины экрана (в том числе для страницы полной новости).

---

Структура проекта

NiwadoBlog/
├── index.html          # Главная страница (лента новостей)
├── fullnews.html       # Страница полной новости (статья + комментарии)
├── README.md
├── fonts/              # Шрифт Inter (woff2, локально)
├── icons/
│   └── icons.svg       # Внешний спрайт иконок (дополнительно)
├── images/
│   └── no-image.png    # Заглушка изображения
├── scripts/
│   └── main.js         # Логика: поиск, рейтинг, комментарии, лайтбокс, виджеты
└── styles/
    ├── fonts.css       # Подключение шрифтов
    ├── main.css        # Основные стили
    └── responsive.css  # Медиазапросы и адаптив

Иконки также встроены в разметку страниц (SVG <symbol>) для быстрого отображения без дополнительных запросов.

---

Технологии

Категория	Стек
Разметка	HTML5, семантика, Schema.org (NewsArticle на странице статьи)
Стили	CSS3, переменные, Grid/Flexbox, медиазапросы
Скрипты	Vanilla JavaScript (ES6+), без фреймворков
Шрифты	Inter (woff2, локально, font-display: swap)

Сборка не требуется: достаточно раздавать файлы через любой веб-сервер или открывать index.html локально.

---

Запуск

1. Клонируйте репозиторий:

   git clone https://github.com/ВАШ_ЛОГИН/NiwadoBlog.git
   cd NiwadoBlog

2. Откройте в браузере:

   • Локально: откройте index.html в браузере (часть возможностей может зависеть от протокола file:// или доступа к localStorage).
   • Через сервер (рекомендуется): например, npx serve . или разверните папку на GitHub Pages, Netlify и т.п.

3. Переход к полной новости: с главной по ссылкам на карточках — они ведут на fullnews.html.

---

Лицензия

Проект представлен «как есть». Использование и доработка — на ваше усмотрение.

---

Павильон Хивадо — мой скромный, творческий уголок.