1
0
Fork 0
forked from github/pelican
pelican-theme/tailwind.config.js

126 lines
4.4 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./templates/*.html"],
plugins: [require("@tailwindcss/typography")],
variants: {
typography: ["dark"],
},
theme: {
fontFamily: {
texts: ["Erode", "serif"],
headings: ["Fira Sans", "sans-serif"],
},
extend: {
// NOTE: this is for non-prose (so not Markdown rendered with typography plugin)
colors: {
// https://rosepinetheme.com/palette/
"rp-dawn-base": "#faf4ed", // main background
"rp-dawn-surface": "#fffaf3", // navigation background
"rp-dawn-overlay": "#f2e9e1", // content background
"rp-dawn-muted": "#9893a5",
"rp-dawn-subtle": "#797593",
"rp-dawn-text": "#575279", // text
"rp-dawn-love": "#b4637a",
"rp-dawn-gold": "#ea9d34",
"rp-dawn-rose": "#d7827e",
"rp-dawn-pine": "#286983",
"rp-dawn-foam": "#56949f", // main site title
"rp-dawn-iris": "#907aa9", // links
"rp-dawn-highlight-low": "#f4ede8",
"rp-dawn-highlight-med": "#dfdad9", // footer
"rp-dawn-highlight-high": "#cecacd",
"rp-moon-base": "#232136", // main background
"rp-moon-surface": "#2a273f", // navigation background
"rp-moon-overlay": "#393552", // content background
"rp-moon-muted": "#6e6a86",
"rp-moon-subtle": "#908caa",
"rp-moon-text": "#e0def4",
"rp-moon-love": "#eb6f92",
"rp-moon-gold": "#f6c177",
"rp-moon-rose": "#ea9a97",
"rp-moon-pine": "#3e8fb0",
"rp-moon-foam": "#9ccfd8", // main site title
"rp-moon-iris": "#c4a7e7", // text,
"rp-moon-highlight-low": "#2a283e",
"rp-moon-highlight-med": "#44415a", // footer
"rp-moon-highlight-high": "#56526e",
},
typography: (theme) => ({
// NOTE: This is for prose (Markdown) in LIGHT mode
DEFAULT: {
css: {
maxWidth: "80ch",
pre: null,
code: null,
"code::before": null,
"code::after": null,
"pre code": null,
"pre code::before": null,
"pre code::after": null,
// remove backticks from typography for inline code
"code::before": {
content: '""',
},
"code::after": {
content: '""',
},
color: theme("colors.rp-dawn-text"), // main text
a: {
color: theme("colors.rp-dawn-text"), // align w/ in.css
"text-decoration-color": theme("colors.rp-dawn-gold"), // align w/ in.css
"text-decoration-thickness": "2px", // align w/ in.css
},
"h1, h2, h3, h4, h5, h6": {
color: theme("colors.rp-dawn-text"),
},
blockquote: {
"border-color": theme("colors.rp-dawn-muted"),
"background-color": theme("colors.rp-dawn-overlay"),
color: theme("colors.rp-dawn-text"),
},
strong: {
color: theme("colors.rp-dawn-text"), // align w/ main text color
fontWeight: "800",
},
th: {
color: theme("colors.rp-dawn-text"),
},
},
},
// NOTE: This is for prose (Markdown) in DARK mode
dark: {
css: {
pre: null,
code: null,
"pre code": null,
color: theme("colors.rp-moon-iris"), // main text
a: {
color: theme("colors.rp-moon-iris"), // align w/ in.css
"text-decoration-color": theme("colors.rp-moon-pine"), // align w/ in.css
"text-decoration-thickness": "2px", // align w/ in.css
},
"h1, h2, h3, h4, h5, h6": {
color: theme("colors.rp-moon-love"),
},
blockquote: {
"border-color": theme("colors.rp-moon-overlay"),
"background-color": theme("colors.rp-moon-surface"),
color: theme("colors.rp-moon-text"),
},
strong: {
color: theme("colors.rp-moon-iris"), // align w/ main text color
fontWeight: "800",
},
th: {
color: theme("colors.rp-moon-iris"),
},
},
},
}),
},
},
corePlugins: {
// preflight: false,
divideStyle: true,
},
};