veryroundbird.house
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}