ебучий случай или твой любимый блог о твоей самой интересной жизни

[hideprofile][html]

<div class="oa-airgram-topbar">

<div class="oa-airgram-username">Jeon Jungkook</div>

</div>

<div class="oa-airgram-left">

<div class="oa-airgram-mini-name">
<b>Jeon Jungkook</b>
<span>@jungkook.97</span>
</div>

<div class="oa-airgram-mini-buttons">
<em>Confirm</em>
<em>Block</em>
</div>

<div class="oa-airgram-mini-edit">
Edited by<br>flavecookies
</div>
</div>

<div class="oa-airgram-play-title">
<i>◉</i>
<b>личный мусорник</b>
</div>

<label for="oa-airgram-gallery">
<i>▣</i>
<span>ебло утиное</span>
</label>

<label for="oa-airgram-bio">
<i>✎</i>
<span>твои никому не нужные мысли</span>
</label>

<label for="oa-airgram-media">
<i>⚙</i>
<span>ты один ржёшь над своими рилсами</span>
</label>

</div>

<div class="oa-airgram-right">

<div class="oa-airgram-subnav">
<span>Home</span>
<span>Feeds</span>
<span>Explore</span>
<span>Settings</span>
</div>

<div class="oa-airgram-page oa-airgram-gallery-page">

<div class="oa-airgram-title">
<h2>Instagram</h2>
<p>Welcome to JK's blog</p>
</div>

<div class="oa-airgram-slide">
<img src="https://placehold.co/420x520" alt="photo">
</div>

<div class="oa-airgram-slide">
<img src="https://placehold.co/420x520" alt="photo">
</div>

<div class="oa-airgram-slide">
<img src="https://placehold.co/420x520" alt="photo">
</div>

<div class="oa-airgram-player">
<i>♫</i>
<div>
<b>Still with you</b>
<span>Jungkook</span>
<em></em>
</div>
</div>

</div>

<div class="oa-airgram-bio-content">
<h3>Kookie!</h3>

<div class="oa-airgram-bio-buttons">
<span>Biography</span>
<span>Profile</span>
</div>

<p>
Jeon Jung-kook, or better known by his stage name Jungkook, is a person with soft chaos,
pretty habits and a little universe inside his personal blog. Here you can write short
biography, mood, story, facts or anything important about your character.
</p>
</div>

</div>

<div class="oa-airgram-page oa-airgram-bio-page">

<div class="oa-airgram-title oa-airgram-title-small">
<h2>Biography</h2>
<p>personal notes, diary pieces and facts</p>
</div>

<div class="oa-airgram-note">
<span>13.07 / 02:14</span>
<p>сегодня я снова обещал себе лечь пораньше, но у моего внутреннего сценариста были другие планы.</p>
</div>

<div class="oa-airgram-note">
<span>12.07 / 18:40</span>
<p>лучший способ ничего не объяснять — красиво улыбнуться и сделать вид, что так и было задумано.</p>
</div>

<div class="oa-airgram-note">
<span>10.07 / 23:05</span>
<p>иногда хочется вести себя взросло, но потом включается музыка, и весь план летит в красивую драматичную пропасть.</p>
</div>

<div class="oa-airgram-note">
<span>08.07 / 09:30</span>
<p>маленькое напоминание себе: не отвечать на сообщения, когда хочется быть честным, красивым и опасным одновременно.</p>
</div>

</div>

<div class="oa-airgram-page oa-airgram-media-page">

<div class="oa-airgram-title oa-airgram-title-small">
<h2>Media</h2>
<p>music, videos, reels and recommendations</p>
</div>

<div class="oa-airgram-media-info">
<span>music rec</span>
<h3>song title — artist</h3>
<p>песня для ночной дороги, красивого молчания и ощущения, что жизнь вот-вот станет клипом.</p>
<a href="ССЫЛКА_НА_МУЗЫКУ">listen</a>
</div>
</div>

<div class="oa-airgram-media-info">
<span>reels mood</span>
<h3>video / reels / edit</h3>
<p>сюда можно вставить ссылку на рилс, эдит, видео, клип или вайб дня.</p>
<a href="ССЫЛКА_НА_ВИДЕО">watch</a>
</div>
</div>

