MANFRED BERNARDO ✷ midnight, texas |
[html]<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Instagram mockup</title>
<!-- Font Awesome 6 (free) for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* ----- reset & base ----- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
padding: 20px;
}
/* ----- ONE VARIABLE TO RESIZE THE WHOLE MOCKUP ----- */
.mockup-wrapper {
--mockup-scale: 1; /* <-- change this to scale (0.7, 1.2, 1.5, etc.) */
--base-width: 500px; /* base width at scale=1 */
--base-font: 10px;
margin: 0 auto;
max-width: fit-content;
}
/* ----- the mockup card, sized by the variable ----- */
.mockup-card {
width: calc(var(--base-width) * var(--mockup-scale));
max-width: 100%;
display: flex;
flex-wrap: wrap;
background: #fff;
border: 1px solid #dbdbdb;
border-radius: calc(12px * var(--mockup-scale));
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
font-size: calc(var(--base-font) * var(--mockup-scale));
transition: width 0.2s ease;
}
/* left: image – square */
.mockup-image {
flex: 1 1 55%;
min-width: 180px;
background: #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
}
.mockup-image img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
background: #ccc;
}
/* right: sidebar */
.mockup-sidebar {
flex: 1 1 45%;
min-width: 160px;
display: flex;
flex-direction: column;
background: #fff;
border-left: 1px solid #efefef;
}
/* ----- all internal dimensions use "em" or relative units, so they scale ----- */
.mockup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.8em 1em;
border-bottom: 1px solid #efefef;
}
.user-area {
display: flex;
align-items: center;
gap: 0.7em;
}
.avatar {
width: 2.2em;
height: 2.2em;
border-radius: 50%;
background: #c4c4c4;
background-image: linear-gradient(135deg, #405de6, #833ab4, #e1306c);
background-size: cover;
background-position: center;
flex-shrink: 0;
}
.username {
font-weight: 600;
font-size: 1em;
color: #262626;
}
.location {
font-size: 0.75em;
color: #8e8e8e;
margin-top: 0.05em;
}
.dots i {
font-size: 1.1em;
color: #262626;
}
/* comments */
.mockup-comments {
flex: 1 1 auto;
padding: 0.7em 1em 0.5em 1em;
display: flex;
flex-direction: column;
gap: 0.7em;
max-height: 14em;
overflow-y: auto;
border-bottom: 1px solid #efefef;
}
.comment-row {
display: flex;
gap: 0.7em;
align-items: flex-start;
}
.c-avatar {
width: 1.8em;
height: 1.8em;
border-radius: 50%;
background: #8e8e8e;
flex-shrink: 0;
background-image: linear-gradient(145deg, #f09433, #dc2743, #bc1888);
background-size: cover;
background-position: center;
}
.comment-body {
display: flex;
flex-direction: column;
gap: 0.1em;
}
.c-user {
font-weight: 600;
font-size: 0.95em;
color: #262626;
}
.c-text {
font-size: 1em;
color: #262626;
line-height: 1.3;
}
.c-time {
font-size: 0.75em;
color: #8e8e8e;
margin-top: 0.15em;
}
/* actions */
.mockup-actions {
display: flex;
justify-content: space-between;
padding: 0.5em 1em 0.2em 1em;
border-bottom: 1px solid #efefef;
}
.actions-left {
display: flex;
gap: 1.1em;
}
.actions-left i,
.actions-right i {
font-size: 1.5em;
color: #262626;
}
/* likes & caption */
.mockup-likes {
padding: 0.4em 1em 0.1em 1em;
font-size: 1em;
font-weight: 600;
color: #262626;
}
.mockup-likes span {
font-weight: 400;
}
.mockup-caption {
display: flex;
gap: 0.7em;
padding: 0.4em 1em 0.7em 1em;
align-items: flex-start;
border-bottom: 1px solid #efefef;
}
.caption-avatar {
width: 1.8em;
height: 1.8em;
border-radius: 50%;
background: #405de6;
flex-shrink: 0;
background-image: linear-gradient(135deg, #405de6, #5851db);
background-size: cover;
background-position: center;
}
.caption-text {
font-size: 1em;
color: #262626;
line-height: 1.4;
}
.caption-text strong {
font-weight: 600;
margin-right: 0.2em;
}
/* fake comment input */
.mockup-input {
display: flex;
align-items: center;
padding: 0.5em 1em;
gap: 0.8em;
background: #fff;
}
.mockup-input i {
font-size: 1.4em;
color: #262626;
}
.mockup-input .placeholder {
flex: 1;
font-size: 1em;
color: #8e8e8e;
font-weight: 300;
}
.mockup-input .post-text {
font-weight: 600;
color: #0095f6;
font-size: 1em;
}
/* ----- responsive: if width gets squeezed, stack vertically ----- */
@media (max-width: 600px) {
.mockup-card {
flex-direction: column;
width: 100% !important; /* override fixed width on small screens */
max-width: 400px;
}
.mockup-sidebar {
border-left: none;
border-top: 1px solid #efefef;
}
.mockup-comments {
max-height: 12em;
}
}
</style>
</head>
<body>
<!-- ====== CHANGE THE VARIABLE BELOW TO RESIZE ====== -->
<div class="mockup-wrapper" style="--mockup-scale: 0.95;"> <!-- try 0.7, 1.2, 1.5 etc. -->
<div class="mockup-card">
<!-- left: image -->
<div class="mockup-image">
<img
src="https://chaoticflux.com/wp-content/uploads/2020/02/mtx205_015_030-1.jpg"
alt="mockup post"
/>
</div>
<!-- right: static sidebar -->
<div class="mockup-sidebar">
<!-- header -->
<div class="mockup-header">
<div class="user-area">
<div class="avatar" style="background-image: url('https://i.pinimg.com/1200x/11/3e/12/113e1279f73290aba2b0ab895a4d302f.jpg');"></div>
<div>
<div class="username">midnight_press</div>
<div class="location">Midnight, Texas</div>
</div>
</div>
<div class="dots"><i class="fas fa-ellipsis-h"></i></div>
</div>
<!-- comments (static) -->
<div class="mockup-comments">
<div class="comment-row">
<div class="c-avatar" style="background-image: url('https://i.pinimg.com/736x/de/6d/44/de6d443d4386a096a259af87237372f9.jpg');"></div>
<div class="comment-body">
<span class="c-user">@freddie_bernardo</span>
<span class="c-text">do u guys think i am redeemable</span>
<span class="c-time">2h ago</span>
</div>
</div>
<div class="comment-row">
<div class="c-avatar" style="background-image: url('https://i.pravatar.cc/150?img=45');"></div>
<div class="comment-body">
<span class="c-user">@sunny_side</span>
<span class="c-text">wait is that scam</span>
<span class="c-time">45m ago</span>
</div>
</div>
</div>
<!-- actions -->
<div class="mockup-actions">
<div class="actions-left">
<i class="far fa-heart"></i>
<i class="far fa-comment"></i>
<i class="far fa-paper-plane"></i>
</div>
<div class="actions-right">
<i class="far fa-bookmark"></i>
</div>
</div>
<!-- likes -->
<div class="mockup-likes">
<span>1,248</span> likes
</div>
<!-- caption -->
<div class="mockup-caption">
<div class="caption-avatar" style="background-image: url('https://i.pinimg.com/1200x/11/3e/12/113e1279f73290aba2b0ab895a4d302f.jpg');"></div>
<div class="caption-text">
<strong>midnight_press</strong> How To Show People You Are More Than Your Unethical Caree Choice
</div>
</div>
<!-- fake comment input (static) -->
<div class="mockup-input">
<i class="far fa-smile"></i>
<span class="placeholder">Add a comment…</span>
<span class="post-text">Post</span>
</div>
</div> <!-- /sidebar -->
</div> <!-- /card -->
</div> <!-- /wrapper -->
</body>[/html]
Около восьми утра Рэнду звонят из офиса. За окном зыбко и холодно, вторник. Еще вчера была пятница, или половина одиннадцатого вечера, — Анора приготовила говядину Веллингтон. Брайс попытался скормить собаке табель об успеваемости. Соседи пригласили на ужин друзей.
Рэнд давит на веки пальцами. Под одеялом все пропотело и окоченело одновременно. Ему снова приснился кошмар. Рука жены на груди — единственная константа в уравнении с бесконечными переменными. Он гладит тонкие пальцы и пытается вспомнить, как правильно дышать.
— Сэр? — Сигрун отмечает затянувшуюся после вежливого приветствия паузу. — Еще раз простите, что беспокою Вас в выходной.
— Все в порядке, — Рэнду бы очень хотелось, — Что-то с бумагами по последнему делу?
— И да, и нет. Натаниэль считает, вам лучше взглянуть самому.
— Хорошо. Я заеду перед встречей, примерно, — он косится в сторону будильника, — Через сорок минут.За месяц до начала предвыборной гонки молодой студент из штата Юта, отличник и душа компании, неожиданно для всех решает сигануть с крыши лабораторного корпуса. Полиция тратит не больше суток, чтобы закрыть дело с пометкой «суицид». Безутешные родители парня покупают билет на ближайший рейс и к концу следующего дня уже берут в осаду мэра, а если точнее — его кабинет, секретаршу и пиар-менеджера. Расследование возобновляют без каких либо новых улик.
Нэйт в третий раз поправляет галстук, пока Рэнд перечитывает последний медицинский отчет, отправленный Андерсом. По-отдельности слова в заключении имеют кристально-ясный смысл, но выстроенные друг за другом, превращаются в какую-то белиберду.
— Что значит «не установлено»? — Вопрос со звездочкой. В качестве ответа Хоу заводит глаза под козырек густых бровей.
— Я могу уточнить в словаре, если ты сомневаешься.
— Уточни заодно, как пишется «уволен» и «за служебное несоответствие».
Раздается писк подключенного динамика. Нарочито бодрый голос Сигрун сообщает, что в приемной ожидает миссис Мак-Тир.
— Забыл захватить коробку с завтраком? — Интересуется Хоу, но без привычной колкости.
Рэнд нажимает маленькую черную кнопочку с излишнем усилием. Выпустив воздух из легких, снова пробегается глазами по отпечатанным буквам на бланке государственного образца.
— Передай ей, что я почти закончил. — И, возвращаясь к Нэйту, — Мы не можем пойти с этим в суд.На Аноре дорогой юбочный костюм оттенка Sage Green, туфли-лодочки, шлейф тяжелых травянистых духов. Рэнд незаметно для всех оставляет поцелуй среди уложенных локонов. Она улыбается коротко и интимно. Ей к лицу новый цвет румян.
— Максвелл скоро подойдет. Отвлечешь его для меня?
Анора, как в молодости, ногтем касается уголка губ. Это значит: «у нас есть уговор».
Во рту сухо после трех шотов эспрессо, горло стягивает осадком неприятного сна. Он спешит по коридору, впадающему в глянцевый опен спейс. За едва различимым гулом техники угадываются обрывки разговоров, пара стажеров у дальней стены таращится на него во все глаза. Рэнд отвечает ухмылкой, повторяя давно заученный порядок сокращения мышц, — подражая плакатам, обещающим избирателям землю обетованную по ставке в один процент.
Он уже тянется за одноразовым стаканчиком, — мысль не успевает обогнать рефлекс, — когда лицо человека по левую руку складывается в пугающий своей реалистичностью пазл. Рэнд моргает медленно и растерянно, разбирая одновременно картинку перед собой и на негативе сетчатки с придирчивостью параноика. Все тот же знакомый прищур, но в обрамлении тонких морщин. Разве призраки могут стареть? Ему следовало бы больше спать. Он почти готов отмахнуться, — может, обратиться к врачу, — но Алларосу, видимо, не терпится восстать из мертвых насовсем. От шелеста знакомого голоса на кончиках пальцев проступает липкая роса.
Едва явив себя миру живых, Лавеллан бросается бежать. Забавная черта, очевидно въевшаяся в структуру его ДНК, — иначе как объяснить постоянство при транзите на Тот свет и назад. Рэнд сглатывает колючий комок. Забыв о воде, припускается следом, — если уж сходить с ума, то с полным перечнем соответствующих причин. Он представляет, как цитирует постсоветского политика в вечерних новостях: «Я устал», и освобождает офис к следующей среде.
Плохо смазанная ручка скрипит, предупреждая неосторожных — по другую сторону кроличья нора. Рэнд проскальзывает внутрь и прикрывает за собой дверь. Резкий химический запах отражается от кафельных стен. В зеркале напротив они с Алларосом смотрят друг другу глаза в глаза.
— Господин прокурор? — Передразнивает Кусланд, делая осторожный шаг вперед. — Все, что ты смог придумать за столько лет?
— И, пожалуйста, только не говори «мне стало лучше», когда я неизбежно вспомню, что ты вроде как погиб.
