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