mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-14 05:06:16 -08:00
4grayandClaude Fable 5.1
1cf17f7301
* style(website): solid hairlines, Bricolage Grotesque display face, drop TV effects First of three landing redesign PRs. This one only touches tokens and surface treatment so every page (home, blog, /features, /compare, /download) benefits without any structural change: - Replace every dashed border with a solid hairline; `.card-dotted` becomes `.card-panel` (bg step + hairline, lighter hairline on hover) and the section divider is solid `surface-800`. - Swap the display face from Playfair Display to Bricolage Grotesque (DM Sans body and IBM Plex Mono unchanged). The italic accent word that every heading repeated is gone; only page-level h1s keep the accent, and as colour rather than italic. - Remove the CRT/TV effects: the `.btn-tv` block and its nine keyframes, the scanline overlay on the hero screenshot, the CRT hover overlay and teal glow shadows on feature cards, the pulsing mascot, and the unused scan/tv-* Tailwind animations. - The hero download button and the header Download link are now solid accent buttons; the self-host link is a plain text link. - Blog tag chips use neutral surface borders so teal stays reserved for actions. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * style(website): finish the dashed sweep in prose and package rows The blanket `border-dashed ` removal ate the utility but not the variant prefix in the blog prose classes, leaving `prose-pre:prose-pre:...` and `prose-hr:prose-hr:...`; and the Linux package rows still used `divide-dashed`. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> --------- Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
44 lines
1.5 KiB
Plaintext
44 lines
1.5 KiB
Plaintext
---
|
|
interface Props {
|
|
command: string;
|
|
title?: string;
|
|
}
|
|
|
|
const { command, title = 'Command' } = Astro.props;
|
|
---
|
|
|
|
<div class="not-prose my-6 rounded-xl border border-surface-700/70 bg-surface-900/55 p-3">
|
|
<div class="mb-2 flex items-center justify-between">
|
|
<span class="font-mono text-[10px] uppercase tracking-[0.12em] text-surface-500">{title}</span>
|
|
<button class="copy-command-btn rounded-md border border-surface-700/70 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.08em] text-surface-400 transition-colors hover:text-accent-300" data-command={command}>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
<code class="block overflow-x-auto rounded-md bg-surface-950/70 px-3 py-2 font-mono text-sm text-accent-200">{command}</code>
|
|
</div>
|
|
|
|
<script>
|
|
const initCopyButtons = () => {
|
|
document.querySelectorAll('.copy-command-btn').forEach((btn) => {
|
|
if (btn.getAttribute('data-bound') === 'true') return;
|
|
btn.setAttribute('data-bound', 'true');
|
|
btn.addEventListener('click', async () => {
|
|
const cmd = btn.getAttribute('data-command');
|
|
if (!cmd) return;
|
|
await navigator.clipboard.writeText(cmd);
|
|
const prev = btn.textContent;
|
|
btn.textContent = 'Copied';
|
|
setTimeout(() => {
|
|
btn.textContent = prev || 'Copy';
|
|
}, 1400);
|
|
});
|
|
});
|
|
};
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initCopyButtons);
|
|
} else {
|
|
initCopyButtons();
|
|
}
|
|
</script>
|