Skip to content

Commit fc7b428

Browse files
SaltyAomSaltyAom
committed
📘 doc: dark theme
1 parent 931dd7b commit fc7b428

File tree

7 files changed

+59
-94
lines changed

7 files changed

+59
-94
lines changed

‎components/blog/Landing.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<Ray class="h-[62.5vh] -top-14 left-0 z-[100] opacity-30 dark:opacity-[.55] pointer-events-none" />
2+
<Ray class="h-[62.5vh] -top-18 left-0 z-[100] opacity-30 dark:opacity-[.55] pointer-events-none" />
33
<header class="flex flex-col justify-center items-center max-w-3xl gap-3 w-full mx-auto pt-20 pb-4">
44
<h1 class="text-2xl md:text-3xl text-gray-700 dark:text-gray-100 font-semibold">
55
Latest Updates

‎components/landing/heading.vue

Lines changed: 30 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -2,112 +2,65 @@
22
<div class="relative h-fit">
33
<div class="absolute w-full h-full -z-1 pointer-events-none xl:p-4">
44
<div class="relative w-full h-full overflow-hidden">
5-
<div
6-
class="absolute bg-gray-800 w-full h-full xl:rounded-2xl"
7-
/>
8-
<canvas
9-
id="canvas"
10-
class="absolute block w-full h-full xl:rounded-2xl"
11-
/>
5+
<div class="absolute bg-gray-800 w-full h-full xl:rounded-2xl" />
6+
<canvas id="canvas" class="absolute block w-full h-full xl:rounded-2xl" />
127
</div>
138
</div>
14-
<header
15-
id="header"
16-
class="relative flex justify-center items-center w-full h-fit"
17-
>
9+
<header id="header" class="relative flex justify-center items-center w-full h-fit">
1810
<div
19-
class="flex flex-col lg:flex-row justify-center items-center gap-4 w-full max-w-6xl mx-auto px-2 md:px-8 py-12"
20-
>
21-
<section
22-
class="flex flex-[4] flex-col gap-6 md:gap-4 px-6 sm:px-0"
23-
>
24-
<h1
25-
class="text-4xl md:text-6xl text-white font-semibold title-shadow"
26-
style="line-height: 1.375"
27-
>
11+
class="flex flex-col lg:flex-row justify-center items-center gap-4 w-full max-w-6xl mx-auto px-2 md:px-8 py-12">
12+
<section class="flex flex-[4] flex-col gap-6 md:gap-4 px-6 sm:px-0">
13+
<h1 class="text-4xl md:text-6xl text-white font-semibold title-shadow" style="line-height: 1.375">
2814
Fully Type-Safe<br />Web Framework
2915
</h1>
3016
<p class="text-white/90 text-2xl font-semibold">
3117
Optimized for
32-
<a
33-
href="https://bun.sh"
34-
target="_blank"
35-
class="underline"
36-
>
18+
<a href="https://bun.sh" target="_blank" class="underline">
3719
Bun
3820
</a>
3921
</p>
40-
<ul
41-
class="text-xl md:text-2xl text-white/90 title-shadow leading-relaxed list-dash leading-loose"
42-
>
22+
<ul class="text-xl md:text-2xl text-white/90 title-shadow leading-relaxed list-dash leading-loose">
4323
<li>Familiar Syntax like Express</li>
4424
<li>Fast by default like Fastify</li>
4525
<li>End-to-end type safety like tRPC</li>
4626
</ul>
4727