<div class="oa-airgram-embed">
<h3>embed zone</h3>
<p>
сюда можно вставить iframe плеера или видео. если форум не пропускает iframe —
просто оставь ссылку выше в карточке.
</p>
</div>

</div>

</div>
</div>

.oa-airgram {
--oa-page-bg-1: var(--oa-global-bg-1);
--oa-page-bg-2: var(--oa-global-bg-2);

--oa-pink: var(--oa-global-pink);
--oa-hot-pink: var(--oa-global-hot-pink);
--oa-blue: var(--oa-global-blue);
--oa-mint: var(--oa-global-mint);
--oa-dot: var(--oa-global-dot);

--oa-dark: var(--oa-global-dark);
--oa-darker: var(--oa-global-darker);
--oa-black: var(--oa-global-black);

--oa-soft: var(--oa-global-soft);
--oa-light: var(--oa-global-card);
--oa-light-strong: var(--oa-global-card-strong);
--oa-glass: var(--oa-global-pill);

--oa-text: var(--oa-global-text);
--oa-muted: var(--oa-global-muted);
--oa-overline: var(--oa-global-top-muted);
--oa-white: var(--oa-global-white);

--oa-border: var(--oa-global-border);
--oa-scroll: var(--oa-global-scroll);
--oa-shadow: var(--oa-global-shadow);
--oa-big-shadow: var(--oa-global-big-shadow);

--oa-tab-off-bg: var(--oa-global-tab-off-bg);
--oa-tab-off-text: var(--oa-global-tab-off-text);
--oa-tab-on-1: var(--oa-global-tab-on-1);
--oa-tab-on-2: var(--oa-global-tab-on-2);

width: min(900px, 100%);
max-width: calc(100vw - 20px);
margin: 30px auto;
font-family: Trebuchet MS, Arial, sans-serif;
color: var(--oa-text);
}

.oa-airgram,
.oa-airgram *,
.oa-airgram *:before,
.oa-airgram *:after {
box-sizing: border-box;
}

.oa-airgram input[type="radio"] {
display: none;
}

/* ОСНОВНАЯ КАРТОЧКА */

.oa-airgram-card {
position: relative;
padding: 22px;
border-radius: 36px;
background:
radial-gradient(circle at 12% 0%, rgba(120,220,255,.18), transparent 32%),
radial-gradient(circle at 90% 8%, rgba(255,180,220,.24), transparent 34%),
linear-gradient(135deg, var(--oa-page-bg-1), var(--oa-page-bg-2));
box-shadow: 0 18px 45px var(--oa-big-shadow);
border: 2px solid var(--oa-border);
overflow: hidden;
}

/* ВЕРХНИЙ БАР */

.oa-airgram-topbar {
display: grid;
grid-template-columns: 58px 1fr 250px 54px;
gap: 14px;
align-items: center;
min-height: 64px;
margin-bottom: 18px;
padding: 9px 12px;
border-radius: 999px;
background: var(--oa-dark);
box-shadow: 0 12px 25px var(--oa-shadow);
}

.oa-airgram-burger {
display: grid;
gap: 6px;
padding: 12px 8px;
}

.oa-airgram-burger i {
display: block;
height: 5px;
border-radius: 999px;
background: var(--oa-white);
}

.oa-airgram-search {
height: 43px;
border: 3px solid var(--oa-white);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 13px;
}

.oa-airgram-search b {
color: var(--oa-white);
font-size: 31px;
line-height: 1;
font-weight: normal;
}

.oa-airgram-username {
color: var(--oa-white);
font-size: 29px;
line-height: 1;
font-weight: bold;
text-align: right;
letter-spacing: 1px;
}

.oa-airgram-topava {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: var(--oa-light);
border: 2px solid rgba(255,255,255,.9);
}

.oa-airgram-topava img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* ОБЩАЯ СЕТКА */

.oa-airgram-layout {
display: grid;
grid-template-columns: 305px 1fr;
gap: 22px;
}

/* ЛЕВАЯ КОЛОНКА */

.oa-airgram-left {
position: relative;
}

