Pyx’s Modern Theme является преемником моей старой темы, darkpixlz’s Modern Theme, которая была форком темы Air. Она состояла примерно из 2500 строк кода и имела множество проблем, поэтому я полностью переписал её!
Все вклады в репозиторий более чем приветствуются и будут (вероятно) рассмотрены в тот же день. Есть комментарии или идеи? Оставьте ответ здесь. Нашли ошибку? Пожалуйста, создайте issue на GitHub, так за ними проще следить.
Обратите внимание, что я тестирую все свои стили только в Firefox; если в Chromium возникают проблемы, не стесняйтесь сообщать о них. Мобильная версия проверяется каждые несколько обновлений и должна работать в целом нормально.
Мне интересно, возможно ли добавить адаптивное масштабирование? Я хотел бы иметь компонент боковой панели на правой стороне.
CSS
/* Получаем ширину аватара пользователя и устанавливаем максимальную ширину контейнера рекламы */
/* Стили контейнера рекламы */
#list-area {
display: flex; /* Расположение рекламы с использованием flexbox */
flex-direction: column; /* Отображение рекламы вертикально */
gap: 0; /* Удаление отступов между изображениями рекламы */
padding: 0; /* Удаление внутренних отступов контейнера */
margin: 0; /* Обеспечение отсутствия дополнительных внешних отступов вокруг контейнера рекламы */
max-width: 812px; /* Ограничение ширины контейнера рекламы максимум 812px (ширина аватара: 48px) */
}
/* Стили ссылки на рекламу */
.banner-ad {
display: block; /* Делаем контейнер рекламы блочным элементом */
width: 100%; /* Обеспечиваем, чтобы контейнер рекламы занимал 100% ширины */
max-width: 100%; /* Предотвращаем превышение максимальной ширины */
margin: 0; /* Удаление отступов между контейнерами рекламы */
}
/* Стили адаптивных изображений рекламы */
.ad-image {
width: 100%; /* Обеспечиваем, чтобы изображение занимало всю ширину родительского элемента */
height: auto; /* Сохранение исходного соотношения сторон изображения */
max-width: 100%; /* Предотвращаем превышение изображения максимальной ширины контейнера */
display: block; /* Исправление проблемы с пустым пространством внизу изображений */
margin: 0; /* Удаление любых дополнительных отступов вокруг изображения */
}
/* Адаптивный дизайн: Настройка отображения рекламы для больших и маленьких экранов */
/* Настройка отображения рекламы на устройствах с шириной менее 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Обеспечение отсутствия дополнительных внутренних отступов на мобильных устройствах */
}
.banner-ad {
width: 100%; /* Обеспечение того, чтобы реклама занимала всю ширину на маленьких экранах */
}
.ad-image {
width: 100%; /* Обеспечение того, чтобы изображение адаптировалось к ширине контейнера */
height: auto; /* Сохранение соотношения сторон изображения */
}
}
/* Дополнительная настройка изображений рекламы на очень маленьких устройствах (например, телефоны в портретном режиме) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Обеспечение того, чтобы изображения адаптировались к ширине экрана телефона */
max-width: 100%; /* Установка максимальной ширины 100% для предотвращения чрезмерного увеличения */
height: auto; /* Сохранение соотношения сторон изображения */
}
}
Я проверю дело с боковым компонентом завтра. Ничего не обещаю насчет рекламы, так как я не могу это протестировать, но в целом с масштабированием я должен быть в состоянии это исправить.
Извините, я болел большую часть этой недели, также у меня были другие дела. Только что довел до ума ленту постов, исправил множество ошибок и сделал редактор плавающим!
Также я заметил, что страница темы была откатана к старой версии, что вызвало множество проблем. Я не буду предпринимать попыток что-либо исправить там, так как считаю, что это будет снова добавлено, и всё будет выглядеть как задумано.
К сожалению, это немного выходит за рамки возможностей данной темы, поскольку она намеренно выполнена в стиле «унитело», поэтому я бы не стал использовать макет, где боковая панель отделена. Если вы ищете дизайн такого типа, рекомендую две замечательные темы:
Однако, если вы хотите, чтобы поддерживался баннер заголовка, пожалуйста, предоставьте мне URL вашего сайта, и я проверю возможность его поддержки.
Коротко: тема теперь вышла из стадии «предпросмотра»! Я уверен, что она будет работать на большинстве сайтов и иметь приемлемый стиль. На этом новом этапе я больше не жду сообщений об ошибках здесь, пожалуйста, создавайте задачи в GitHub в будущем.
Продолжайте присылать отзывы — любые и все будут приняты с благодарностью. Спасибо за вашу постоянную поддержку, даже если я могу отвечать медленно :3
Ещё одна хорошая новость! Я в итоге переписал тему снова, так что теперь это больше не один огромный файл common.scss. Визуально ничего не должно измениться, кроме некоторых незначительных исправлений, которые я внес. Наслаждайтесь :3
Действительно понравилась тема, но, к сожалению, есть некоторые «артефакты», которые мешают мне её использовать
На странице «Профиль» за заголовком спрятана маленькая кнопка с надписью «Перейти к контенту».
Когда я пытаюсь выбрать другую цветовую палитру (как пользователь, в своём профиле), выпадающий список появляется рядом с кнопкой «Перейти к контенту», о которой я упоминал выше (именно так я и заметил её наличие).
Я уверен, что она будет работать на большинстве сайтов и иметь приемлемый стиль. На этом новом этапе я больше не жду сообщений об ошибках здесь, пожалуйста, 
, оно уже исправлено. Всё должно работать как обычно.
