Про настройки адаптивного дизайна

[Victory_Day]

Пишет  quirischa:

11.12.2019 в 12:10

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

Нельзя просто так сменить тип оформления на адаптивный, и всё адаптируется. Увы, но адаптивный дизайн нужно создавать с нуля.

Кроме того, сейчас пока нормально не работает и предпросмотр дизайна в настройках. Но мы скоро это починим.

* * *

Настройки цветовой гаммы делятся на "Цвет текста" и "Цвет фона".

Во вкладке "Цвет текста":
- "Текст" - цвет основного текста записей
- "Меню" - цвет элементов на плашке меню (лого, иконки, ссылки)
- "Акценты" - это цветовые акценты страницы (заголовки, ссылки, бордеры — всё то, что выделяется на фоне остального)
- "Прочее" - то, что по смыслу на второстепенном плане (служебные ссылки, иконки и т.д.)

Во вкладке "Цвет фона"
- "Фон дневника" - цвет фона ниже плашки меню. Может быть незаметен, если закачана фоновая картинка.
- "Фон записи" - цвет подложки под постами, заголовками и прочее.
- "Фон меню основной" - цвет плашки меню
- "Фон меню дополнительный" - цвет средней (юзерской) части меню и выпадающих блоков.

* * *

Можно придерживаться вот таких общих советов по применению цветовой схемы:

1. Старайтесь по возможности минимизировать количество используемых цветов.
Например, цвет Акцентов и цвет Текста делать одинаковыми. Также одинаковыми можно фоны Основного и Дополнительного меню.

2. Второстепенные элементы страницы (Оформление → Цвет текста → Прочее) лучше устанавливать в бледное/ненасыщенное/неяркое значение.

3. Фон дневника и Фон записи устанавливать в одинаковые значения, визуальных разделителей между записями и так хватает.

4. Устанавливать Фон записи только если задана фоновая картинка.

5. При использовании фонового рисунка устанавливать нейтральные цвета дневника (оттенки серого).

6. Вкладка Шрифты. Обычно размер заголовка устанавливается на пару пунктов больше размера основного текста, тогда проще считывается визуальная иерархия текстов.

* * *

Для адаптивного дизайна доступны свои настройки CSS. С их перечнем можно ознакомиться в статье Справки.

URL комментария

Comments

[Tenno Seremel]

priest_sat, сверху полоса это из-за аватарки, ника и названия дневника (если бы они были в одном блоке, было бы проще…). Внизу ссылки, которые неплохо бы скрыть. Сейчас посмотрю что можно сделать.

[priest_sat]

Tenno Seremel, ок, буду ждать.

[Tenno Seremel]

priest_sat,

#epigraph {
	position: relative !important;
}
#epigraph .postLinksBackg {
	display: none !important;
}
#epigraph .editPostLink {
	position: absolute;
	right: 8px !important;
	top: 8px !important;
	margin: 0 !important;
}
#epigraph .i-edit::before {
	color: #fff !important;
}
#epigraph > a[target] {
	position: absolute !important;
	left: 8px !important;
	top: 8px !important;
}
#epigraph > p {
	position: absolute !important;
	left: 59px !important;
	top: 16px !important;
	padding: 0 !important;
	margin: 0 !important;
}
#epigraph > div:last-child {
	margin-top: 0 !important;
}

[priest_sat]

Tenno Seremel, о, эпиграф теперь прекрасно выглядит как в ноуте, так и в телефоне. Спасибище!

[Tenno Seremel]

priest_sat,

В связи с написанием этого кода родилось предложение: https://design2019.diary.ru/p218840061.htm Если есть желающие, можете поддержать

[priest_sat]

Tenno Seremel, я совсем профан в этом всем. Но на сооб подпишусь и буду следить за тем, что умные люди пишут.

[Tenno Seremel]

priest_sat, (полу-оффтоп) инструменты браузера говорят, что цвет основного текста вашего дневника имеет слишком маленький контраст с цветом фона 🤔

[Tenno Seremel]

// Уползаю спать, если что, завтра прочитаю комментарии. Zzz…

[priest_sat]

Tenno Seremel, да? вроде одинаковые цвета.

Фон дневника:
#3e4e5b
Фон меню осн.:
#3e4e5b
Фон записи:
#3e4e5b
Фон меню доп.:
#4c011a

[priest_sat]

Tenno Seremel, спокойной ночи)

[Tenno Seremel]

priest_sat, доброго утра

