Карты подскажут 🃏

Одностраничный сайт с карточками Oblique Strategies. Проект показывает аккуратную адаптивную вёрстку, понятный текст и плавное переключение светлой и тёмной тем.

✨ Главные возможности

• Две темы оформления (светлая и тёмная) с сохранением выбора в локальном хранилище браузера (localStorage) и корректными неактивными состояниями кнопок.
• Адаптивная типографика через clamp(), vi, vw, поэтому текст удобно читать на телефоне, планшете и ноутбуке.
• Оптимизированные изображения (AVIF, WEBP, PNG) и тег <picture> с отложенной загрузкой для быстрого старта страницы.
• Семантическая HTML5-разметка, доступная навигация и заметные состояния фокуса для работы с клавиатуры.
• Подключённые шрифты (Raleway, STIX Two Text) и акцентные стили на CSS-переменных.
• Активные элементы интерфейса с разными маркерами (marker-light.svg, marker-dark.svg) под каждую тему.

🛠️ Использованные технологии

• Разметка: HTML5, семантические теги, <picture> для адаптивных изображений.
• Оформление: CSS3, Flexbox, CSS-переменные, clamp(), mix-blend-mode, адаптивная типографика.
• Поведение: Чистый JavaScript, localStorage, управление классами.
• Инструменты: Node.js, NPM, ESLint, Stylelint, Prettier, Serve.
• Медиа: SVG-иконки, Favicons, шрифты в форматах WOFF и WOFF2.

🚀 Установка и запуск

1. Установите Node.js версии 22 или новее.

2. Склонируйте репозиторий и перейдите в директорию проекта:

   git clone https://github.com/IrinaRyazanskaya/cards-will-tell.git
   cd cards-will-tell

3. Установите зависимости:

   npm install

4. Запустите локальный сервер и откройте проект в браузере:

   npm run serve

   По умолчанию приложение доступно на http://localhost:3000.

5. Для поддержания качества кода используйте команды:

   npm run format
   npm run lint
   npm run lint-fix

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

cards-will-tell/
├── index.html                # Семантическая разметка страницы и подключение ресурсов
├── scripts/
│   └── theme-changer.js      # Переключение тем и работа с localStorage
├── styles/
│   └── style.css             # Базовые стили, типографика, адаптивные правила
├── images/
│   ├── cards-1x.* / cards-2x.*   # Оптимизированные изображения под разные плотности
│   ├── favicon.*                 # Иконки для браузеров и устройств
│   ├── marker-dark.svg / marker-light.svg
│   └── pattern.svg
├── fonts/
│   ├── fonts.css             # Подключение гарнитур и резервных шрифтов
│   └── *.woff / *.woff2
├── package.json              # Скрипты npm, ESLint, Stylelint, Prettier
├── eslint.config.mjs         # Настройки линтера JavaScript
├── .stylelintrc.json         # Стандарты оформления CSS
└── .prettierrc.json          # Форматирование кода

💡 Что сделано

• Адаптивная вёрстка с продуманными отступами и шрифтами.
• Управление темами через CSS-переменные и сохранение выбора в браузере.
• Семантическая HTML-структура и доступные элементы управления.
• Единые правила качества кода за счёт использования ESLint, Stylelint и Prettier.
• Оптимизация графики и подключение собственных шрифтов для аккуратного внешнего вида.

📚 Решённые задачи

• Синхронизация визуальных состояний переключателей темы и атрибутов disabled.
• Поддержка контрастных акцентных элементов в обеих темах за счёт динамических CSS-переменных и фонового паттерна.
• Сбалансированная типографика заголовка и основного текста, чтобы страница не ломалась на маленьких экранах.
• Настроенный локальный цикл разработки с serve и автоматическими проверками (lint, format) для стабильной сборки.