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: "InterDisplay";
23 src: url("/static/fonts/InterDisplay-Regular.woff2") format("woff2");
24 font-weight: normal;
25 font-style: normal;
26 font-display: swap;
27 }
28
29 @font-face {
30 font-family: "IBMPlexMono";
31 src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
32 font-weight: normal;
33 font-style: italic;
34 font-display: swap;
35 }
36
37 h1 {
38 @apply text-2xl;
39 @apply text-black;
40 @apply font-bold;
41 }
42
43 ::selection {
44 @apply bg-yellow-400;
45 @apply bg-opacity-30;
46 }
47
48 @layer base {
49 html {
50 font-size: 14px;
51 scrollbar-gutter: stable;
52 }
53 @supports (font-variation-settings: normal) {
54 html {
55 font-feature-settings:
56 "ss01" 1,
57 "kern" 1,
58 "liga" 1,
59 "cv05" 1,
60 "tnum" 1;
61 }
62 }
63
64 a {
65 @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
66 }
67
68 img {
69 @apply dark:brightness-75 dark:opacity-90 border border-gray-200 rounded-sm dark:border-gray-700;
70 }
71
72 label {
73 @apply block mb-2 text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
74 }
75 input {
76 @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;
77 }
78 textarea {
79 @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;
80 }
81 details summary::-webkit-details-marker {
82 display: none;
83 }
84 }
85
86 @layer components {
87 .btn {
88 @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center
89 justify-center bg-transparent px-2 pb-[0.2rem] text-base
90 text-gray-900 before:absolute before:inset-0 before:-z-10
91 before:block before:rounded-sm before:border before:border-gray-200
92 before:bg-white before:drop-shadow-sm
93 before:content-[''] hover:before:border-gray-300
94 hover:before:bg-gray-50
95 hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]
96 focus:outline-none focus-visible:before:outline
97 focus-visible:before:outline-4 focus-visible:before:outline-gray-500
98 active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)];
99 }
100 }
101 @layer utilities {
102 .error {
103 @apply py-1 text-red-400;
104 }
105 .success {
106 @apply py-1 text-black;
107 }
108 }
109}