knotbin.com
Leaflet Blog in Deno Fresh
fix fonts
+102
-108
+2
-9
deno.json
+2
-9
deno.json
···
9
9
"preview": "deno run -A main.ts",
10
10
"update": "deno run -A -r https://fresh.deno.dev/update ."
11
11
},
12
-
"lint": {
13
-
"rules": {
14
-
"tags": ["fresh", "recommended"]
15
-
}
16
-
},
12
+
"lint": { "rules": { "tags": ["fresh", "recommended"] } },
17
13
"exclude": ["**/_fresh/*"],
18
14
"imports": {
19
15
"$fresh/": "https://deno.land/x/fresh@1.7.3/",
···
34
30
"tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",
35
31
"$std/": "https://deno.land/std@0.216.0/"
36
32
},
37
-
"compilerOptions": {
38
-
"jsx": "react-jsx",
39
-
"jsxImportSource": "preact"
40
-
},
33
+
"compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
41
34
"nodeModulesDir": "auto"
42
35
}
+99
-99
static/styles.css
+99
-99
static/styles.css
···
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");
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
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;
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
10
}
11
11
12
12
@tailwind base;
···
14
14
@tailwind utilities;
15
15
16
16
@theme inline {
17
-
--color-background: var(--background);
18
-
--color-foreground: var(--foreground);
17
+
--color-background: var(--background);
18
+
--color-foreground: var(--foreground);
19
19
}
20
20
21
21
:root {
22
-
--font-sans: "Inter", sans-serif;
23
-
--font-serif: "Libre Bodoni", serif;
24
-
--font-mono: "Berkeley Mono", monospace;
22
+
--font-sans: "Inter", sans-serif;
23
+
--font-serif: "Libre Bodoni", serif;
24
+
--font-mono: "Berkeley Mono", monospace;
25
25
}
26
26
27
27
.font-sans {
28
-
font-family: var(--font-sans);
28
+
font-family: var(--font-sans);
29
29
}
30
30
.font-serif {
31
-
font-family: var(--font-serif);
31
+
font-family: var(--font-serif);
32
32
}
33
33
.font-mono {
34
-
font-family: var(--font-mono);
34
+
font-family: var(--font-mono);
35
35
}
36
36
.font-serif-italic {
37
-
font-family: var(--font-serif);
38
-
font-style: italic;
37
+
font-family: var(--font-serif);
38
+
font-style: italic;
39
39
}
40
40
41
41
/*
···
47
47
color utility to any element that depends on these defaults.
48
48
*/
49
49
@layer base {
50
-
*,
51
-
::after,
52
-
::before,
53
-
::backdrop,
54
-
::file-selector-button {
55
-
border-color: var(--color-gray-200, currentColor);
56
-
}
50
+
*,
51
+
::after,
52
+
::before,
53
+
::backdrop,
54
+
::file-selector-button {
55
+
border-color: var(--color-gray-200, currentColor);
56
+
}
57
57
}
58
58
59
59
@utility text-balance {
60
-
text-wrap: balance;
60
+
text-wrap: balance;
61
61
}
62
62
63
63
@layer utilities {
64
-
:root {
65
-
--background: #ffffff;
66
-
--foreground: #171717;
67
-
}
68
-
69
-
@media (prefers-color-scheme: dark) {
70
64
:root {
71
-
--background: #0a0a0a;
72
-
--foreground: #ededed;
65
+
--background: #ffffff;
66
+
--foreground: #171717;
73
67
}
74
-
}
75
68
76
-
body {
77
-
color: var(--foreground);
78
-
background: var(--background);
79
-
font-family: var(--font-sans);
80
-
}
69
+
@media (prefers-color-scheme: dark) {
70
+
:root {
71
+
--background: #0a0a0a;
72
+
--foreground: #ededed;
73
+
}
74
+
}
81
75
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);
76
+
body {
77
+
color: var(--foreground);
78
+
background: var(--background);
79
+
font-family: var(--font-sans);
96
80
}
97
-
}
98
81
99
-
@keyframes fadeIn {
100
-
0% {
101
-
opacity: 0;
102
-
}
103
-
100% {
104
-
opacity: 1;
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
+
}
105
97
}
106
-
}
107
98
108
-
@keyframes fadeOut {
109
-
0% {
110
-
opacity: 1;
99
+
@keyframes fadeIn {
100
+
0% {
101
+
opacity: 0;
102
+
}
103
+
100% {
104
+
opacity: 1;
105
+
}
111
106
}
112
-
100% {
113
-
opacity: 0;
107
+
108
+
@keyframes fadeOut {
109
+
0% {
110
+
opacity: 1;
111
+
}
112
+
100% {
113
+
opacity: 0;
114
+
}
114
115
}
115
-
}
116
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
-
}
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
125
126
-
.animate-fade-in {
127
-
animation: fadeIn 0.3s ease-in-out forwards;
128
-
}
126
+
.animate-fade-in {
127
+
animation: fadeIn 0.3s ease-in-out forwards;
128
+
}
129
129
130
-
.animate-fade-out {
131
-
animation: fadeOut 0.3s ease-in-out forwards;
132
-
}
130
+
.animate-fade-out {
131
+
animation: fadeOut 0.3s ease-in-out forwards;
132
+
}
133
133
}
134
134
135
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
-
);
136
+
background-color: transparent;
137
+
background: repeating-linear-gradient(
138
+
-45deg,
139
+
#000000,
140
+
#000000 4px,
141
+
transparent 4px,
142
+
transparent 10px
143
+
);
144
144
}
145
145
146
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
-
}
147
+
.diagonal-pattern {
148
+
background: repeating-linear-gradient(
149
+
-45deg,
150
+
#ffffff,
151
+
#ffffff 4px,
152
+
transparent 4px,
153
+
transparent 10px
154
+
);
155
+
}
156
156
}