.oa-airgram-mini-profile {
position: relative;
z-index: 3;
width: 250px;
margin: 0 auto 58px;
padding: 22px 18px 16px;
border-radius: 0 0 30px 30px;
background: rgba(255,255,255,.88);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.08),
0 12px 25px var(--oa-shadow);
text-align: center;
}

.oa-airgram-mini-ava {
width: 74px;
height: 74px;
margin: 0 auto 10px;
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(255,255,255,.95);
background: var(--oa-soft);
box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.oa-airgram-mini-ava img {
width: 100%;
height: 100%;
object-fit: cover;
}

.oa-airgram-mini-name b {
display: block;
color: var(--oa-dark);
font-size: 19px;
line-height: 1;
}

.oa-airgram-mini-name span {
display: block;
margin-top: 4px;
color: var(--oa-muted);
font-size: 12px;
}

.oa-airgram-mini-buttons {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 12px;
}

.oa-airgram-mini-buttons em {
padding: 6px 12px;
border-radius: 999px;
background: var(--oa-dark);
color: var(--oa-white);
font-style: normal;
font-size: 10px;
line-height: 1;
}

.oa-airgram-mini-edit {
position: absolute;
left: 0;
right: 0;
bottom: -34px;
color: var(--oa-muted);
font-size: 9px;
line-height: 1.35;
}

/* БОЛЬШОЙ ЛЕВЫЙ БЛОК */

.oa-airgram-playlist {
min-height: 600px;
padding: 58px 30px 34px;
border-radius: 30px;
background: var(--oa-dark);
color: var(--oa-white);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.12),
0 14px 30px rgba(0,0,0,.18);
}

.oa-airgram-play-ava {
width: 128px;
height: 128px;
margin: 0 auto 58px;
border-radius: 50%;
overflow: hidden;
border: 5px solid var(--oa-white);
box-shadow: 0 12px 25px rgba(0,0,0,.22);
}

.oa-airgram-play-ava img {
width: 100%;
height: 100%;
object-fit: cover;
}

.oa-airgram-play-title {
display: grid;
grid-template-columns: 34px 1fr;
gap: 14px;
align-items: center;
margin-bottom: 30px;
}

.oa-airgram-play-title i {
font-style: normal;
font-size: 28px;
}

.oa-airgram-play-title b {
font-size: 21px;
line-height: 1.08;
text-transform: lowercase;
}

.oa-airgram-menu-list {
display: grid;
gap: 16px;
}

.oa-airgram-menu-list label {
display: grid;
grid-template-columns: 42px 1fr;
gap: 13px;
align-items: center;
min-height: 70px;
padding: 10px 14px;
border-radius: 16px;
cursor: pointer;
color: var(--oa-white);
transition: .25s;
}

.oa-airgram-menu-list label i {
font-style: normal;
font-size: 25px;
text-align: center;
}

.oa-airgram-menu-list label span {
font-size: 18px;
line-height: 1.08;
font-weight: bold;
text-transform: lowercase;
}

#oa-airgram-gallery:checked ~ .oa-airgram-card .oa-airgram-menu-list label[for="oa-airgram-gallery"],
#oa-airgram-bio:checked ~ .oa-airgram-card .oa-airgram-menu-list label[for="oa-airgram-bio"],
#oa-airgram-media:checked ~ .oa-airgram-card .oa-airgram-menu-list label[for="oa-airgram-media"] {
background: var(--oa-white);
color: var(--oa-dark);
box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

/* ПРАВАЯ СТОРОНА */

.oa-airgram-right {
position: relative;
min-width: 0;
min-height: 720px;
}

.oa-airgram-subnav {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 18px 0 12px;
}

.oa-airgram-subnav span {
color: var(--oa-muted);
font-size: 11px;
text-align: center;
letter-spacing: 1px;
}

.oa-airgram-page {
display: none;
}

#oa-airgram-gallery:checked ~ .oa-airgram-card .oa-airgram-gallery-page,
#oa-airgram-bio:checked ~ .oa-airgram-card .oa-airgram-bio-page,
#oa-airgram-media:checked ~ .oa-airgram-card .oa-airgram-media-page {
display: block;
}

/* ГЛАВНАЯ СТРАНИЦА */

