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>
This commit is contained in:
@@ -1,10 +1,34 @@
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
"../../templates/**/*.html",
|
||||
"../../apps/**/templates/**/*.html"
|
||||
"../../apps/**/templates/**/*.html",
|
||||
],
|
||||
theme: {
|
||||
extend: {}
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'sans-serif'],
|
||||
display: ['Space Grotesk', 'sans-serif'],
|
||||
mono: ['Fira Code', 'monospace'],
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
cyan: '#06b6d4',
|
||||
cyanGlow: 'rgba(6,182,212,0.4)',
|
||||
pink: '#ec4899',
|
||||
dark: '#09090b',
|
||||
light: '#fafafa',
|
||||
surfaceDark: '#18181b',
|
||||
surfaceLight: '#ffffff',
|
||||
},
|
||||
},
|
||||
boxShadow: {
|
||||
'neon-cyan': '0 0 20px rgba(6, 182, 212, 0.3)',
|
||||
'neon-pink': '0 0 20px rgba(236, 72, 153, 0.3)',
|
||||
'solid-dark': '6px 6px 0px 0px #09090b',
|
||||
'solid-light': '6px 6px 0px 0px #e4e4e7',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: []
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user