Leaflet Blog in Deno Fresh
knotbin.com
1@import url('https://api.fonts.coollabs.io/css2?family=Inter:wght@400;700&display=swap');
2@import url('https://api.fonts.coollabs.io/css2?family=Libre+Bodoni:ital,wght@0,400;0,700;1,400&display=swap');
3@font-face {
4 font-family: 'Berkeley Mono';
5 src: url('/path/to/local/fonts/BerkeleyMono-Regular.woff2') format('woff2'),
6 url('/path/to/local/fonts/BerkeleyMono-Regular.woff') format('woff');
7 font-weight: 400;
8 font-style: normal;
9}
10
11@tailwind base;
12@tailwind components;
13@tailwind utilities;
14
15@theme inline {
16 --color-background: var(--background);
17 --color-foreground: var(--foreground);
18}
19
20:root {
21 --font-sans: 'Inter', sans-serif;
22 --font-serif: 'Libre Bodoni', serif;
23 --font-mono: 'Berkeley Mono', monospace;
24}
25
26.font-sans { font-family: var(--font-sans); }
27.font-serif { font-family: var(--font-serif); }
28.font-mono { font-family: var(--font-mono); }
29.font-serif-italic { font-family: var(--font-serif); font-style: italic;}
30
31/*
32 The default border color has changed to `currentColor` in Tailwind CSS v4,
33 so we've added these compatibility styles to make sure everything still
34 looks the same as it did with Tailwind CSS v3.
35
36 If we ever want to remove these styles, we need to add an explicit border
37 color utility to any element that depends on these defaults.
38*/
39@layer base {
40 *,
41 ::after,
42 ::before,
43 ::backdrop,
44 ::file-selector-button {
45 border-color: var(--color-gray-200, currentColor);
46 }
47}
48
49@utility text-balance {
50 text-wrap: balance;
51}
52
53@layer utilities {
54 :root {
55 --background: #ffffff;
56 --foreground: #171717;
57 }
58
59 @media (prefers-color-scheme: dark) {
60 :root {
61 --background: #0a0a0a;
62 --foreground: #ededed;
63 }
64 }
65
66 body {
67 color: var(--foreground);
68 background: var(--background);
69 font-family: var(--font-sans);
70 }
71
72 @keyframes marquee {
73 0% {
74 opacity: 0;
75 transform: translateX(0px);
76 }
77 2% {
78 opacity: 0.075;
79 }
80 98% {
81 opacity: 0.075;
82 }
83 100% {
84 opacity: 0;
85 transform: translateX(-4000px);
86 }
87 }
88
89 @keyframes fadeIn {
90 0% {
91 opacity: 0;
92 }
93 100% {
94 opacity: 1;
95 }
96 }
97
98 @keyframes fadeOut {
99 0% {
100 opacity: 1;
101 }
102 100% {
103 opacity: 0;
104 }
105 }
106
107 .animate-marquee {
108 animation: marquee 30s linear infinite;
109 font-size: 100vh;
110 line-height: 0.8;
111 height: 100vh;
112 display: flex;
113 align-items: center;
114 }
115
116 .animate-fade-in {
117 animation: fadeIn 0.3s ease-in-out forwards;
118 }
119
120 .animate-fade-out {
121 animation: fadeOut 0.3s ease-in-out forwards;
122 }
123}
124
125.diagonal-pattern {
126 background-color: transparent;
127 background: repeating-linear-gradient(
128 -45deg,
129 #000000,
130 #000000 4px,
131 transparent 4px,
132 transparent 10px
133 );
134}
135
136@media (prefers-color-scheme: dark) {
137 .diagonal-pattern {
138 background: repeating-linear-gradient(
139 -45deg,
140 #ffffff,
141 #ffffff 4px,
142 transparent 4px,
143 transparent 10px
144 );
145 }
146}