.oa-airgram-title {
position: relative;
min-height: 118px;
text-align: center;
}

.oa-airgram-title h2 {
margin: 0;
color: rgba(47,47,49,.42);
font-size: 72px;
line-height: .9;
font-weight: bold;
letter-spacing: -4px;
text-transform: none;
text-shadow: 7px 8px 0 rgba(0,0,0,.08);
}

.oa-airgram-title p {
margin: 8px 0 0;
color: var(--oa-muted);
font-size: 14px;
font-weight: bold;
}

.oa-airgram-title-small h2 {
font-size: 58px;
}

.oa-airgram-stories {
display: flex;
justify-content: center;
gap: 10px;
margin: -20px 0 18px;
}

.oa-airgram-stories img {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--oa-white);
box-shadow: 0 6px 12px rgba(0,0,0,.16);
}

/*
РАБОЧАЯ КАРУСЕЛЬ ИЗ ПЕРВЫХ ВАРИАНТОВ.
ТРИ КАРТОЧКИ: ЛЕВАЯ / ЦЕНТРАЛЬНАЯ / ПРАВАЯ.
ПО СТРЕЛКЕ КАРТОЧКИ ПЛАВНО ПЕРЕЕЗЖАЮТ НА НОВЫЕ МЕСТА.
*/

.oa-airgram-photozone {
position: relative;
height: 355px;
margin-bottom: 20px;
overflow: hidden;
}

/* ОДНА ФОТОКАРТОЧКА */

.oa-airgram-slide {
position: absolute;
left: 50%;
top: 18px;
width: 190px;
height: 238px;
margin-left: -95px;
overflow: hidden;
border-radius: 23px;
background: var(--oa-light);
box-shadow: 0 14px 28px rgba(0,0,0,.18);
border: 3px solid rgba(255,255,255,.86);
opacity: 0;
pointer-events: none;
transform: translateX(0) scale(.82);
transition:
transform .55s ease,
opacity .55s ease,
filter .55s ease;
filter: saturate(.9);
}

.oa-airgram-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* ОТКЛЮЧЕНИЕ АНИМАЦИИ ДЛЯ ТЕХНИЧЕСКОГО ПЕРЕНОСА КАРТОЧЕК */

.oa-airgram-slide.no-transition {
transition: none !important;
}

/* ЦЕНТРАЛЬНАЯ КАРТОЧКА */

.oa-airgram-slide.is-active {
z-index: 5;
opacity: 1;
pointer-events: auto;
transform: translateX(0) scale(1);
filter: saturate(1);
}

/* ЛЕВАЯ КАРТОЧКА */

.oa-airgram-slide.is-left {
z-index: 3;
opacity: .92;
transform: translateX(-125%) scale(.78);
}

/* ПРАВАЯ КАРТОЧКА */

.oa-airgram-slide.is-right {
z-index: 3;
opacity: .92;
transform: translateX(125%) scale(.78);
}

/* СКРЫТЫЕ КАРТОЧКИ ЗА ПРЕДЕЛАМИ КАРУСЕЛИ */

.oa-airgram-slide.is-hidden-left {
z-index: 1;
opacity: 0;
transform: translateX(-235%) scale(.72);
}

.oa-airgram-slide.is-hidden-right {
z-index: 1;
opacity: 0;
transform: translateX(235%) scale(.72);
}

/* СТРЕЛОЧКИ */

.oa-airgram-arrow {
position: absolute;
top: 112px;
z-index: 10;
width: 38px;
height: 48px;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.72);
color: var(--oa-dark);
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 38px;
line-height: 1;
cursor: pointer;
box-shadow: 0 8px 18px rgba(0,0,0,.14);
transition: .25s;
}

.oa-airgram-arrow:hover {
transform: scale(1.08);
background: rgba(255,255,255,.9);
}

.oa-airgram-arrow-left {
left: 8px;
}

.oa-airgram-arrow-right {
right: 8px;
}

/* ДЕКОРАТИВНЫЕ ПУЗЫРИ */

.oa-airgram-bubbles {
position: absolute;
left: 18px;
top: 188px;
width: 135px;
height: 95px;
pointer-events: none;
}

