engineering blog at https://blog.tangled.sh
tangled.org
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4@layer base {
5 @font-face {
6 font-family: "InterVariable";
7 src: url("/static/fonts/InterVariable.woff2") format("woff2");
8 font-weight: normal;
9 font-style: normal;
10 font-display: swap;
11 }
12
13 @font-face {
14 font-family: "InterVariable";
15 src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
16 font-weight: normal;
17 font-style: italic;
18 font-display: swap;
19 }
20
21 @font-face {
22 font-family: "InterVariable";
23 src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2");
24 font-weight: bold;
25 font-style: normal;
26 font-display: swap;
27 }
28
29 @font-face {
30 font-family: "InterVariable";
31 src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
32 font-weight: bold;
33 font-style: italic;
34 font-display: swap;
35 }
36
37 @font-face {
38 font-family: "IBMPlexMono";
39 src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
40 font-weight: normal;
41 font-style: normal;
42 font-display: swap;
43 }
44
45 @font-face {
46 font-family: "IBMPlexMono";
47 src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2");
48 font-weight: normal;
49 font-style: italic;
50 font-display: swap;
51 }
52
53 @font-face {
54 font-family: "IBMPlexMono";
55 src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2");
56 font-weight: bold;
57 font-style: normal;
58 font-display: swap;
59 }
60
61 @font-face {
62 font-family: "IBMPlexMono";
63 src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
64 font-weight: bold;
65 font-style: italic;
66 font-display: swap;
67 }
68
69 h1 {
70 @apply text-2xl;
71 @apply text-black;
72 @apply font-bold;
73 }
74
75 ::selection {
76 @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
77 }
78
79 @layer base {
80 html {
81 font-size: 14px;
82 scrollbar-gutter: stable;
83 }
84 @supports (font-variation-settings: normal) {
85 html {
86 font-feature-settings:
87 "ss01" 1,
88 "kern" 1,
89 "liga" 1,
90 "cv05" 1,
91 "tnum" 1;
92 }
93 }
94
95 a {
96 @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
97 }
98
99 img {
100 @apply border border-gray-200 rounded dark:border-gray-700;
101 }
102
103 img.icon {
104 @apply border-0 dark:brightness-100 dark:opacity-100;
105 }
106
107 label {
108 @apply block mb-2 text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
109 }
110 input {
111 @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
112 }
113 textarea {
114 @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400;
115 }
116 details summary::-webkit-details-marker {
117 display: none;
118 }
119 }
120
121 @layer components {
122 .btn {
123 @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
124 justify-center bg-transparent px-2 pb-[0.2rem] text-base
125 text-gray-900 before:absolute before:inset-0 before:-z-10
126 before:block before:rounded-sm before:border before:border-gray-200
127 before:bg-white before:drop-shadow-sm
128 before:content-[''] hover:before:border-gray-300
129 hover:before:bg-gray-50
130 hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
131 focus:outline-none focus-visible:before:outline
132 focus-visible:before:outline-4 focus-visible:before:outline-gray-500
133 active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)];
134 }
135 }
136 @layer utilities {
137 .error {
138 @apply py-1 text-red-400;
139 }
140 .success {
141 @apply py-1 text-black;
142 }
143 }
144}