compstatgenlab.github.io/tailwind.config.mjs at main · compstatgenlab/compstatgenlab.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
import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        serif:  ['Newsreader', 'Georgia', 'serif'],
        sans:   ['Instrument Sans', 'system-ui', 'sans-serif'],
        mono:   ['Martian Mono', 'monospace'],
	nunito: ['Nunito', 'system-ui', 'sans-serif'],
      },
      colors: {
        blue: {
          50:  '#eff6ff',
          100: '#e8f0fd',
          600: '#2563eb',
          700: '#1a4fad',
          800: '#1e3a8a',
          900: '#0d1f5c',
        },
        teal: {
          50:  '#f0fdfa',
          100: '#ccfbf1',
          500: '#14b8a6',
          600: '#0891b2',
        },
        stone: {
          50:  '#fafaf9',
          100: '#f5f5f4',
          200: '#e7e5e4',
          300: '#d6d3d1',
          400: '#a8a29e',
          500: '#78716c',
          600: '#57534e',
          700: '#44403c',
          900: '#1c1917',
        },
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            fontFamily: theme('fontFamily.sans').join(', '),
            fontSize: '1.0625rem',
            lineHeight: '1.85',
            color: theme('colors.stone.700'),
            maxWidth: 'none',
            p: { marginTop: '1.35em', marginBottom: '1.35em' },
            h1: { fontFamily: theme('fontFamily.serif').join(', '), fontWeight: '400', color: theme('colors.stone.900'), marginBottom: '0.6em' },
            h2: { fontFamily: theme('fontFamily.serif').join(', '), fontWeight: '400', color: theme('colors.stone.900'), marginTop: '2em', marginBottom: '0.6em', fontSize: '1.4em' },
            h3: { fontFamily: theme('fontFamily.serif').join(', '), fontWeight: '400', color: theme('colors.stone.900'), marginTop: '1.75em', fontSize: '1.15em' },
            a: {
              color: theme('colors.blue.700'),
              textDecoration: 'underline',
              textDecorationColor: theme('colors.blue.200'),
              textUnderlineOffset: '3px',
              fontWeight: '500',
              '&:hover': {
                color: theme('colors.blue.800'),
                textDecorationColor: theme('colors.blue.600'),
              },
            },
            'code': {
              fontFamily: theme('fontFamily.mono').join(', '),
              fontSize: '0.875em',
              backgroundColor: theme('colors.stone.100'),
              borderRadius: '0.25rem',
              paddingTop: '0.15em',
              paddingBottom: '0.15em',
              paddingLeft: '0.35em',
              paddingRight: '0.35em',
              fontWeight: '400',
            },
            'code::before': { content: 'none' },
            'code::after':  { content: 'none' },
            blockquote: {
              borderLeftColor: theme('colors.blue.200'),
              color: theme('colors.stone.500'),
              fontStyle: 'italic',
              paddingLeft: '1.25em',
            },
            'blockquote p': { marginTop: '0.4em', marginBottom: '0.4em' },
            hr: { borderColor: theme('colors.stone.100'), marginTop: '2.5em', marginBottom: '2.5em' },
            ul: { paddingLeft: '1.4em' },
            li: { marginTop: '0.4em', marginBottom: '0.4em' },
            img: { borderRadius: '0.5rem', marginTop: '1.5em', marginBottom: '0.5em' },
            'figure figcaption': { color: theme('colors.stone.400'), fontSize: '0.82em', textAlign: 'center', marginTop: '0.5em' },
            strong: { color: theme('colors.stone.900'), fontWeight: '600' },
          },
        },
      }),
    },
  },
  plugins: [typography],
};