.oa-airgram-bubbles i {
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(47,47,49,.16);
}

.oa-airgram-bubbles i:nth-child(1) { left: 0; top: 26px; }
.oa-airgram-bubbles i:nth-child(2) { left: 42px; top: 38px; width: 39px; height: 39px; }
.oa-airgram-bubbles i:nth-child(3) { left: 96px; top: 58px; width: 29px; height: 29px; }
.oa-airgram-bubbles i:nth-child(4) { left: 8px; top: 78px; width: 27px; height: 27px; }
.oa-airgram-bubbles i:nth-child(5) { left: 82px; top: 88px; width: 16px; height: 16px; }

/* МУЗЫКАЛЬНЫЙ ПЛЕЕР ПОД КАРУСЕЛЬЮ */

.oa-airgram-player {
position: absolute;
left: 50%;
bottom: 8px;
z-index: 8;
width: 255px;
min-height: 70px;
margin-left: -127px;
display: grid;
grid-template-columns: 52px 1fr;
gap: 10px;
align-items: center;
padding: 11px 13px;
border-radius: 16px;
background: var(--oa-dark);
color: var(--oa-white);
box-shadow: 0 12px 25px rgba(0,0,0,.18);
}

.oa-airgram-player i {
height: 52px;
border-radius: 50%;
background: rgba(255,255,255,.22);
display: flex;
align-items: center;
justify-content: center;
font-style: normal;
font-size: 24px;
}

.oa-airgram-player b {
display: block;
font-size: 12px;
line-height: 1.15;
}

.oa-airgram-player span {
display: block;
margin-top: 3px;
font-size: 10px;
color: rgba(255,255,255,.72);
}

.oa-airgram-player em {
display: block;
position: relative;
height: 4px;
margin-top: 8px;
border-radius: 999px;
background: rgba(255,255,255,.38);
}

.oa-airgram-player em:after {
content: "";
position: absolute;
left: 0;
top: -3px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--oa-white);
}

/* БОЛЬШАЯ БИО-КАРТОЧКА СНИЗУ */

.oa-airgram-bio-card {
position: relative;
display: grid;
grid-template-columns: 90px 1fr;
gap: 16px;
align-items: start;
width: 86%;
margin: 0 auto;
padding: 24px 32px 22px;
border-radius: 50px;
border: 8px solid var(--oa-dark);
background: rgba(255,255,255,.88);
box-shadow: 0 14px 28px var(--oa-shadow);
}

.oa-airgram-bio-ava {
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--oa-white);
box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.oa-airgram-bio-ava img {
width: 100%;
height: 100%;
object-fit: cover;
}

.oa-airgram-bio-content h3 {
margin: 0;
color: rgba(47,47,49,.55);
font-size: 43px;
line-height: .9;
letter-spacing: -2px;
}

.oa-airgram-bio-buttons {
display: flex;
gap: 8px;
margin: 8px 0 10px;
}

.oa-airgram-bio-buttons span {
padding: 7px 12px;
border-radius: 999px;
background: var(--oa-dark);
color: var(--oa-white);
font-size: 10px;
}

.oa-airgram-bio-content p {
margin: 0;
color: var(--oa-muted);
font-size: 11px;
line-height: 1.45;
}

.oa-airgram-decor-card {
position: absolute;
right: -34px;
top: 58px;
width: 74px;
height: 58px;
background: rgba(47,47,49,.16);
clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 50%);
}

.oa-airgram-decor-card:after {
content: "";
position: absolute;
right: 22px;
top: 17px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--oa-white);
}

/* ЗАМЕТКИ */

.oa-airgram-notes,
.oa-airgram-media-list {
max-height: 540px;
overflow-y: auto;
padding-right: 8px;
}

.oa-airgram-notes::-webkit-scrollbar,
.oa-airgram-media-list::-webkit-scrollbar {
width: 6px;
}

.oa-airgram-notes::-webkit-scrollbar-track,
.oa-airgram-media-list::-webkit-scrollbar-track {
background: transparent;
}

.oa-airgram-notes::-webkit-scrollbar-thumb,
.oa-airgram-media-list::-webkit-scrollbar-thumb {
background: var(--oa-scroll);
border-radius: 20px;
}

