Files
main-site/theme/static_src/src/input.css
codex_a 1c7b96f723
Some checks failed
CI / nightly-e2e (pull_request) Has been skipped
CI / deploy (pull_request) Has been skipped
CI / ci (pull_request) Successful in 1m24s
CI / pr-e2e (pull_request) Failing after 3m21s
feat: implement Tailwind CSS styling based on wireframe design
- 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>
2026-03-01 10:02:23 +00:00

41 lines
889 B
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.bg-grid-pattern {
background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
background-size: 24px 24px;
}
.dark .bg-grid-pattern {
background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}
.text-gradient {
background: linear-gradient(135deg, #06b6d4, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
}
::selection {
background-color: #ec4899;
color: #ffffff;
}
pre {
scrollbar-width: thin;
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}
pre::-webkit-scrollbar {
height: 6px;
}
pre::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
body {
transition: background-color 0.3s ease, color 0.3s ease;
}