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