158 lines
3.5 KiB
JavaScript
158 lines
3.5 KiB
JavaScript
import {
|
|
SiXHex,
|
|
SiThreadsHex,
|
|
SiInstagramHex,
|
|
SiFacebookHex,
|
|
SiTiktokHex,
|
|
SiYoutubeHex,
|
|
SiLinkedinHex,
|
|
SiGithubHex,
|
|
SiGiteaHex,
|
|
SiLeetcodeHex,
|
|
SiSteamHex,
|
|
SiDiscordHex,
|
|
SiTwitchHex,
|
|
SiForgejoHex,
|
|
SiGitlabHex,
|
|
SiBitbucketHex,
|
|
} from '@icons-pack/react-simple-icons'
|
|
|
|
const invertColor = (hex) => {
|
|
if (hex.startsWith('#')) hex = hex.slice(1)
|
|
|
|
if (hex.length !== 6) throw new Error('Invalid hex color code')
|
|
|
|
const r = parseInt(hex.slice(0, 2), 16)
|
|
const g = parseInt(hex.slice(2, 4), 16)
|
|
const b = parseInt(hex.slice(4, 6), 16)
|
|
|
|
const invertedR = (255 - r).toString(16).padStart(2, '0')
|
|
const invertedG = (255 - g).toString(16).padStart(2, '0')
|
|
const invertedB = (255 - b).toString(16).padStart(2, '0')
|
|
|
|
return `#${invertedR}${invertedG}${invertedB}`
|
|
}
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export const content = ['src/**/*.{js,jsx,ts,tsx}']
|
|
export const theme = {
|
|
extend: {
|
|
width: {
|
|
46: '11.5rem',
|
|
54: '13.5rem',
|
|
},
|
|
maxWidth: {
|
|
68: '17rem',
|
|
},
|
|
height: {
|
|
128: '32rem',
|
|
},
|
|
aspectRatio: {
|
|
portrait: '4 / 5',
|
|
},
|
|
fontFamily: {
|
|
syne: ['Syne', 'sans-serif'],
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
animation: {
|
|
enter: 'enter 200ms ease-out',
|
|
leave: 'leave 200ms ease-in forwards',
|
|
},
|
|
keyframes: {
|
|
enter: {
|
|
'0%': { transform: 'scale(0.75) translateY(-110%)', opacity: 0 },
|
|
'25%': { opacity: 0 },
|
|
'100%': { transform: 'scale(1) translateX(0)', opacity: 1 },
|
|
},
|
|
leave: {
|
|
'0%': { transform: 'scale(1) translateX(0)', opacity: 1 },
|
|
'75%': { opacity: 0 },
|
|
'100%': { transform: 'scale(0.75) translateY(-110%)', opacity: 0 },
|
|
},
|
|
},
|
|
colors: {
|
|
x: {
|
|
light: SiXHex,
|
|
dark: invertColor(SiXHex),
|
|
},
|
|
threads: {
|
|
light: SiThreadsHex,
|
|
dark: invertColor(SiThreadsHex),
|
|
},
|
|
instagram: {
|
|
light: SiInstagramHex,
|
|
dark: SiInstagramHex,
|
|
},
|
|
facebook: {
|
|
light: SiFacebookHex,
|
|
dark: SiFacebookHex,
|
|
},
|
|
tiktok: {
|
|
light: SiTiktokHex,
|
|
dark: invertColor(SiTiktokHex),
|
|
},
|
|
youtube: {
|
|
light: SiYoutubeHex,
|
|
dark: SiYoutubeHex,
|
|
},
|
|
|
|
steam: {
|
|
light: SiSteamHex,
|
|
dark: invertColor(SiSteamHex),
|
|
},
|
|
discord: {
|
|
light: SiDiscordHex,
|
|
dark: SiDiscordHex,
|
|
},
|
|
twitch: {
|
|
light: SiTwitchHex,
|
|
dark: SiTwitchHex,
|
|
},
|
|
linkedin: {
|
|
light: SiLinkedinHex,
|
|
dark: SiLinkedinHex,
|
|
},
|
|
github: {
|
|
light: SiGithubHex,
|
|
dark: invertColor(SiGithubHex),
|
|
},
|
|
gitea: {
|
|
light: SiGiteaHex,
|
|
dark: SiGiteaHex,
|
|
},
|
|
forgejo: {
|
|
light: SiForgejoHex,
|
|
dark: SiForgejoHex,
|
|
},
|
|
gitlab: {
|
|
light: SiGitlabHex,
|
|
dark: SiGitlabHex,
|
|
},
|
|
bitbucket: {
|
|
light: SiBitbucketHex,
|
|
dark: SiBitbucketHex,
|
|
},
|
|
leetcode: {
|
|
light: SiLeetcodeHex,
|
|
dark: SiLeetcodeHex,
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
export const darkMode = ['class', '[data-theme="dark"]']
|
|
export const plugins = [require('@tailwindcss/typography'), require('daisyui')]
|
|
export const daisyui = {
|
|
themes: [
|
|
'light',
|
|
{
|
|
dark: {
|
|
...require('daisyui/src/theming/themes')['dark'],
|
|
'base-100': '#212121',
|
|
'base-200': '#1d1d1d',
|
|
'base-300': '#191919',
|
|
},
|
|
},
|
|
],
|
|
}
|