Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <p><strong>О том, что я добавил в свой первый проект по вёрстке после начала изучения JavaScript.</strong></p>

2 <p>"Завершение проекта - не повод заканчивать работу над ним", - Согласен, да и в резюме добавлять простенький лендинг как-то не хочется, так что нужно его как-то улучшить.</p>

3 <h2>Содержание</h2>

4 <ul><li><a>Адаптируем под мобильные устройства</a></li>

5 <li><a>Идея</a></li>

6 <li><a>Подготовка</a></li>

7 <li><a>Настраиваем стили</a></li>

8 <li><a>Подготавливаем</a></li>

9 <li><a>Заканчиваем проект</a></li>

10 <li><a>Итог</a></li>

11 </ul><h2>Адаптируем под мобильные устройства</h2>

12 <p>Разумеется, сперва нужно адаптировать лендинг под мобильные устройства, иначе какой смысл во всей проделанной работе, если её на телефоне нельзя нормально оценить?</p>

13 <h2>Идея</h2>

14 <p>Что же можно добавить на лендинг? Да много чего, лично я остановил свой выбор на реализации возможности смены цветового оформления при помощи JavaScript.</p>

15 <h2>Подготовка</h2>

16 <p>Сперва нам нужно продумать, как будет происходить смена темы оформления, можно добавлять новые классы с нужными нам цветами через JavaScript. Это очень громоздко и неудобно, поэтому нам не подходит.</p>

17 <p>Остаётся только использовать JavaScript для подключения нового стилевого файла. Уже лучше, этим и воспользуемся.</p>

18 <h2>Настраиваем стили</h2>

19 <p>Нам потребуется создать три SCSS-файла: один со светлой темой, с тёмной и общий файл со стилями (Можно просто скопировать весь код из старого CSS файла).</p>

20 <p>Дальше мы создаём переменные с нужными нами цветами в каждом SCSS с темой оформления.</p>

21 <p><strong>Важно!!! Используйте одинаковые названия для переменных в этих двух файлах</strong></p>

22 <p>Дальше нам потребуется заменить все цветовые значения в основном SCSS на названия переменных и подключить этот файл к оставшимся двум.</p>

23 <p>Готово!</p>

24 <p>Теперь у нас есть общий файл со стилями, цветовые значения которого берутся из файлов с цветовыми оформлениями.</p>

25 <h2>Подготавливаем</h2>

26 <p>Сперва реализуем подключение CSS файла с помощью JavaScript:</p>

27 <p><em>P.S. Переменная<strong>a</strong>нужна нам в глобальной области видимости.</em></p>

28 <p><em><strong>На случай если не сработает скрипт я оставил подключение CSS файла в HTML.</strong></em></p>

29 <h2>Заканчиваем проект</h2>

30 <p>Добавляем переключатель тем на наш лендинг и подключаем к нему обработчик событий:</p>

31 <p>При смене темы я добавляю класс к нашему переключателю, чтобы при помощи проверки условия можно было вернуть светлую тему обратно.</p>

32 <h2>Итог</h2>

33 <p>Конечно, проект требует ещё много доработок с структурной точки зрения (Банально хочется доработать стили и разбить их по секциям, раз уж тут теперь используется SASS)</p>

34 <p>Итоговый результат вы можете посмотреть на моём<a>GitHub</a>и<a>GitHub Pages</a>.</p>

35 <p>Спасибо за внимание!</p>