hndang.github.io/tailwind.config.mjs at master · hndang/hndang.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/** @type {import('tailwindcss').Config} */

export default {
    darkMode: 'class',
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
        fontFamily: {
            quirlycues: ["Quirlycues", "sans-serif"],
            ain: ["AiN", "sans-serif"],
        },

        extend: {
            colors: {
                atomic_1: '#3d5a80',
                atomic_2: '#98c1d9',
                atomic_3: '#e0fbfc',
                atomic_4: '#ee6c4d',
                atomic_5: '#293241',
                atomic_6: '#219ebc',
                atomic_7: '#8ecae6',
                atomic_8: '#ffb703',
                anti_atomic_1: '#ffffff',
                anti_atomic_2: '#A39594',
                anti_atomic_3: '#363537',
                anti_atomic_4: '#ee6c4d',
                anti_atomic_5: '#EDEBD7',
                anti_atomic_6: '#A39594',
                anti_atomic_7: '#363537',
                anti_atomic_8: '#A5668B',
            },
            fontSize: {
                'myname': ['3rem', {
                    lineHeight: '5rem',
                    letterSpacing: '-0.01em',
                    fontWeight: '600',
                }],
                'myname-sm': ['2.5rem', {
                    lineHeight: '3rem',
                    letterSpacing: '-0.01em',
                    fontWeight: '400',
                }],
                'floating': ['3rem', {
                    lineHeight: '3.5rem',
                    letterSpacing: '0.2em',
                    fontWeight: '600',
                }],
                'floating-sm': ['2rem', {
                    lineHeight: '2.3rem',
                    letterSpacing: '0.1em',
                    fontWeight: '400',
                }],
            },
            keyframes: {
                typing: {
                    "0%": {
                        width: "0%",
                        visibility: "hidden"
                    },
                    "100%": {
                        width: "100%"
                    }
                },
                blink: {
                    "50%": {
                        borderColor: "transparent"
                    },
                    "100%": {
                        borderColor: "white"
                    }
                },
                wiggle: {
                    '0%, 100%': { transform: 'rotate(0)' },
                    '25%': { transform: 'rotate(3deg)' },
                    '75%': { transform: 'rotate(-3deg)' }
                  },
                  popIn: {
                    '0%' :{ transform: 'scale(0)' },
                    '90%': { transform: 'scale(1.1)'},
                    '100%': {transform: 'scale(1)'}
                }
            },
            animation: {
                typing: "typing 2s steps(20) infinite alternate, blink .7s infinite",
                'spin-slow': 'spin 3s linear infinite',
                blinking: 'blink .2s infinite',
                'wiggle-2': 'wiggle 1s linear 3',
                'pulse-bounce': 'pulse 10s linear infinite, bounce 2s infinite',
                'popIn': 'popIn 1s ease-in-out',
            }
        },


    },
    plugins: [
        require('@tailwindcss/typography'),
        require("tailwindcss-animation-delay"),
    ],
}