tailwind.config.js

const plugin = require("tailwindcss/plugin")

module.exports = {
	purge: [
		"./src/**/*.svelte",
		"./src/template-master.html",
		"./blogdata/*.json"
	],
	target: "relaxed",
	prefix: "",
	important: false,
	separator: ":",
	theme: {
		screens: {
			sm: "640px",
			md: "768px",
			lg: "1024px",
			xl: "1280px"
		},
		colors: {
			transparent: "transparent",
			current: "currentColor",

			black: "#000",
			white: "#fff",

			shadow: {
				"25": "rgba(0,0,0,0.25)",
				"75": "rgba(0,0,0,0.75)",
				default: "rgba(0,0,0,0.5)"
			},

			gray: {
				100: "#f7fafc",
				200: "#edf2f7",
				300: "#e2e8f0",
				400: "#cbd5e0",
				500: "#a0aec0",
				600: "#718096",
				700: "#4a5568",
				800: "#2d3748",
				900: "#1a202c"
			},
			red: {
				100: "#fff5f5",
				200: "#fed7d7",
				300: "#feb2b2",
				400: "#fc8181",
				500: "#f56565",
				600: "#e53e3e",
				700: "#c53030",
				800: "#9b2c2c",
				900: "#742a2a"
			},
			orange: {
				100: "#fffaf0",
				200: "#feebc8",
				300: "#fbd38d",
				400: "#f6ad55",
				500: "#ed8936",
				600: "#dd6b20",
				700: "#c05621",
				800: "#9c4221",
				900: "#7b341e"
			},
			yellow: {
				100: "#fffff0",
				200: "#fefcbf",
				300: "#faf089",
				400: "#f6e05e",
				500: "#ecc94b",
				600: "#d69e2e",
				700: "#b7791f",
				800: "#975a16",
				900: "#744210"
			},
			green: {
				100: "#f0fff4",
				200: "#c6f6d5",
				300: "#9ae6b4",
				400: "#68d391",
				500: "#48bb78",
				600: "#38a169",
				700: "#2f855a",
				800: "#276749",
				900: "#22543d"
			},
			teal: {
				100: "#e6fffa",
				200: "#b2f5ea",
				300: "#81e6d9",
				400: "#4fd1c5",
				500: "#38b2ac",
				600: "#319795",
				700: "#2c7a7b",
				800: "#285e61",
				900: "#234e52"
			},
			blue: {
				100: "#ebf8ff",
				200: "#bee3f8",
				300: "#90cdf4",
				400: "#63b3ed",
				500: "#4299e1",
				600: "#3182ce",
				700: "#2b6cb0",
				800: "#2c5282",
				900: "#2a4365"
			},
			indigo: {
				100: "#ebf4ff",
				200: "#c3dafe",
				300: "#a3bffa",
				400: "#7f9cf5",
				500: "#667eea",
				600: "#5a67d8",
				700: "#4c51bf",
				800: "#434190",
				900: "#3c366b"
			},
			purple: {
				100: "#faf5ff",
				200: "#e9d8fd",
				300: "#d6bcfa",
				400: "#b794f4",
				500: "#9f7aea",
				600: "#805ad5",
				700: "#6b46c1",
				800: "#553c9a",
				900: "#44337a"
			},
			pink: {
				100: "#fff5f7",
				200: "#fed7e2",
				300: "#fbb6ce",
				400: "#f687b3",
				500: "#ed64a6",
				600: "#d53f8c",
				700: "#b83280",
				800: "#97266d",
				900: "#702459"
			}
		},
		spacing: {
			px: "1px",
			"0": "0",
			"1": "0.25rem",
			"2": "0.5rem",
			"3": "0.75rem",
			"4": "1rem",
			"5": "1.25rem",
			"6": "1.5rem",
			"8": "2rem",
			"10": "2.5rem",
			"12": "3rem",
			"16": "4rem",
			"20": "5rem",
			"24": "6rem",
			"32": "8rem",
			"40": "10rem",
			"48": "12rem",
			"56": "14rem",
			"64": "16rem"
		},
		backgroundColor: theme => theme("colors"),
		backgroundOpacity: theme => theme("opacity"),
		backgroundPosition: {
			bottom: "bottom",
			center: "center",
			left: "left",
			"left-bottom": "left bottom",
			"left-top": "left top",
			right: "right",
			"right-bottom": "right bottom",
			"right-top": "right top",
			top: "top"
		},
		backgroundSize: {
			auto: "auto",
			cover: "cover",
			contain: "contain"
		},
		borderColor: theme => ({
			...theme("colors"),
			default: theme("colors.gray.300", "currentColor")
		}),
		borderOpacity: theme => theme("opacity"),
		borderRadius: {
			none: "0",
			sm: "0.125rem",
			default: "0.25rem",
			md: "0.375rem",
			lg: "0.5rem",
			full: "9999px"
		},
		borderWidth: {
			default: "1px",
			"0": "0",
			"2": "2px",
			"3": "3px",
			"4": "4px",
			"6": "6px",
			"8": "8px"
		},
		boxShadow: {
			xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
			sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
			default:
				"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
			md:
				"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
			lg:
				"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
			xl:
				"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
			"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
			inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
			outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
			none: "none"
		},
		container: {},
		cursor: {
			auto: "auto",
			default: "default",
			pointer: "pointer",
			wait: "wait",
			text: "text",
			move: "move",
			"not-allowed": "not-allowed"
		},
		divideColor: theme => theme("borderColor"),
		divideOpacity: theme => theme("borderOpacity"),
		divideWidth: theme => theme("borderWidth"),
		fill: {
			current: "currentColor"
		},
		flex: {
			"1": "1 1 0%",
			auto: "1 1 auto",
			initial: "0 1 auto",
			none: "none"
		},
		flexGrow: {
			"0": "0",
			default: "1"
		},
		flexShrink: {
			"0": "0",
			default: "1"
		},
		fontFamily: {
			sans: [
				"system-ui",
				"-apple-system",
				"BlinkMacSystemFont",
				'"Segoe UI"',
				"Roboto",
				'"Helvetica Neue"',
				"Arial",
				'"Noto Sans"',
				"sans-serif",
				'"Apple Color Emoji"',
				'"Segoe UI Emoji"',
				'"Segoe UI Symbol"',
				'"Noto Color Emoji"'
			],
			serif: [
				"Georgia",
				"Cambria",
				'"Times New Roman"',
				"Times",
				"serif"
			],
			mono: [
				"Menlo",
				"Monaco",
				"Consolas",
				'"Liberation Mono"',
				'"Courier New"',
				"monospace"
			]
		},
		fontSize: {
			xs: "0.75rem",
			sm: "0.875rem",
			base: "1rem",
			lg: "1.125rem",
			xl: "1.25rem",
			"2xl": "1.5rem",
			"3xl": "1.875rem",
			"4xl": "2.25rem",
			"5xl": "3rem",
			"6xl": "4rem"
		},
		fontWeight: {
			hairline: "100",
			thin: "200",
			light: "300",
			normal: "400",
			medium: "500",
			semibold: "600",
			bold: "700",
			extrabold: "800",
			black: "900"
		},
		height: theme => ({
			auto: "auto",
			...theme("spacing"),
			full: "100%",
			screen: "100vh"
		}),
		inset: {
			"0": "0",
			auto: "auto"
		},
		letterSpacing: {
			tighter: "-0.05em",
			tight: "-0.025em",
			normal: "0",
			wide: "0.025em",
			wider: "0.05em",
			widest: "0.1em"
		},
		lineHeight: {
			none: "1",
			tight: "1.25",
			snug: "1.375",
			normal: "1.5",
			relaxed: "1.625",
			loose: "2",
			"3": ".75rem",
			"4": "1rem",
			"5": "1.25rem",
			"6": "1.5rem",
			"7": "1.75rem",
			"8": "2rem",
			"9": "2.25rem",
			"10": "2.5rem"
		},
		listStyleType: {
			none: "none",
			disc: "disc",
			decimal: "decimal"
		},
		margin: (theme, { negative }) => ({
			auto: "auto",
			...theme("spacing"),
			...negative(theme("spacing"))
		}),
		maxHeight: {
			full: "100%",
			screen: "100vh"
		},
		maxWidth: (theme, { breakpoints }) => ({
			none: "none",
			xs: "20rem",
			sm: "24rem",
			md: "28rem",
			lg: "32rem",
			xl: "36rem",
			"2xl": "42rem",
			"3xl": "48rem",
			"4xl": "56rem",
			"5xl": "64rem",
			"6xl": "72rem",
			"1k": "1000px",
			full: "100%",
			...breakpoints(theme("screens"))
		}),
		minHeight: {
			"0": "0",
			full: "100%",
			screen: "100vh"
		},
		minWidth: {
			"0": "0",
			full: "100%"
		},
		objectPosition: {
			bottom: "bottom",
			center: "center",
			left: "left",
			"left-bottom": "left bottom",
			"left-top": "left top",
			right: "right",
			"right-bottom": "right bottom",
			"right-top": "right top",
			top: "top"
		},
		opacity: {
			"0": "0",
			"25": "0.25",
			"50": "0.5",
			"75": "0.75",
			"100": "1"
		},
		order: {
			first: "-9999",
			last: "9999",
			none: "0",
			"1": "1",
			"2": "2",
			"3": "3",
			"4": "4",
			"5": "5",
			"6": "6",
			"7": "7",
			"8": "8",
			"9": "9",
			"10": "10",
			"11": "11",
			"12": "12"
		},
		padding: theme => theme("spacing"),
		placeholderColor: theme => theme("colors"),
		placeholderOpacity: theme => theme("opacity"),
		space: (theme, { negative }) => ({
			...theme("spacing"),
			...negative(theme("spacing"))
		}),
		stroke: {
			current: "currentColor"
		},
		strokeWidth: {
			"0": "0",
			"1": "1",
			"2": "2"
		},
		textColor: theme => theme("colors"),
		textOpacity: theme => theme("opacity"),
		width: theme => ({
			auto: "auto",
			...theme("spacing"),
			"1/2": "50%",
			"1/3": "33.333333%",
			"2/3": "66.666667%",
			"1/4": "25%",
			"2/4": "50%",
			"3/4": "75%",
			"1/5": "20%",
			"2/5": "40%",
			"3/5": "60%",
			"4/5": "80%",
			"1/6": "16.666667%",
			"2/6": "33.333333%",
			"3/6": "50%",
			"4/6": "66.666667%",
			"5/6": "83.333333%",
			"1/12": "8.333333%",
			"2/12": "16.666667%",
			"3/12": "25%",
			"4/12": "33.333333%",
			"5/12": "41.666667%",
			"6/12": "50%",
			"7/12": "58.333333%",
			"8/12": "66.666667%",
			"9/12": "75%",
			"10/12": "83.333333%",
			"11/12": "91.666667%",
			full: "100%",
			screen: "100vw"
		}),
		zIndex: {
			auto: "auto",
			"0": "0",
			"10": "10",
			"20": "20",
			"30": "30",
			"40": "40",
			"50": "50"
		},
		gap: theme => theme("spacing"),
		gridTemplateColumns: {
			none: "none",
			"1": "repeat(1, minmax(0, 1fr))",
			"2": "repeat(2, minmax(0, 1fr))",
			"3": "repeat(3, minmax(0, 1fr))",
			"4": "repeat(4, minmax(0, 1fr))",
			"5": "repeat(5, minmax(0, 1fr))",
			"6": "repeat(6, minmax(0, 1fr))",
			"7": "repeat(7, minmax(0, 1fr))",
			"8": "repeat(8, minmax(0, 1fr))",
			"9": "repeat(9, minmax(0, 1fr))",
			"10": "repeat(10, minmax(0, 1fr))",
			"11": "repeat(11, minmax(0, 1fr))",
			"12": "repeat(12, minmax(0, 1fr))"
		},
		gridColumn: {
			auto: "auto",
			"span-1": "span 1 / span 1",
			"span-2": "span 2 / span 2",
			"span-3": "span 3 / span 3",
			"span-4": "span 4 / span 4",
			"span-5": "span 5 / span 5",
			"span-6": "span 6 / span 6",
			"span-7": "span 7 / span 7",
			"span-8": "span 8 / span 8",
			"span-9": "span 9 / span 9",
			"span-10": "span 10 / span 10",
			"span-11": "span 11 / span 11",
			"span-12": "span 12 / span 12"
		},
		gridColumnStart: {
			auto: "auto",
			"1": "1",
			"2": "2",
			"3": "3",
			"4": "4",
			"5": "5",
			"6": "6",
			"7": "7",
			"8": "8",
			"9": "9",
			"10": "10",
			"11": "11",
			"12": "12",
			"13": "13"
		},
		gridColumnEnd: {
			auto: "auto",
			"1": "1",
			"2": "2",
			"3": "3",
			"4": "4",
			"5": "5",
			"6": "6",
			"7": "7",
			"8": "8",
			"9": "9",
			"10": "10",
			"11": "11",
			"12": "12",
			"13": "13"
		},
		gridTemplateRows: {
			none: "none",
			"1": "repeat(1, minmax(0, 1fr))",
			"2": "repeat(2, minmax(0, 1fr))",
			"3": "repeat(3, minmax(0, 1fr))",
			"4": "repeat(4, minmax(0, 1fr))",
			"5": "repeat(5, minmax(0, 1fr))",
			"6": "repeat(6, minmax(0, 1fr))"
		},
		gridRow: {
			auto: "auto",
			"span-1": "span 1 / span 1",
			"span-2": "span 2 / span 2",
			"span-3": "span 3 / span 3",
			"span-4": "span 4 / span 4",
			"span-5": "span 5 / span 5",
			"span-6": "span 6 / span 6"
		},
		gridRowStart: {
			auto: "auto",
			"1": "1",
			"2": "2",
			"3": "3",
			"4": "4",
			"5": "5",
			"6": "6",
			"7": "7"
		},
		gridRowEnd: {
			auto: "auto",
			"1": "1",
			"2": "2",
			"3": "3",
			"4": "4",
			"5": "5",
			"6": "6",
			"7": "7"
		},
		transformOrigin: {
			center: "center",
			top: "top",
			"top-right": "top right",
			right: "right",
			"bottom-right": "bottom right",
			bottom: "bottom",
			"bottom-left": "bottom left",
			left: "left",
			"top-left": "top left"
		},
		scale: {
			"0": "0",
			"50": ".5",
			"75": ".75",
			"90": ".9",
			"95": ".95",
			"100": "1",
			"105": "1.05",
			"110": "1.1",
			"125": "1.25",
			"150": "1.5"
		},
		rotate: {
			"-180": "-180deg",
			"-90": "-90deg",
			"-45": "-45deg",
			"0": "0",
			"45": "45deg",
			"90": "90deg",
			"180": "180deg",
			"270": "270deg",
			"360": "360deg"
		},
		translate: (theme, { negative }) => ({
			...theme("spacing"),
			...negative(theme("spacing")),
			"-full": "-100%",
			"-1/2": "-50%",
			"1/2": "50%",
			full: "100%"
		}),
		skew: {
			"-12": "-12deg",
			"-6": "-6deg",
			"-3": "-3deg",
			"0": "0",
			"3": "3deg",
			"6": "6deg",
			"12": "12deg"
		},
		transitionProperty: {
			none: "none",
			all: "all",
			default:
				"background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
			colors: "background-color, border-color, color, fill, stroke",
			opacity: "opacity",
			shadow: "box-shadow",
			transform: "transform"
		},
		transitionTimingFunction: {
			linear: "linear",
			in: "cubic-bezier(0.4, 0, 1, 1)",
			out: "cubic-bezier(0, 0, 0.2, 1)",
			"in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
		},
		transitionDuration: {
			"75": "75ms",
			"100": "100ms",
			"150": "150ms",
			"200": "200ms",
			"300": "300ms",
			"500": "500ms",
			"700": "700ms",
			"1000": "1000ms"
		},
		transitionDelay: {
			"75": "75ms",
			"100": "100ms",
			"150": "150ms",
			"200": "200ms",
			"300": "300ms",
			"500": "500ms",
			"700": "700ms",
			"1000": "1000ms"
		}
	},
	variants: {
		accessibility: ["responsive", "focus"],
		alignContent: ["responsive"],
		alignItems: ["responsive"],
		alignSelf: ["responsive"],
		appearance: ["responsive"],
		backgroundAttachment: ["responsive"],
		backgroundColor: ["responsive", "hover", "focus", "focus-within"],
		backgroundOpacity: ["responsive", "hover", "focus"],
		backgroundPosition: ["responsive"],
		backgroundRepeat: ["responsive"],
		backgroundSize: ["responsive"],
		borderCollapse: ["responsive"],
		borderColor: ["responsive", "hover", "focus"],
		borderOpacity: ["responsive", "hover", "focus"],
		borderRadius: ["responsive"],
		borderStyle: ["responsive"],
		borderWidth: ["responsive"],
		boxShadow: ["responsive", "hover", "focus"],
		boxSizing: ["responsive"],
		cursor: ["responsive"],
		display: ["responsive", "group-hover"],
		divideColor: ["responsive"],
		divideOpacity: ["responsive"],
		divideWidth: ["responsive"],
		fill: ["responsive"],
		flex: ["responsive"],
		flexDirection: ["responsive"],
		flexGrow: ["responsive"],
		flexShrink: ["responsive"],
		flexWrap: ["responsive"],
		float: ["responsive"],
		clear: ["responsive"],
		fontFamily: ["responsive"],
		fontSize: ["responsive"],
		fontSmoothing: ["responsive"],
		fontStyle: ["responsive"],
		fontWeight: ["responsive", "hover", "focus"],
		height: ["responsive"],
		inset: ["responsive"],
		justifyContent: ["responsive"],
		letterSpacing: ["responsive"],
		lineHeight: ["responsive"],
		listStylePosition: ["responsive"],
		listStyleType: ["responsive"],
		margin: ["responsive"],
		maxHeight: ["responsive"],
		maxWidth: ["responsive"],
		minHeight: ["responsive"],
		minWidth: ["responsive"],
		objectFit: ["responsive"],
		objectPosition: ["responsive"],
		opacity: ["responsive", "hover", "focus"],
		order: ["responsive"],
		outline: ["responsive", "focus"],
		overflow: ["responsive"],
		padding: ["responsive"],
		placeholderColor: ["responsive", "focus"],
		placeholderOpacity: ["responsive", "focus"],
		pointerEvents: ["responsive"],
		position: ["responsive"],
		resize: ["responsive"],
		space: ["responsive"],
		stroke: ["responsive"],
		strokeWidth: ["responsive"],
		tableLayout: ["responsive"],
		textAlign: ["responsive"],
		textColor: ["responsive", "hover", "focus"],
		textOpacity: ["responsive", "hover", "focus"],
		textDecoration: ["responsive", "hover", "focus"],
		textTransform: ["responsive"],
		userSelect: ["responsive"],
		verticalAlign: ["responsive"],
		visibility: ["responsive"],
		whitespace: ["responsive"],
		width: ["responsive"],
		wordBreak: ["responsive"],
		zIndex: ["responsive"],
		gap: ["responsive"],
		gridAutoFlow: ["responsive"],
		gridTemplateColumns: ["responsive"],
		gridColumn: ["responsive"],
		gridColumnStart: ["responsive"],
		gridColumnEnd: ["responsive"],
		gridTemplateRows: ["responsive"],
		gridRow: ["responsive"],
		gridRowStart: ["responsive"],
		gridRowEnd: ["responsive"],
		transform: ["responsive"],
		transformOrigin: ["responsive"],
		scale: ["responsive", "hover", "focus"],
		rotate: ["responsive", "hover", "focus"],
		translate: ["responsive", "hover", "focus"],
		skew: ["responsive", "hover", "focus"],
		transitionProperty: ["responsive"],
		transitionTimingFunction: ["responsive"],
		transitionDuration: ["responsive"],
		transitionDelay: ["responsive"]
	},
	corePlugins: {},
	plugins: [
		plugin(({ addComponents, addUtilities }) => {
			const imgUrl = "/img/cards.gif"
			const imgW = 1135,
				imgH = 469,
				cardW = imgW / 14,
				cardH = imgH / 4

			const suits = Object.fromEntries(
				["hearts", "diamonds", "clubs", "spades"].map((s, i) => [
					`.suit-${s}`,
					{
						backgroundPositionY: `${-i * cardH}px`
					}
				])
			)

			const ranks = Object.fromEntries(
				Array(13)
					.fill()
					.map((_, i) => [
						`.rank-${i + 1}`,
						{
							backgroundPositionX: `${-i * cardW}px`
						}
					])
			)

			addComponents({
				".card": {
					backgroundImage: `url(${imgUrl})`,
					width: `${cardW}px`,
					height: `${cardH}px`
				},
				".card-back": {
					backgroundPosition: `${-13 * cardW}px 0px`
				},
				...suits,
				...ranks
			})

			addUtilities({
				".w-card": {
					width: `${cardW}px`
				},
				".h-card": {
					height: `${cardH}px`
				},
				".min-w-card": {
					minWidth: `${cardW}px`
				},
				".min-h-card": {
					minHeight: `${cardH}px`
				},
				".max-w-card": {
					maxWidth: `${cardW}px`
				},
				".max-h-card": {
					maxHeight: `${cardH}px`
				}
			})
		}),
		plugin(({ addComponents, addUtilities }) => {
			const imgUrl = "/img/chess.png"
			const imgW = 600,
				imgH = 200,
				pieceW = imgW / 6,
				pieceH = imgH / 2

			const pieces = Object.fromEntries(
				["king", "queen", "bishop", "knight", "rook", "pawn"].flatMap(
					(s, i) => [
						[
							`.white-${s}`,
							{
								backgroundPositionX: `calc(var(--chess-scale) * ${-i *
									pieceW}px)`
							}
						],
						[
							`.black-${s}`,
							{
								backgroundPositionX: `calc(var(--chess-scale) * ${-i *
									pieceW}px)`,
								backgroundPositionY: `calc(var(--chess-scale) * ${-pieceH}px)`
							}
						]
					]
				)
			)

			addComponents({
				".piece": {
					backgroundImage: `url(${imgUrl})`,
					width: `calc(var(--chess-scale) * var(--chess-piece))`,
					height: `calc(var(--chess-scale) * var(--chess-piece))`,
					backgroundSize: `calc(var(--chess-scale) * ${imgW}px)`
				},
				...pieces,
				":root": {
					"--chess-scale": "1",
					"--chess-piece": `${pieceW}px`
				}
			})

			addUtilities({
				".w-piece": {
					width: `calc(var(--chess-scale) * var(--chess-piece))`
				},
				".h-piece": {
					height: `calc(var(--chess-scale) * var(--chess-piece))`
				},
				".min-w-piece": {
					minWidth: `calc(var(--chess-scale) * var(--chess-piece))`
				},
				".min-h-piece": {
					minHeight: `calc(var(--chess-scale) * var(--chess-piece))`
				},
				".max-w-piece": {
					maxWidth: `calc(var(--chess-scale) * var(--chess-piece))`
				},
				".max-h-piece": {
					maxHeight: `calc(var(--chess-scale) * var(--chess-piece))`
				}
			})
		}),
		plugin(({ addComponents }) => {
			addComponents({
				".escampe": {
					backgroundImage: `url('/img/escampe.png')`,
					width: 80,
					height: 140,
					imageRendering: "crisp-edges"
				},
				".unicorn-white": {
					backgroundPositionX: 0,
					backgroundPositionY: 0
				},
				".unicorn-black": {
					backgroundPositionX: 80,
					backgroundPositionY: 0
				},
				".paladin-white": {
					backgroundPositionX: 0,
					backgroundPositionY: 140
				},
				".paladin-black": {
					backgroundPositionX: 80,
					backgroundPositionY: 140
				}
			})
		})
	]
}