(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5@layer base {
6 html {
7 font-family: "Inter", system-ui, sans-serif;
8 -webkit-font-smoothing: antialiased;
9 -moz-osx-font-smoothing: grayscale;
10 }
11
12 html {
13 background-color: #f8fafc;
14 color: #0f172a;
15 }
16
17 html[data-theme="dark"] {
18 background-color: #020617;
19 color: #f8fafc;
20 }
21
22 h1,
23 h2,
24 h3,
25 h4,
26 h5,
27 h6 {
28 font-family: "Outfit", sans-serif;
29 letter-spacing: -0.02em;
30 }
31}
32
33@layer utilities {
34 .animate-fade-in {
35 animation: fadeIn 0.3s ease-out;
36 }
37
38 .animate-slide-up {
39 animation: slideUp 0.3s ease-out;
40 }
41
42 .animate-scale-in {
43 animation: scaleIn 0.2s ease-out;
44 }
45
46 .focus-ring {
47 @apply focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-surface-950;
48 }
49
50 .glass {
51 @apply bg-white/80 dark:bg-surface-900/80 backdrop-blur-xl;
52 }
53
54 .card {
55 @apply bg-white dark:bg-surface-900 rounded-xl border border-surface-200/80 dark:border-surface-800 shadow-sm;
56 }
57
58 .transition-default {
59 @apply transition-all duration-200 ease-out;
60 }
61}
62
63@keyframes fadeIn {
64 from {
65 opacity: 0;
66 }
67
68 to {
69 opacity: 1;
70 }
71}
72
73@keyframes slideUp {
74 from {
75 opacity: 0;
76 transform: translateY(8px);
77 }
78
79 to {
80 opacity: 1;
81 transform: translateY(0);
82 }
83}
84
85@keyframes scaleIn {
86 from {
87 opacity: 0;
88 transform: scale(0.95);
89 }
90
91 to {
92 opacity: 1;
93 transform: scale(1);
94 }
95}