Адаптивная верстка для chel.en.cx

Encounter - международная сеть городских. Каждый город, участвующий в проекте получает отдельный сайт, расположенный на домене третьего уровня. Сайты всех городов используют общий код, созданный много лет назад и некорректно отображающийся на мобильных устройствах.

Город может размещать свой код на некоторых страницах сайта. Изменять существующий код невозможно.

Данный проект содержит адаптивную верстку и редизайн для сайта города Челябинска.

Проект является волонтёрским. Любая помощь приветствуется.

Замечания и ограничения

Код разрабатывался для домена chel.en.cx и содержит решения, специфические для нашего домена.

Некоторые элементы сайта теперь выглядят не так, как на оригинальном сайте. Это связано либо с нашим видением сайта, либо с необходимостью корректного отображения на различных устройствах. Иногда отображение действительно можно улучшить. Ваша помощь в этом направлении приветствуется.

При размещении анонсов и заданий проверяйте их отображение не только на ПК, но и телефонах.

Часть сторонних скриптов для анонсов и заданий не умеет адаптироваться под другие размеры экрана и будет ломать отображение на мобильных устройствах.

Скрипт game.html тестировался только на играх форматов Точки и Схватка. Информация о работе с другими форматами игр отсутствует. Использование ограничений на ввод не проверялось. Штурмовая последовательность заданий не проверялась и, скорее всего, будет отображаться не верно.

Если у вас есть вопросы, в первую очередь читайте код. Код содержит много комментариев, описывающих не только что происходит, но и зачем это делается.

Установка

1. На своём домене откройте Администраторская → Редактирование дизайна.
2. Для каждой из 4-х вкладок:
   1. Нажмите HTML код.
   2. Выделите всё.
   3. Скопируйте и сохраните содержимое где-нибудь локально. Если этого не сделать, вы потеряете все свои доработки.
   4. Удалите всё, что было в HTML код.
3. Вставьте содержимое файлов:
   1. Верхняя часть - up.html.
   2. Правая часть - right.html.
   3. Нижняя часть - bottom.html.
   4. Верхняя область на главной - main.html.
4. Нажмите на кнопку Обновить.
5. Проверьте, что ваш домен работает на персональном компьютере.
6. Откройте ваш домен на мобильном устройстве.
7. В конце страницы мобильной версии выберите Полная версия.
8. Проверьте, что ваш домен работает на мобильном устройстве.
9. Внесите изменения в Верхняя часть в разделе Соц.сети и наши друзья:
   1. Укажите ссылки на свои социальные сети.
   2. В переменную friends укажите свой код для размещения ссылок на друзей. Если у вас их нет укажите var friends = '';
10. В Верхняя часть в изображение logo-desktop пропишите ссылку на своё изображение шапки сайта для ПК. В logo-mobile - на изображение для мобильных.
11. В Нижняя часть внутри re-menu-item укажите ссылки на ваши страницы.
12. В Нижняя часть замените содержимое раздела Yandex.Metrika. Если у вас нет Яндекс.Метрики, пожалуйста, удалите этот раздел.
13. При организации игр первой строкой каждого задания вставьте содержимое game.html. Замечу, что скрипт можно разместить в сквозном бонусе, но автор не проверял работу в таком режиме.
14. Сообщите организаторам проекта Encounter, что вы хотите отключить переадресацию на отдельный мобильный домен.