48-
<div
49-
class="flex flex-col sm:flex-row justify-start items-start text-2xl gap-2 mt-4"
50-
>
51-
<a
52-
href="/introduction"
53-
class="px-6 py-3 bg-black/10 hover:bg-black/25 focus:bg-black/25 backdrop-filter backdrop-blur-sm rounded-xl cursor-pointer transition-colors"
54-
>
28+
<div class="flex flex-col sm:flex-row justify-start items-start text-2xl gap-2 mt-4">
29+
<a href="/introduction"
30+
class="px-6 py-3 bg-black/10 hover:bg-black/25 focus:bg-black/25 backdrop-filter backdrop-blur-sm rounded-xl cursor-pointer transition-colors">
5531
<p id="start" class="font-semibold text-gray-600">
5632
Get Started
5733
</p>
5834
</a>
59-
<a
60-
href="/integrations/cheat-sheet"
61-
class="px-6 py-3 text-white/80 font-normal hover:bg-white/10 focus:hover:bg-white/25 backdrop-filter backdrop-blur-sm rounded-xl transition-colors"
62-
>
35+
<a href="/integrations/cheat-sheet"
36+
class="px-6 py-3 text-white/80 font-normal hover:bg-white/10 focus:hover:bg-white/25 backdrop-filter backdrop-blur-sm rounded-xl transition-colors">
6337
Cheat Sheet 👀
6438
</a>
6539
</div>
66-
<small class="text-white text-lg opacity-65"
67-
>ps. it takes &lt; 30 seconds to start</small
68-
>
40+
<small class="text-white text-lg opacity-65">ps. it takes &lt; 30 seconds to start</small>
6941
</section>
70-
<section
71-
class="flex flex-[3.5] justify-start flex-col gap-6 overflow-auto shadow-2xl max-w-full"
72-
>
42+
<section class="flex flex-[3.5] justify-start flex-col gap-6 overflow-auto shadow-2xl max-w-full">
7343
<code
74-
class="flex flex-col w-full px-1 backdrop-filter backdrop-blur-sm bg-white/60 dark:bg-black/40 rounded-xl border border-solid border-white/40"
75-
>
44+
class="flex flex-col w-full px-1 backdrop-filter backdrop-blur-sm bg-white/60 dark:bg-black/40 rounded-xl border border-solid border-white/40">
7645
<header class="flex w-full px-2 pt-3 gap-1 text-gray-600 dark:text-gray-300">
77-
<button
78-
:class="isActive('typedClient')"
79-
class="px-2 py-1 rounded-lg transition-colors"
80-
@click="code = 'typedClient'"
81-
>
46+
<button :class="isActive('typedClient')" class="px-2 py-1 rounded-lg transition-colors"
47+
@click="code = 'typedClient'">
8248
Typed Client
8349
</button>
84-
<button
85-
:class="isActive('swagger')"
86-
class="px-2 py-1 rounded-lg transition-colors"
87-
@click="code = 'swagger'"
88-
>
50+
<button :class="isActive('swagger')" class="px-2 py-1 rounded-lg transition-colors"
51+
@click="code = 'swagger'">
8952
Swagger
9053
</button>
91-
<button
92-
:class="isActive('plugins')"
93-
class="px-2 py-1 rounded-lg transition-colors"
94-
@click="code = 'plugins'"
95-
>
54+
<button :class="isActive('plugins')" class="px-2 py-1 rounded-lg transition-colors"
55+
@click="code = 'plugins'">
9656
Plugins
9757
</button>
98-
<button
99-
:class="isActive('websocket')"
100-
class="px-2 py-1 rounded-lg transition-colors"
101-
@click="code = 'websocket'"
102-
>
58+
<button :class="isActive('websocket')" class="px-2 py-1 rounded-lg transition-colors"
59+
@click="code = 'websocket'">
10360
WebSocket
10461
</button>
10562
</header>
106-
<Prism
107-
language="typescript"
108-
style="margin: 0"
109-
:key="code"
110-
>
63+
<Prism language="typescript" style="margin: 0" :key="code">
11164
{{ codeSamples[code] }}
11265
</Prism>
11366
</code>
@@ -169,13 +122,11 @@ onMounted(() => {
169122
170123
#header {
171124
--primary: rgba(255, 255, 255, 0.25);
172-
background-image: radial-gradient(
173-
circle,
174-
var(--primary),
175-
var(--primary) 1.5px,
176-
transparent 1.5px,
177-
transparent
178-
);
125+
background-image: radial-gradient(circle,
126+
var(--primary),
127+
var(--primary) 1.5px,
128+
transparent 1.5px,
129+
transparent);
179130
background-size: 2.5rem 2.5rem;
180131
background-repeat: repeat;
181132
}

‎components/midori/hero.vue

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
2-
<Ray class="h-screen -top-14 z-[100] pointer-events-none opacity-[0.35] dark:opacity-50" />
2+
<Ray class="h-screen -top-16 z-[100] pointer-events-none opacity-[0.35] dark:opacity-50" />
33
<div id="splash"
4-
class="pointer-events-none absolute top-[-70vh] max-w-full flex justify-center w-full h-screen opacity-50">
5-
<div :class="isDark ? 'block gradient -dark' : 'block gradient -light'" />
4+
class="pointer-events-none absolute top-[-70vh] max-w-full flex justify-center w-full h-screen opacity-50 block gradient">
65
</div>
76
<header
87
class="relative flex flex-col justify-center items-center font-sans w-full px-6 pt-20 mb-16 md:mb-8 overflow-hidden"
@@ -89,8 +88,4 @@ watch(copied, (value) => {
8988
}, 2000)
9089
}
9190
})
92-
93-
import useDark from './use-dark'
94-
95-
const isDark = useDark()
9691
</script>

‎components/midori/midori.css

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,19 @@
33
height: 1100px;
44
}
55

6-
.gradient.-light {
7-
background: radial-gradient(ellipse at center, #d7e0ff 0%, #eaecff 35%, transparent 70%);
6+
.gradient {
7+
background: radial-gradient(
8+
ellipse at center,
9+
#d7e0ff 0%,
10+
#eaecff 35%,
11+
transparent 70%
12+
);
813
}
914

10-
.gradient.-dark {
11-
background: radial-gradient(ellipse at center, #797ee199 0%, transparent 70%);
12-
}
15+
.dark .gradient {
16+
background: radial-gradient(
17+
ellipse at center,
18+
#797ee199 0%,
19+
transparent 70%
20+
);
21+
}

‎docs/.vitepress/theme/custom.css

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,18 @@ button.copy::after {
7474
}
7575

7676
.VPNavBar {
77+
@apply !border-0;
7778
background: linear-gradient(to right, transparent, var(--vp-nav-bg-color));
7879
backdrop-filter: blur(12px);
7980

81+
& > .container {
82+
& > .content,
83+
& > .title {
84+
background: color-mix(in srgb, var(--vp-c-bg) 80%, transparent);
85+
}
86+
}
87+
8088
& > .container > .content {
81-
background: color-mix(in srgb, var(--vp-c-bg) 80%, transparent);
8289
border-bottom: 0;
8390

8491
& > .curtain::before {

‎docs/essential/path.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ http://localhost:8080/path/page
2424

2525
Elysia use path and method to lookup for the collect resource.
2626

27-
![URL Representation](/essential/url-object.svg)
27+
<div class="bg-white rounded-lg">
28+
<img src="/essential/url-object.svg" alt="URL Representation" />
29+
</div>
2830

2931
A path starts after the origin. Prefix with **/** and ends before search query **(?)**
3032

‎docs/public/essential/url-object-dark.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)