.oa-airgram-note {
margin-bottom: 14px;
padding: 18px;
border-radius: 26px;
background: rgba(255,255,255,.88);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.06),
0 12px 25px var(--oa-shadow);
}

.oa-airgram-note:nth-child(even) {
margin-left: 40px;
}

.oa-airgram-note:nth-child(odd) {
margin-right: 40px;
}

.oa-airgram-note span {
display: inline-block;
margin-bottom: 9px;
padding: 7px 12px;
border-radius: 999px;
background: var(--oa-dark);
color: var(--oa-white);
font-size: 10px;
}

.oa-airgram-note p {
margin: 0;
color: var(--oa-muted);
font-size: 13px;
line-height: 1.55;
}

/* MEDIA */

.oa-airgram-media-card,
.oa-airgram-embed {
margin-bottom: 14px;
padding: 16px;
border-radius: 28px;
background: rgba(255,255,255,.88);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.06),
0 12px 25px var(--oa-shadow);
}

.oa-airgram-media-card {
display: grid;
grid-template-columns: 110px 1fr;
gap: 16px;
align-items: center;
}

.oa-airgram-media-cover {
width: 110px;
height: 110px;
border-radius: 24px;
overflow: hidden;
background: var(--oa-soft);
box-shadow: 0 10px 20px rgba(0,0,0,.14);
}

.oa-airgram-media-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}

.oa-airgram-media-info span {
display: block;
margin-bottom: 6px;
color: var(--oa-overline);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}

.oa-airgram-media-info h3,
.oa-airgram-embed h3 {
margin: 0 0 8px;
color: var(--oa-text);
font-size: 22px;
line-height: 1;
text-transform: lowercase;
}

.oa-airgram-media-info p,
.oa-airgram-embed p {
margin: 0 0 10px;
color: var(--oa-muted);
font-size: 13px;
line-height: 1.45;
}

.oa-airgram-media-info a {
display: inline-block;
padding: 8px 13px;
border-radius: 999px;
background: var(--oa-dark);
color: var(--oa-white);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
}

/* АДАПТИВ */

@media (max-width: 820px) {
.oa-airgram-topbar {
grid-template-columns: 48px 1fr 48px;
}

.oa-airgram-username {
display: none;
}

.oa-airgram-layout {
display: block;
}

.oa-airgram-left {
margin-bottom: 20px;
}

.oa-airgram-playlist {
min-height: 0;
}

.oa-airgram-right {
min-height: 0;
}

.oa-airgram-title h2 {
font-size: 52px;
}
}

@media (max-width: 620px) {
.oa-airgram {
max-width: calc(100vw - 12px);
margin: 16px auto;
}

.oa-airgram-card {
padding: 14px;
border-radius: 26px;
}

.oa-airgram-mini-profile {
width: 100%;
}

.oa-airgram-subnav {
grid-template-columns: repeat(2, 1fr);
}

.oa-airgram-photozone {
height: auto;
min-height: 420px;
display: block;
overflow: visible;
padding-bottom: 88px;
}

.oa-airgram-slide {
top: 0;
width: 100%;
height: 310px;
margin-left: -50%;
border-radius: 24px;
}

.oa-airgram-slide.is-active {
transform: translateX(0) scale(1);
}

.oa-airgram-slide.is-left,
.oa-airgram-slide.is-hidden-left {
opacity: 0;
transform: translateX(-120%) scale(.92);
}

.oa-airgram-slide.is-right,
.oa-airgram-slide.is-hidden-right {
opacity: 0;
transform: translateX(120%) scale(.92);
}

.oa-airgram-arrow {
top: 126px;
width: 44px;
height: 56px;
border-radius: 999px;
background: rgba(255,255,255,.78);
box-shadow: 0 8px 18px rgba(0,0,0,.16);
}

.oa-airgram-arrow-left {
left: 10px;
}

.oa-airgram-arrow-right {
right: 10px;
}

.oa-airgram-bubbles {
display: none;
}

.oa-airgram-player {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
min-height: 72px;
margin-left: 0;
}

.oa-airgram-bio-card {
width: 100%;
grid-template-columns: 1fr;
border-width: 5px;
border-radius: 30px;
}

.oa-airgram-decor-card {
display: none;
}

.oa-airgram-media-card {
grid-template-columns: 1fr;
}

.oa-airgram-media-cover {
width: 100%;
height: 170px;
}

.oa-airgram-note:nth-child(even),
.oa-airgram-note:nth-child(odd) {
margin-left: 0;
margin-right: 0;
}
}

