- 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>
20 lines
890 B
HTML
20 lines
890 B
HTML
{% load wagtailcore_tags %}
|
|
<div class="my-8 overflow-hidden bg-[#0d1117] border border-zinc-800 shadow-xl">
|
|
<div class="flex items-center justify-between px-4 py-2 bg-[#161b22] border-b border-zinc-800">
|
|
<div class="flex gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
|
</div>
|
|
{% if value.filename %}
|
|
<div class="font-mono text-xs text-zinc-500">{{ value.filename }}</div>
|
|
{% else %}
|
|
<div class="font-mono text-xs text-zinc-500">{{ value.language }}</div>
|
|
{% endif %}
|
|
<div class="w-8"></div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<pre data-lang="{{ value.language }}" class="p-6 text-sm"><code class="language-{{ value.language }} font-mono text-zinc-300">{{ value.raw_code }}</code></pre>
|
|
</div>
|
|
</div>
|