Разметка сета аватарок для адаптивного дизайна

001

002

003

004

005

006

007

008

009

010

011

012

013

014

Разметка разбита на строки для читабельности. Для использования нужно либо выставить «Не заменять переносы строки на <br>» (и не забывать это делать при каждом редактировании), либо убрать переводы строк. P.S. Выровнять можно и по центру, поменяв left на center в самом начале.

<div style="text-align:left;font-size:14px;font-weight:normal;font-style:normal;overflow:hidden;"><div style="margin-left:-8px;margin-right:-8px;">
<div style="display:inline-block;margin:8px;"><div>001</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>002</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>003</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>004</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>005</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>006</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>007</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>008</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>009</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>010</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>011</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>012</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>013</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>014</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
</div></div>

---

Эксперимент с цветом Что-то мне подсказывает, что какой-то паттерн в фон неплохо бы и запихнуть.

---

Потихоньку отвоёвываю вертикальные пиксели у нового дизайна дневника. Там чуть-чуть, сям чуть-чуть, и вот уже контент первой страницы не так далеко внизу, как раньше

---

Монстр вдруг заявил, что никакой я не Квантовый Кот, а обычный Диван-дурак. Что угодно будут брехать, лишь бы в живых остаться.

Протестую, наш диван умный

---

Кстати о неиспользовании буквы «ё» в книгах. Если не знать заранее, то выбрать между совершенный и совершённый (вид глагола) довольно непросто

---

Виды глаголов в русском языке на перфектность в английском языке в детстве у меня почему-то не ложились

---

Рамблер бушует. Но очень сложно объявить бойкот тому, чем и без того не пользуешься _/¯" src="static.diary.ru/userdir/6/7/8/5/67852/86443314...." width="34px;">

• Rambler Group пытается получить права на самый популярный в мире веб-сервер Nginx стоимостью в сотни миллионов долларов [meduza.io]
• Rambler потребовал заблокировать Twitch в России и выплатить рекордную компенсацию в 180 миллиардов рублей [meduza.io]

---

Reskribado de propozicio estas danĝera afero por gramatiko

---

Hieraŭ mi aĉetis novan muelitan kafon. Ĝi estas pli multekosta, ol la antaŭa, tamen pli bongusta ☕

---

Пожалуй, Изанами в новой истории (когда она случится) по BlazBlue мне будет не хватать. Разве что Ноэль очень рассердится

---

…родовые различия во множественном числе сохраняются только в именительном, родительном и винительном падежах. В дательном, творительном и предложном падежах произошла унификация. Часто не различаются окончания по роду и в именительном и в родительном (и в сходном с ними винительном) падежах…

— Современный русский язык / Д. Э. Розенталь, И. Б. Голуб, М. А. Теленкова. — 15-е изд. — М. : АЙРИС-пресс, 2017.

А давайте родительный и винительный во множественном числе тоже уницифируем? Правда писать и говорить ко́мнатов, о́кнов и о́кны будет как-то очень непривычно

---

Замена встраивания iframe'ами видео с ютуба на его же превью со ссылкой прошла успешно. Что бы ещё такого с iframe'ами с bandcamp придумать

---

У шапки поста нет какого-то общего предка, который было бы удобно стилизовать. Сейчас это выглядит так:

div.post-content
    span.date
    a.title
    span.postActionLinks
    div.post-inner
    p.tags

Красавцы. Что мешало ещё один div воткнуть, чтобы стало как-то так:

div.post-content
    div.post-header
        span.date
        a.title
        span.postActionLinks
    div.post-inner
    p.tags

Пост в сообществе: https://design2019.diary.ru/p218725534.htm?from=0

UPD: а ведь уже починили!

---

Что-то изменилось в дайревом CSS'е и у меня отвалился расширитель для textarea. Пришлось чинить

---

Mi malsimpatiis klasikajn verkojn ekde lernejo, tamen dum la du milaj jaroj en Rusio Saltikov-Ŝĉedrin kompreniĝis memstare ¯\_(ツstatic.diary.ru/userdir/6/7/8/5/67852/86443314...." width="34px;">

---

Колонки с популярными темами дневника сбоку не хватает всё-таки после редизайна

---

Дохожу я, значится, в книжке до фонетической транскрипции русского языка. И первая мысль — да это же та ещё норкомания, может переписать пример показать. Потом смотрю на текст CSS правил, которые я пишу для себя или когда люди спрашивают…

---

Собакен говорит по-вашему

Это работает только на главной (адаптивного) дневника, потому что только там показывается эпиграф, в который надо вставлять текст. Любой другой текст в эпиграфе никак не мешает работе.

Чтобы Собакен появлялся, ширина экрана должна быть не менее 992 пикселей (так дайри написаны). Позицию блока с текстом устанавливаю в 3 местах, в зависимости от разрешения, потому что положение Собакена меняется в зависимости от размеров экрана.

Если вы напишете слишком много текста, то он наползёт на полосу меню, а верхняя его часть уйдёт за экран. Ничего не поделаешь.

Кстати, я ставлю элементу #page-t стиль position: static, чтобы он не мешал мне позиционировать блок. Надеюсь, это ничего не сломает Вроде пока работает. Если что-то поломается, придётся координаты от другой точки задавать.

Найдёте баги — пишите в комментариях.

<div class="mascot-text"><span class="mascot-text-content">Теперь-то я на своём месте.</span></div>

#page-t
{
	position: static !important;
}
.mascot-text-content
{
	position: absolute;
	left: 0;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
}
@media all and (min-width: 992px) {
	.mascot-text
	{
		position: absolute;
		z-index: 100;
		left: calc(50% + 119px);
		top: 4px;
		box-sizing: border-box;
		width: 133px;
		height: 82px;
		background: #fff;
		color: #000;
		font-size: 12px;
		font-style: normal;
		border-radius: 7px;
	}
}
@media all and (min-width: 1200px) {
	.mascot-text
	{
		left: calc(50% + 219px);
	}
}
@media all and (min-width: 1400px) {
	.mascot-text
	{
		left: calc(50% + 309px);
	}
}
@media not all and (min-width: 992px) {
	.mascot-text
	{
		display: none !important;
	}
}

Результат:



P.S. Если текст находится не по центру облачка, то, возможно, пришло время обновить браузер…

---

Работа продвигается.

Традиционно, @дневники забывают подгружать веб-шрифт, если ты выбираешь его в настройках. Пост про баг: https://design2019.diary.ru/p218703011.htm?from=0

Как выделить заголовки я пока не понимаю совершенно.

---

Попробую сейчас покрутить этот наш новый дизайн в дневнике. Буду редактировать на ходу, так что если что-то ломается или выглядит странно — жмите Ctrl+F5 Если приемлимого результата достичь не удастся, переключусь на старый и попробую завтра снова.