|
|
@@ -29,9 +29,7 @@ const fmt = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "long", ho
|
|
|
{telegramNews.map((post) => (
|
|
|
<div class="tg-bubble relative ml-3 block rounded-xl bg-white px-3 py-2.5 shadow-[0_1px_1px_rgba(16,35,47,0.14)]">
|
|
|
{post.photo && (
|
|
|
- <a href={post.link} target="_blank" rel="noopener" class="block">
|
|
|
- <img src={post.photo} alt="" class="mb-2 w-full rounded-lg" loading="lazy" />
|
|
|
- </a>
|
|
|
+ <img src={post.photo} alt="" class="mb-2 w-full rounded-lg" loading="lazy" />
|
|
|
)}
|
|
|
{post.video && (
|
|
|
<span class="mb-2 flex aspect-video w-full items-center justify-center gap-2 rounded-lg bg-night-950/90 text-sm font-medium text-white">
|
|
|
@@ -42,9 +40,9 @@ const fmt = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "long", ho
|
|
|
</span>
|
|
|
)}
|
|
|
{post.text && (
|
|
|
- <p class="text-[13px] leading-snug text-night-950 [&_a]:break-words [&_a]:text-[#2AABEE]">
|
|
|
+ <div class="text-[13px] leading-snug text-night-950 [&_a]:break-words [&_a]:text-[#2AABEE]">
|
|
|
<Fragment set:html={post.text} />
|
|
|
- </p>
|
|
|
+ </div>
|
|
|
)}
|
|
|
{!post.text && !(post.photo || post.video) && <p class="text-[13px] text-slate-500">Фото</p>}
|
|
|
<a
|
|
|
@@ -106,6 +104,13 @@ const fmt = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "long", ho
|
|
|
clip-path: path("M12 0 C 6 2, 0 8, 0 16 L 12 16 Z");
|
|
|
}
|
|
|
|
|
|
+ /* Telegram-style expandable quote inside posts (injected via set:html — needs :global) */
|
|
|
+ .tg-bubble :global(blockquote) {
|
|
|
+ margin: 4px 0;
|
|
|
+ padding: 2px 0 2px 10px;
|
|
|
+ border-left: 3px solid #2aabee;
|
|
|
+ }
|
|
|
+
|
|
|
/* Entrance (transform only — opacity animations get stuck translucent in some compositors) */
|
|
|
.tg-window {
|
|
|
animation: tg-rise 0.45s ease-out both;
|
xander