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

[harukatenoh]

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

Чтобы Собакен появлялся, ширина экрана должна быть не менее 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: 4
		box-sizing: border-box;
		width: 133
		height: 82
		background: #fff;
		color: #000;
		font-size: 12
		font-style: normal;
		border-radius: 7
	}
}
@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. Если текст находится не по центру облачка, то, возможно, пришло время обновить браузер…