You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.7 KiB
89 lines
2.7 KiB
const { blogConfig } = require('./config/index.js');
|
|
const defaultTheme = require('tailwindcss/defaultTheme');
|
|
const colors = require('tailwindcss/colors');
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
|
|
|
// enable dark mode
|
|
darkMode: 'class',
|
|
|
|
plugins: [
|
|
// used for markdown prose styling; see components/mdx-content.tsx
|
|
require('@tailwindcss/typography'),
|
|
],
|
|
|
|
theme: {
|
|
screens: {
|
|
xs: '475px',
|
|
...defaultTheme.screens,
|
|
},
|
|
extend: {
|
|
colors: {
|
|
// theme colors; edit in config/index.js
|
|
accent: {
|
|
DEFAULT: blogConfig.theme?.accentColor?.light || colors.rose[700],
|
|
dark: blogConfig.theme?.accentColor?.dark || colors.rose[300],
|
|
},
|
|
},
|
|
fontFamily: {
|
|
// uses next/font; see app/layout.tsx
|
|
sans: ['var(--font-red-hat)'],
|
|
//serif: ['var(--font-newsreader)'],
|
|
serif: ['var(--font-arial)'],
|
|
},
|
|
gridTemplateRows: {
|
|
// main layout grid rows (header, main, footer)
|
|
// see app/layout.tsx
|
|
layout: '6rem minmax(calc(100vh - 16rem), 1fr) 10rem',
|
|
},
|
|
gridTemplateColumns: {
|
|
// main layout grid columns (left column, main, right column)
|
|
// see app/layout.tsx
|
|
layout: '1fr minmax(640px, 800px) 1fr',
|
|
},
|
|
animation: {
|
|
// border animation used in components/post-card.tsx
|
|
border: 'show-border 0.5s ease-in-out forwards',
|
|
'border-fast': 'show-border 0.25s ease-in-out forwards',
|
|
// wave animation used in components/hero-section.tsx
|
|
wave: 'wave 2.5s ease-in-out forwards',
|
|
},
|
|
keyframes: {
|
|
'show-border': {
|
|
'0%': {
|
|
zIndex: 20,
|
|
width: '1rem',
|
|
height: 'calc(100% - 1rem)',
|
|
borderRadius: '0.4rem 0 0 0.4rem',
|
|
},
|
|
'20%': {
|
|
zIndex: 0,
|
|
width: 0,
|
|
height: '100%',
|
|
borderRadius: '0.4rem 0 0 0.4rem',
|
|
},
|
|
'100%': {
|
|
zIndex: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
borderRadius: '0.4rem 0.4rem 0.4rem 0.4rem',
|
|
},
|
|
},
|
|
wave: {
|
|
'0%': { transform: 'rotate(0.0deg)' },
|
|
'10%': { transform: 'rotate(-10.0deg)' },
|
|
'20%': { transform: 'rotate( 12.0deg)' },
|
|
'30%': { transform: 'rotate(-10.0deg)' },
|
|
'40%': { transform: 'rotate(9.0deg)' },
|
|
'50%': { transform: 'rotate(0.0deg)' },
|
|
'100%': { transform: 'rotate(0.0deg)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
// these classes are added conditinally so they need to be whitelisted
|
|
safelist: [{ pattern: /prose-(sm|base|lg|xl|2xl)/ }],
|
|
};
|
|
|