@media (max-width: 420px) {
.oa-airgram-title h2 {
font-size: 39px;
letter-spacing: -2px;
}

.oa-airgram-play-title b,
.oa-airgram-menu-list label span {
font-size: 18px;
}

.oa-airgram-menu-list label {
grid-template-columns: 42px 1fr;
}
}
</style>

roots.forEach(function(root) {
var carousel = root.querySelector('[data-airgram-carousel]');
if (!carousel) return;

var slides = Array.prototype.slice.call(carousel.querySelectorAll('.oa-airgram-slide'));
var prev = carousel.querySelector('[data-airgram-prev]');
var next = carousel.querySelector('[data-airgram-next]');
var current = 0;
var locked = false;

function clean(slide) {
slide.classList.remove('is-active');
slide.classList.remove('is-left');
slide.classList.remove('is-right');
slide.classList.remove('is-hidden-left');
slide.classList.remove('is-hidden-right');
slide.classList.remove('no-transition');
}

function setPosition(slide, position, noTransition) {
clean(slide);

if (noTransition) {
slide.classList.add('no-transition');
}

slide.classList.add(position);
}

function forceReflow(slide) {
return slide.offsetHeight;
}

function renderStatic() {
var total = slides.length;

slides.forEach(function(slide) {
setPosition(slide, 'is-hidden-right', true);
});

if (!total) return;

var leftIndex = (current - 1 + total) % total;
var rightIndex = (current + 1) % total;

setPosition(slides[current], 'is-active', true);

if (total > 1) {
setPosition(slides[leftIndex], 'is-left', true);
setPosition(slides[rightIndex], 'is-right', true);
}

slides.forEach(function(slide) {
forceReflow(slide);
slide.classList.remove('no-transition');
});
}

function move(direction) {
if (locked || slides.length <= 1) return;

locked = true;

var total = slides.length;
var oldCurrent = current;
var newCurrent = direction === 'next'
? (current + 1) % total
: (current - 1 + total) % total;

var oldLeft = (current - 1 + total) % total;
var oldRight = (current + 1) % total;

var newLeft = (newCurrent - 1 + total) % total;
var newRight = (newCurrent + 1) % total;

if (direction === 'next') {
setPosition(slides[newRight], 'is-hidden-right', true);
forceReflow(slides[newRight]);
slides[newRight].classList.remove('no-transition');
} else {
setPosition(slides[newLeft], 'is-hidden-left', true);
forceReflow(slides[newLeft]);
slides[newLeft].classList.remove('no-transition');
}

slides.forEach(function(slide, index) {
if (direction === 'next' && index === newRight) return;
if (direction === 'prev' && index === newLeft) return;

if (index !== oldCurrent && index !== oldLeft && index !== oldRight && index !== newCurrent) {
setPosition(slide, direction === 'next' ? 'is-hidden-left' : 'is-hidden-right');
}
});

setPosition(slides[oldCurrent], direction === 'next' ? 'is-left' : 'is-right');
setPosition(slides[newCurrent], 'is-active');

setPosition(slides[newLeft], 'is-left');
setPosition(slides[newRight], 'is-right');

current = newCurrent;

window.setTimeout(function() {
locked = false;
}, 560);
}

if (prev) {
prev.addEventListener('click', function(event) {
event.preventDefault();
move('prev');
});
}

if (next) {
next.addEventListener('click', function(event) {
event.preventDefault();
move('next');
});
}

renderStatic();
});
})();
</script>

[/html]
[/hideprofile]

yanichegoneznayu

Меню навигации

Пользовательские ссылки

Информация о пользователе

ебучий случай или твой любимый блог о твоей самой интересной жизни

Сообщений 1 страница 2 из 2

Поделиться12026-07-13 21:06:28

Поделиться22026-07-13 21:06:40