+ на светлых и темных - выправить иконки новых сообщений на главной (контраст)

+ - на светлых - разобраться с исчезнувшими границами у тем-сообщений.

+ - пофиксить вечно появляющуюся вкладку закладок.

+ Выровнять таблицу на “Участниках”

+ ширина блоков смайлов, спойлера и пр.

+ съезжает кнопка репутации - уменьшить отступы.

все - на мобильной версии

Отредактировано Реклама (29-01-2022 05:55)

Привет!
Очень классный дизайн, чистый и аккуратный) Цвета — отдельная любовь! Да и в целом много классного увидел. Та же мозаика в некоторых разделах на главной — клевая тема)
Я сразу скажу, что не особо смотрел разные цветные версии, больше именно в вёрстку втыкал. Скриншоты будут доступны 31 день, потом сервис картинок их снесет, но я думаю, этого будет более чем достаточно)
Также я не буду особо нигде в подробности вдаваться, но если тебе интересно, почему так, а не иначе, то спрашивай.

0. Лирическое отступление для общей информации, мало ли, вдруг однажды пригодится.
Я, как и многие в индустрии, приверженец идеи mobile-first, согласно которой мы пишем стили сначала как для мобильных, а потом точечно докручиваем их под каждый следующий «уровень» разрешений. Например, у меня на работе сетка разрешений такая: мобильные, планшеты (от 768px), малый десктоп (от 1024px), большой десктоп (от 1280px). Выходит очень удобно и все основные девайсы пользователей покрывает)

Главная.
1. Кнопка закладок (#BookmCntToggle) заходит за навигацию форума на малых экранах. На мобильных, вижу, ты ее вообще выпиливаешь, но на 768px и далее — надо повысить ей z-index до 11 (судя по тому, что у навигации 10).

2. Вообще, удобное управление z-index — это отдельная головная боль. У себя я пользуюсь кустарным методом: выношу все z-index в css-переменные и держу в одном месте (в начале файла стилей, например). Так всегда можно с одного взгляда определить, сколько у меня z-index в проекте и какие они. Но это так, просто опытом делюсь)

3. Возвращаясь к идее mobile-first, посмотрим на блок объявлений в шапке.

Он появляется из-за ненулевых grid-gap. Я бы переписал шапку, руководствуясь mobile-first:
• на мобильных оставил бы ее с просто display: block, смысла в гридах там нет, так как мы показываем всего один новостной блок
• а дальше от (сколько-там-у-тебя-сейчас-540px?) уже сделал бы display: grid и тд.

4. <ul> нельзя вкладывать в <span> (вот удобный сервис для проверки, что во что можно вкладывать).
5. В целом верстка новостей сейчас не очень семантичная — это на много что влияет, от доступности до порой даже скорости загрузки:

Ссылки, кстати, можно не класть в дополнительный <b>, можно просто font-weight им задать через стили.
Ну и еще я, конечно, задал бы всему в шапке классы и стилизовал по ним, потому что так удобнее. Но это уже некритично, так что на твое усмотрение)

6. Любым картинкам в верстке всегда необходимо указывать атрибуты width и height (берем размеры как для первого разрешения, на котором картинка видна, в нашем случае она видна с 540px). Нужно для корректного и более быстрого рендера страницы.

(и по ситуации loading="lazy" еще, если картинка в футере, например. Я всем баннерам в футере его проставляю, чтобы они грузились, только если человек до них долистает.)
Дальше стилями корректируем размер. Если картинка должна расти вместе с контейнером, то width: 100%; height: auto; и всё такое.

7. Кнопки навигации в шапке — тут несколько проблем.
Во-первых, кнопки мигают при наведении) Не стал снимать видео. Кажется, там проблемы с наведением и тем, когда оно срабатывает.
Во-вторых, теги <navi1> и <navi2>, которых не существует в html. В html можно добавлять свои теги с помощью js, но не думаю, что тут это нужно, потому что вполне достаточно семантичных. Браузеры, конечно, и так всё пережуют и отобразят, но вообще это сомнительная практика по целому ряду причин)
В-третьих, внутри <ul> не может лежать ничего, кроме <li>. А внутри <li> уже практически все, что угодно.
Я бы переверстал так (всё не стал переделывать, просто как пример):

<nav class="navi1">
    <button type="button">
        Навигация
    </button>

    <ul>
        <li>
            <a href="/viewtopic.php?id=4">Правила и шаблоны</a>
        </li>
        <li>
            <a href="/viewtopic.php?id=43819">Темы и сообщения</a>
        </li>
    </ul>
</nav>

Принцип работы оставил бы тот же: по наведению на сам контейнер .navi1 показывается меню и тд — в этом смысле всё ок.
• Стили псевдоэлемента перекинул бы на кнопку, ну и разобрался бы с тем, что происходит с кнопкой по наведении.
• С ul снял бы margin (непонятно, зачем он: я отключил у себя, и ничего не поменялось), display: flex — тоже непонятно, зачем он, если ты по сути просто марджины с его помощью проставляешь. Ну и gap для флекса в Сафари не работает, например) Проще по li:not(:last-child) задать margin-bottom.

Вообще, если есть возможность проверять вёрстку в Сафари — это вот лучший способ узнать про 95% косяков, которые могут вылезти в самых неожиданных местах потому что сафари ненавидит разработчиков.

8.

Плюс Сафари игнорирует gap для флексов,

9. Вопрос про подфорумы:

Функцию calc() стоит использовать ооочень аккуратно и точечно, и если возможно сделать то, что ты хочешь, не используя ее — то не использовать. Например, в случае с колонками у тебя тут, насколько я понял, левая фиксированная по ширине, а средняя и правая тянутся. Css-переменная var(--pnpad2) никогда не меняет своего значения. Зачем тогда нужно так сложно? grid-template-columns: 165px 3.5fr 1.5fr, и всё. И код читать легче, и браузеру не надо ничего лишний раз считать.

10. Вообще в целом я бы прошелся по коду и повыпиливал везде лишние calc(). Особенно там где всякие статичные на всех разрешениях паддинги через calc() задаются — это вот точно лишняя трата ресурсов браузера)

11. Вот эту

Проще сделать через гриды, на мой взгляд) Можно тогда вообще не задавать подфорумам марджины, ну и в целом гриды для таких ситуаций и придумывались:

display: grid;
grid-gap: 10px;
grid-template-rows: auto auto; //или даже через grid-auto-rows сделал бы
grid-template-columns: 1fr 1fr;

А с детей я бы снял лишние марджины.

12. В статистике отступы на мобильных чуток странно выглядят: у активных есть, а у посетивших нет.

Тут я уже чуток устал и пора к другим делам переходить.
Но из того, что еще есть навскидку — в Сафари вообще не работают кнопки над полем ввода сообщения (там надо td::before назначить pointer-events:none;, скорее всего, это решит проблему).
В мобильном сафари кнопки в форме ответа все слиплись. Но тоже нет уже времени лезть смотреть. Скорее всего из-за того, что gap для флексов не работает в Сафари.

Надеюсь, что смог помочь. Я постараюсь на следующей неделе еще поползать и посмотреть) Дизайн суперский, буду очень его ждать 🔥