Skip to content

Commit b7d5fb9

Browse files
swernerxswernerx
committed
style: use system font stack instead of Google Fonts
- Remove Google Fonts dependency (Inter, JetBrains Mono) - Use system-ui font stack for sans-serif - Use ui-monospace font stack for monospace - Faster loading, no external requests
1 parent d24004c commit b7d5fb9

File tree

1 file changed

+21
-24
lines changed

1 file changed

+21
-24
lines changed

‎docs/index.html‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
theme: {
1313
extend: {
1414
fontFamily: {
15-
sans: ['Inter', 'system-ui', 'sans-serif'],
16-
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
15+
sans: ['system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
16+
mono: ['ui-monospace', 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'monospace'],
1717
},
1818
colors: {
1919
brand: {
@@ -34,9 +34,6 @@
3434
}
3535
}
3636
</script>
37-
<link rel="preconnect" href="https://fonts.googleapis.com">
38-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
39-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
4037
<style>
4138
.gradient-text {
4239
background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #6366f1 100%);
@@ -85,23 +82,23 @@
8582
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-500/20 rounded-full blur-3xl"></div>
8683
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl"></div>
8784
</div>
88-
85+
8986
<div class="max-w-4xl mx-auto text-center relative z-10">
9087
<div class="mb-8 flex justify-center">
9188
<img src="logo.svg" alt="Offcourse Logo" class="w-32 h-32 glow rounded-2xl">
9289
</div>
93-
90+
9491
<h1 class="text-5xl sm:text-7xl font-extrabold mb-6 tracking-tight">
9592
<span class="gradient-text">Offcourse</span>
9693
</h1>
97-
94+
9895
<p class="text-xl sm:text-2xl text-slate-400 mb-4 font-medium">
9996
Download online courses for offline access
10097
</p>
10198
<p class="text-lg text-slate-500 mb-10">
10299
— of course! 📚
103100
</p>
104-
101+
105102
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
106103
<a href="#install" class="gradient-border text-white px-8 py-4 rounded-xl font-semibold text-lg hover:opacity-90 transition-opacity flex items-center justify-center gap-2">
107104
<img src="icon-download.svg" alt="" class="w-5 h-5 invert">
@@ -112,7 +109,7 @@ <h1 class="text-5xl sm:text-7xl font-extrabold mb-6 tracking-tight">
112109
View on GitHub
113110
</a>
114111
</div>
115-
112+
116113
<!-- Code preview -->
117114
<div class="code-block rounded-2xl p-6 text-left max-w-xl mx-auto border border-slate-700/50">
118115
<div class="flex items-center gap-2 mb-4">
@@ -133,7 +130,7 @@ <h1 class="text-5xl sm:text-7xl font-extrabold mb-6 tracking-tight">
133130
<div class="max-w-6xl mx-auto">
134131
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-4">Features</h2>
135132
<p class="text-slate-400 text-center mb-16 max-w-2xl mx-auto">Everything you need to save your courses for offline learning</p>
136-
133+
137134
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
138135
<!-- Feature 1 -->
139136
<div class="feature-card bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 transition-all duration-300">
@@ -143,7 +140,7 @@ <h2 class="text-3xl sm:text-4xl font-bold text-center mb-4">Features</h2>
143140
<h3 class="text-lg font-semibold mb-2">Browser-Based Auth</h3>
144141
<p class="text-slate-400 text-sm">Log in once through a real browser. Sessions are cached for future syncs.</p>
145142
</div>
146-
143+
147144
<!-- Feature 2 -->
148145
<div class="feature-card bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 transition-all duration-300">
149146
<div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
@@ -152,7 +149,7 @@ <h3 class="text-lg font-semibold mb-2">Browser-Based Auth</h3>
152149
<h3 class="text-lg font-semibold mb-2">Structure Preserved</h3>
153150
<p class="text-slate-400 text-sm">Maintains module/lesson hierarchy. Navigate your course just like online.</p>
154151
</div>
155-
152+
156153
<!-- Feature 3 -->
157154
<div class="feature-card bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 transition-all duration-300">
158155
<div class="w-12 h-12 bg-emerald-500/20 rounded-xl flex items-center justify-center mb-4">
@@ -161,7 +158,7 @@ <h3 class="text-lg font-semibold mb-2">Structure Preserved</h3>
161158
<h3 class="text-lg font-semibold mb-2">Video Downloads</h3>
162159
<p class="text-slate-400 text-sm">Supports HLS streams, Vimeo, Loom, and native MP4/WebM files.</p>
163160
</div>
164-
161+
165162
<!-- Feature 4 -->
166163
<div class="feature-card bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 transition-all duration-300">
167164
<div class="w-12 h-12 bg-orange-500/20 rounded-xl flex items-center justify-center mb-4">
@@ -170,7 +167,7 @@ <h3 class="text-lg font-semibold mb-2">Video Downloads</h3>
170167
<h3 class="text-lg font-semibold mb-2">Markdown Content</h3>
171168
<p class="text-slate-400 text-sm">Lesson text converted to clean Markdown. Read anywhere, even offline.</p>
172169
</div>
173-
170+
174171
<!-- Feature 5 -->
175172
<div class="feature-card bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 transition-all duration-300">
176173
<div class="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center mb-4">
@@ -179,7 +176,7 @@ <h3 class="text-lg font-semibold mb-2">Markdown Content</h3>
179176
<h3 class="text-lg font-semibold mb-2">Resumable Syncs</h3>
180177
<p class="text-slate-400 text-sm">Already downloaded content is skipped. Sync incrementally as courses update.</p>
181178
</div>
182-
179+
183180
<!-- Feature 6 -->
184181
<div class="feature-card bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 transition-all duration-300">
185182
<div class="w-12 h-12 bg-pink-500/20 rounded-xl flex items-center justify-center mb-4">
@@ -197,7 +194,7 @@ <h3 class="text-lg font-semibold mb-2">CLI Interface</h3>
197194
<div class="max-w-6xl mx-auto">
198195
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-4">Supported Platforms</h2>
199196
<p class="text-slate-400 text-center mb-16 max-w-2xl mx-auto">Works with popular course platforms out of the box</p>
200-
197+
201198
<div class="grid sm:grid-cols-3 gap-8 max-w-4xl mx-auto">
202199
<!-- Skool -->
203200
<div class="text-center">
@@ -208,7 +205,7 @@ <h3 class="text-xl font-semibold mb-2">Skool</h3>
208205
<p class="text-slate-400 text-sm">Community courses</p>
209206
<span class="inline-block mt-3 px-3 py-1 bg-emerald-500/20 text-emerald-400 text-xs font-medium rounded-full">✓ Supported</span>
210207
</div>
211-
208+
212209
<!-- HighLevel -->
213210
<div class="text-center">
214211
<div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center text-3xl font-bold text-white shadow-lg">
@@ -218,7 +215,7 @@ <h3 class="text-xl font-semibold mb-2">HighLevel</h3>
218215
<p class="text-slate-400 text-sm">Membership portals</p>
219216
<span class="inline-block mt-3 px-3 py-1 bg-emerald-500/20 text-emerald-400 text-xs font-medium rounded-full">✓ Supported</span>
220217
</div>
221-
218+
222219
<!-- LearningSuite -->
223220
<div class="text-center">
224221
<div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-brand-500 to-purple-500 rounded-2xl flex items-center justify-center text-3xl font-bold text-white shadow-lg">
@@ -237,7 +234,7 @@ <h3 class="text-xl font-semibold mb-2">LearningSuite</h3>
237234
<div class="max-w-3xl mx-auto">
238235
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-4">Installation</h2>
239236
<p class="text-slate-400 text-center mb-12">Get started in seconds</p>
240-
237+
241238
<div class="space-y-6">
242239
<!-- NPM Install -->
243240
<div class="code-block rounded-xl p-5 border border-slate-700/50">
@@ -248,10 +245,10 @@ <h2 class="text-3xl sm:text-4xl font-bold text-center mb-4">Installation</h2>
248245
<span class="text-slate-500">$</span> <span class="text-emerald-400">npm</span> <span class="text-white">install -g offcourse</span>
249246
</code>
250247
</div>
251-
248+
252249
<!-- Or npx -->
253250
<div class="text-center text-slate-500">or run directly with npx</div>
254-
251+
255252
<!-- NPX -->
256253
<div class="code-block rounded-xl p-5 border border-slate-700/50">
257254
<div class="flex items-center justify-between mb-3">
@@ -261,7 +258,7 @@ <h2 class="text-3xl sm:text-4xl font-bold text-center mb-4">Installation</h2>
261258
<span class="text-slate-500">$</span> <span class="text-emerald-400">npx</span> <span class="text-white">offcourse sync</span> <span class="text-brand-400">&lt;url&gt;</span>
262259
</code>
263260
</div>
264-
261+
265262
<!-- Requirements -->
266263
<div class="bg-slate-800/30 rounded-xl p-5 border border-slate-700/30">
267264
<h4 class="font-semibold mb-3 flex items-center gap-2">
@@ -282,7 +279,7 @@ <h4 class="font-semibold mb-3 flex items-center gap-2">
282279
<div class="max-w-4xl mx-auto text-center">
283280
<h2 class="text-3xl sm:text-4xl font-bold mb-6">Ready to learn offline?</h2>
284281
<p class="text-slate-400 mb-10 text-lg">Save your courses and access them anytime, anywhere.</p>
285-
282+
286283
<div class="flex flex-col sm:flex-row gap-4 justify-center">
287284
<a href="https://www.npmjs.com/package/offcourse" class="bg-red-600 hover:bg-red-500 text-white px-8 py-4 rounded-xl font-semibold text-lg transition-colors flex items-center justify-center gap-2">
288285
<img src="icon-npm.svg" alt="" class="w-5 h-5 invert">

0 commit comments

Comments
 (0)