Современная тема Pyx является преемником моей старой темы Modern Theme от darkpixlz, которая была форком темы Air. Она состояла примерно из 2500 строк кода и имела множество проблем, поэтому я переписал её!
Все вклады в репозиторий более чем приветствуются и будут (вероятно) рассмотрены в тот же день. Есть комментарии или идеи? Напишите ответ здесь. Нашли проблемы? Создайте issue на GitHub, пожалуйста.
Обратите внимание: я тестирую все свои стили только в браузере Firefox. Если в Chromium возникнут проблемы, не стесняйтесь сообщить об этом. На данный момент я не тестирую и не проверяю мобильный вид, но поддержка планируется.
Похоже, возникла проблема из-за отсутствия установленных компонентов, что, в свою очередь, изменяет CSS изображений, в результате чего многие из них превращаются в прямоугольники.
Интересно, можно ли добавить адаптивный масштаб? Я хотел бы разместить компонент боковой панели справа.
CSS
/* Получить ширину аватара пользователя и установить максимальную ширину контейнера для рекламы */
/* Стили контейнера для рекламы */
#list-area {
display: flex; /* Размещение рекламы с помощью flexbox */
flex-direction: column; /* Отображение рекламы вертикально */
gap: 0; /* Удаление отступов между изображениями рекламы */
padding: 0; /* Удаление отступов контейнера */
margin: 0; /* Убедиться, что вокруг контейнера рекламы нет лишних отступов */
max-width: 812px; /* Ограничить ширину контейнера рекламы максимум 812 пикселями (ширина аватара: 48 пикселей) */
}
/* Стили ссылки на рекламу */
.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; /* Удалить любые дополнительные отступы вокруг изображения */
}
/* Адаптивный дизайн: корректировка отображения рекламы для больших и маленьких экранов */
/* Корректировка отображения рекламы на устройствах с шириной менее 768 пикселей */
@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
Действительно понравилась тема, но, к сожалению, есть некоторые «артефакты», которые мешают мне её использовать
На странице «Профиль» за заголовком спрятана маленькая кнопка с надписью «Перейти к контенту».
Когда я пытаюсь выбрать другую цветовую палитру (как пользователь, в своём профиле), выпадающий список появляется рядом с кнопкой «Перейти к контенту», о которой я упоминал выше (именно так я и заметил её наличие).
Я уверен, что она будет работать на большинстве сайтов и иметь приемлемый стиль. На этом новом этапе я больше не жду сообщений об ошибках здесь, пожалуйста, 
, оно уже исправлено. Всё должно работать как обычно.
