1c7b96f723
- Add brand colours, fonts (Space Grotesk/Inter/Fira Code), box shadows to tailwind.config.js - Add bg-grid-pattern, text-gradient, scrollbar, selection styles to input.css - Add Google Fonts link and dark-mode body classes to base.html - Style nav, footer, cookie banner, newsletter form components - Style homepage: featured article, 12-col editorial grid, sidebar widgets - Style article list: header, tag filters, horizontal article cards, pagination - Style article page: hero header, prose body, share sidebar, related cards, comments - Style code blocks and callout blocks - CSS output grows from 4.8KB to 24KB with all brand utilities compiled Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
21 lines
2.1 KiB
HTML
21 lines
2.1 KiB
HTML
<div class="bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 p-6 my-8 flex items-start gap-4
|
|
{% if value.icon == 'warning' %}border-l-4 border-l-yellow-400{% elif value.icon == 'error' %}border-l-4 border-l-red-500{% elif value.icon == 'success' %}border-l-4 border-l-green-500{% else %}border-l-4 border-l-brand-cyan{% endif %}">
|
|
<div class="shrink-0 mt-0.5">
|
|
{% if value.icon == 'warning' %}
|
|
<svg class="w-6 h-6 text-yellow-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>
|
|
{% elif value.icon == 'error' %}
|
|
<svg class="w-6 h-6 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>
|
|
{% elif value.icon == 'success' %}
|
|
<svg class="w-6 h-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
|
|
{% else %}
|
|
<svg class="w-6 h-6 text-brand-cyan" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>
|
|
{% endif %}
|
|
</div>
|
|
<div class="min-w-0">
|
|
{% if value.heading %}
|
|
<h4 class="font-display font-bold text-lg mb-2">{{ value.heading }}</h4>
|
|
{% endif %}
|
|
<div class="text-zinc-700 dark:text-zinc-300 text-sm leading-relaxed">{{ value.body }}</div>
|
|
</div>
|
|
</div>
|