Lazy-loading images in FAQ section

Тема для сайта shikimori.one

Современная тема по мотивам Material Design (в меру возможностей CSS). Тема работает только в современных браузерах и не поддерживает UC Browser и Opera Mobile в силу технической невозможности подстроить элементы для каждого из них. Главной особенностью темы является, нет, не обложка в профиле, а удобство пользования: шрифт и активные элементы увеличены, чтобы соответствовать области нажатия на тачскрине. Также увеличено пространство между элементами, изменено положение некоторых элементов, изменена главная страница сайта: теперь это не отправная точка в любой закоулок сайта, а сборник активности пользователей – в центре внимания популярные темы и аниме, новости, опросы, рецензии и ссылки на форум.

Так как сайт часто меняется, в теме могут возникать ошибки, поэтому настоятельно рекомендуется следить за обновлениями темы.

Установка

Удобнее всего воспользоваться специальным сайтом-сборщиком, где можно настроить цвета, обложку и фон по своему вкусу. Нажмите создать тему, и после завершения сборки скопируйте готовый код в настойки внешнего вида сайта.

Важно! Чтобы узнать свой ID, скачайте свою аватарку: цифры в названии файла – это ваш ID.

Все свои настройки указывайте в конце стиля в разделе "Мои настройки":

/* МОИ НАСТРОЙКИ */

/* Фон меню */
.l-top_menu:before {
  background-color: #212121;
}

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

Установка обложки

Для того чтобы обложка отображалась в вашем профиле, вам потребуется заменить все вхождения 2727 на ваш ID. Используйте для этого поиск по странице (сочетание клавиш Ctrl+F). Чтобы узнать свой ID, скачайте свою аватарку: цифры в названии файла – это ваш ID. Ссылка на изображение указывается в самом конце файла:

/* Моя обложка в профиле */
.p-profiles .profile-head[data-user-id = "2727"] .c-brief:before {
  /* background-image: url(//i.imgur.com/bd8W6VB.jpg); /* Пример */
  background-image: url(); /* Моя обложка */
  background-position: center;
}

Превью

Альбом со скриншотами темы: https://imgur.com/a/tc7uV

Благодарности

В тестировании темы принимало участие большое количество пользователей, отзывы которых помогли довести дело до победного конца и сделать тему действительно приятной для использования. Большое вам спасибо!