Речь про цвет основного текста относительно фона, т.е. #000 на #3e4e5b. Тут либо осветлять текст, либо фон. Например, белый цвет текста #fff. Если это слишком ярко, то цвет текста хотя бы #c2c2c2 даст уровень «миниальный контраст».

[priest_sat]

Tenno Seremel, ааа, имеете в виду текст. Ясно. Позже займусь, спасибо.

[priest_sat]

Токмо волею пославшей меня супруги)))) спрашиваю для подруги:
Чтобы для совсем чайника объяснили, как сделать фон записи прозрачным, как изменять градиент прозрачности и цвет прозрачного фона. И можно ли сделать в новом дизе вверху поста красивую финтифлюшку, по-моему, это называется экстратоп. И если можно, то как.

[Tenno Seremel]

priest_sat, extratop есть, только он не в верху, а где-то в области над эпиграфом, потому что на самом верху меню, и оно там и остаётся при скролле.

Цвет с прозрачностью задаётся следующим образом в CSS (это значение свойства, без названия): rgba(rr, gg, bb, aa)
где rr — 0-255 красный компонент цвета;
gg — 0-255 зелёный компонент цвета;
bb — 0-255 синий компонент цвета;
aa — 0-1 непрозрачность (не обязательно целое число, например, 0.9 — слегка прозрачный).

Градиент: linear-gradient(to right, цвет, цвет, цвет, цвет...)
где to right — направление градиента, может быть и to left, to bottom to top. А можно и просто в градусах, например, 45deg (to в этом случае не пишется, если что).
цвет — любой CSS цвет, либо в формате #rrggbb, либо как выше с rgba().

Градиент считается изображением, а не цветом, поэтому ставится туда, куда встают картинки в CSS. Например, background-image.

Чтобы убрать/изменить фон из постов, нужно редактировать свойства .post-list .item и #epigraph. Например:

.post-list .item
{
	background: rgba(255,255,255,.9) !important;
	color: #000 !important;
}
#epigraph
{
	background: linear-gradient(to bottom, rgba(248, 229, 193, 0.7), rgba(255, 255, 255, 0.9)) !important;
	color: #000 !important;
}

Хотя не исключено, что ещё у каких-нибудь блоков (в т.ч. внутри) может быть указан какой-либо цвет фона.

Также у градиентов можно указывать фиксированные позиции для стоп-точек, если это нужно, например: linear-gradient(130deg, #fff, #dcffcd 20%, #a6afff 70%, #a62d2f);

#epigraph
{
	background: linear-gradient(130deg, #fff, #dcffcd 20%, #a6afff 70%, #a62d2f) !important;
	color: #000 !important;
}

[Лисичка Илли]

Tenno Seremel, спасибо огромное! Это для меня спрашивали. С градиентом, пожалуй, пока не рискну, но всё сохранила)).

[Tenno Seremel]

Лисичка Илли, градиенты это просто, пробуйте

[Лисичка Илли]

Tenno Seremel, попробую обязательно, но не сегодня, сегодня мне уже слегка чересчур

[priest_sat]

Tenno Seremel, снова притащилась ныть. Каким-то каком сервис CSS не самооплатился (хотя стоит галка на "Автопродление") и исчезли все коды, которые мне сочинили.
Я вроде собрала все, что могла. Но картинка в эпиграфе теперь стала меньше, чем должна быть. Не пойму, в чем затык - скопировала тут коды для эпиграфа (взяла выше).

[Tenno Seremel]

priest_sat, вероятно, там были ещё какие-то стили.

В дополнение к тому, что выше:

#epigraph {
    max-width: 1024px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

Так было?

[priest_sat]

Tenno Seremel, УРАААААА!!! спасибо огромное!

[Лис Хикару]

А где-нибудь было, как исправить пустое место (блок под аватары что ли?Оо) в собственном дневнике (если это вообще возможно) и вернуть аватары в динамично подружаемых комментариях в дневнике?

[nemv]

Лис Хикару, это, наверное

{-----------Показать аватары в динамических комментах-----------}
 #Journal .commentsBox .avatar { display: flex !important; }
 .avatar > img { max-width: 100% !important; }
 {-----------Убрать пустое поле из-за аватар на главной дневника-----------}
 #Journal #postsArea > .item:not(#epigraph) > .postContent > .post-content { float: none !important; width: 100% !important; }

[priest_sat]

nemv, а это где прописывать? В блоке CSS?

[Лис Хикару]

nemv, спасибо!!)

priest_sat, да, просто туда вставить, в это окошко css

[priest_sat]

Лис Хикару, спасибо.