132 lines
3.9 kB
1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;
4
@layer base {
5
@font-face {
6
font-family: "iA Writer Quattro S";
7
src: url("/static/fonts/iAWriterQuattroS-Regular.ttf")
8
format("truetype");
9
font-weight: normal;
10
font-style: normal;
11
font-display: swap;
12
font-feature-settings:
13
"calt" 1,
14
"kern" 1;
15
}
16
@font-face {
17
font-family: "iA Writer Quattro S";
18
src: url("/static/fonts/iAWriterQuattroS-Bold.ttf") format("truetype");
19
font-weight: bold;
20
font-style: normal;
21
font-display: swap;
22
}
23
@font-face {
24
font-family: "iA Writer Quattro S";
25
src: url("/static/fonts/iAWriterQuattroS-Italic.ttf") format("truetype");
26
font-weight: normal;
27
font-style: italic;
28
font-display: swap;
29
}
30
@font-face {
31
font-family: "iA Writer Quattro S";
32
src: url("/static/fonts/iAWriterQuattroS-BoldItalic.ttf")
33
format("truetype");
34
font-weight: bold;
35
font-style: italic;
36
font-display: swap;
37
}
38
39
@font-face {
40
font-family: "iA Writer Mono S";
41
src: url("/static/fonts/iAWriterMonoS-Regular.ttf") format("truetype");
42
font-weight: normal;
43
font-style: normal;
44
font-display: swap;
45
}
46
@font-face {
47
font-family: "iA Writer Mono S";
48
src: url("/static/fonts/iAWriterMonoS-Bold.ttf") format("truetype");
49
font-weight: bold;
50
font-style: normal;
51
font-display: swap;
52
}
53
@font-face {
54
font-family: "iA Writer Mono S";
55
src: url("/static/fonts/iAWriterMonoS-Italic.ttf") format("truetype");
56
font-weight: normal;
57
font-style: italic;
58
font-display: swap;
59
}
60
@font-face {
61
font-family: "iA Writer Mono S";
62
src: url("/static/fonts/iAWriterMonoS-BoldItalic.ttf")
63
format("truetype");
64
font-weight: bold;
65
font-style: italic;
66
font-display: swap;
67
}
68
69
@font-face {
70
font-family: "Inter";
71
font-style: normal;
72
font-weight: 400;
73
font-display: swap;
74
}
75
h1 {
76
@apply text-2xl;
77
@apply font-sans;
78
@apply text-black;
79
@apply py-4;
80
}
81
82
::selection {
83
@apply bg-yellow-400;
84
@apply text-black;
85
@apply bg-opacity-30;
86
}
87
88
html {
89
letter-spacing: -0.01em;
90
word-spacing: -0.07em;
91
}
92
93
a {
94
@apply no-underline text-black hover:underline hover:text-gray-800;
95
}
96
97
@layer base {
98
label {
99
@apply block text-sm text-black;
100
}
101
input {
102
@apply bg-white border border-black rounded-sm focus:ring-black p-2;
103
}
104
textarea {
105
@apply bg-white border border-black rounded-sm focus:ring-black p-2;
106
}
107
}
108
109
@layer components {
110
.btn {
111
@apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
112
justify-center bg-transparent px-2 pb-[0.2rem] text-base
113
text-gray-900 before:absolute before:inset-0 before:-z-10
114
before:block before:rounded-sm before:border before:border-gray-200
115
before:bg-white before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
116
before:content-[''] hover:before:border-gray-300
117
hover:before:bg-gray-50
118
hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
119
focus:outline-none focus-visible:before:outline
120
focus-visible:before:outline-4 focus-visible:before:outline-gray-500
121
active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)];
122
}
123
}
124
@layer utilities {
125
.error {
126
@apply py-1 text-red-400;
127
}
128
.success {
129
@apply py-1 text-black;
130
}
131
}
132
}
133