Skip to content

Commit 1141b58

Browse files
pomberpomber
committed
Better light mode
1 parent ccc281c commit 1141b58

File tree

4 files changed

+35
-33
lines changed

4 files changed

+35
-33
lines changed

‎apps/web/content/blog/the-curse-of-markdown.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ title: The Curse of Markdown
33
description: And the content website wasteland
44
date: 2024-11-21
55
authors: [pomber]
6-
draft: true
76
---
87

98
import { Layout, RainbowList } from "./the-curse-of-markdown"

‎apps/web/content/blog/the-curse-of-markdown.steps.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ const lean = {
66
extra: "opacity-0",
77
points: [
88
{ rich: 10, cost: 50, pop: [], className: "bg-teal-600" },
9-
{ rich: 20, cost: 50, pop: [], className: "bg-zinc-800" },
10-
{ rich: 30, cost: 50, pop: [], className: "bg-zinc-800" },
11-
{ rich: 40, cost: 50, pop: [], className: "bg-zinc-800" },
12-
{ rich: 50, cost: 50, pop: [], className: "bg-zinc-800" },
13-
{ rich: 60, cost: 50, pop: [], className: "bg-zinc-800" },
14-
{ rich: 70, cost: 50, pop: [], className: "bg-zinc-800" },
15-
{ rich: 80, cost: 50, pop: [], className: "bg-zinc-800" },
16-
{ rich: 90, cost: 50, pop: [], className: "bg-zinc-800" },
9+
{ rich: 20, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
10+
{ rich: 30, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
11+
{ rich: 40, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
12+
{ rich: 50, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
13+
{ rich: 60, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
14+
{ rich: 70, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
15+
{ rich: 80, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
16+
{ rich: 90, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
1717
{
1818
rich: 65,
1919
cost: 33.6,
@@ -109,15 +109,15 @@ const distribution = {
109109
const wasteland = {
110110
wall: "opacity-50 top-0 bottom-0 right-[15%] bg-pink-500/10 border-x-2 border-pink-500/80",
111111
points: [
112-
{ rich: 10, className: "bg-zinc-500" },
113-
{ rich: 20, className: "bg-zinc-500" },
114-
{ rich: 30, className: "bg-zinc-500" },
115-
{ rich: 40, className: "bg-zinc-500" },
116-
{ rich: 50, className: "bg-zinc-500" },
117-
// { rich: 60, className: "bg-zinc-500" },
118-
// { rich: 70, className: "bg-zinc-500" },
119-
// { rich: 80, className: "bg-zinc-500" },
120-
{ rich: 90, className: "bg-zinc-500" },
112+
{ rich: 10, className: "bg-zinc-400 dark:bg-zinc-500" },
113+
{ rich: 20, className: "bg-zinc-400 dark:bg-zinc-500" },
114+
{ rich: 30, className: "bg-zinc-400 dark:bg-zinc-500" },
115+
{ rich: 40, className: "bg-zinc-400 dark:bg-zinc-500" },
116+
{ rich: 50, className: "bg-zinc-400 dark:bg-zinc-500" },
117+
// { rich: 60, className: "bg-zinc-400 dark:bg-zinc-500" },
118+
// { rich: 70, className: "bg-zinc-400 dark:bg-zinc-500" },
119+
// { rich: 80, className: "bg-zinc-400 dark:bg-zinc-500" },
120+
{ rich: 90, className: "bg-zinc-400 dark:bg-zinc-500" },
121121
],
122122
}
123123
const repopulating = {
@@ -134,9 +134,9 @@ const repopulating = {
134134
className:
135135
"bg-purple-500 data-[main=true]:opacity-0 data-[extra]:animate-appear",
136136
},
137-
{ rich: 60, className: "bg-zinc-500" },
138-
{ rich: 70, className: "bg-zinc-500" },
139-
{ rich: 80, className: "bg-zinc-500" },
137+
{ rich: 60, className: "bg-zinc-400 dark:bg-zinc-500" },
138+
{ rich: 70, className: "bg-zinc-400 dark:bg-zinc-500" },
139+
{ rich: 80, className: "bg-zinc-400 dark:bg-zinc-500" },
140140
],
141141
}
142142
const repopulating2 = {

‎apps/web/content/blog/the-curse-of-markdown.tsx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -108,11 +108,11 @@ function Axis({ cost, rich }: { cost?: string; rich?: string }) {
108108
<>
109109
<div className={cn("transition-all", rich)}>
110110
<div
111-
className="absolute bottom-2 left-2 right-3 h-0.5 bg-zinc-100"
111+
className="absolute bottom-2 left-2 right-3 h-0.5 bg-zinc-900 dark:bg-zinc-100"
112112
style={{ translate: "0 50%" }}
113113
/>
114114
<div
115-
className="border-zinc-100 absolute right-2 bottom-2"
115+
className="border-zinc-900 dark:border-zinc-100 absolute right-2 bottom-2"
116116
style={{
117117
width: 0,
118118
height: 0,
@@ -122,17 +122,17 @@ function Axis({ cost, rich }: { cost?: string; rich?: string }) {
122122
translate: "0 50%",
123123
}}
124124
/>
125-
<div className="absolute bottom-3 right-2 text-sm text-zinc-100">
125+
<div className="absolute bottom-3 right-2 text-sm text-zinc-900 dark:text-zinc-100">
126126
Richness
127127
</div>
128128
</div>
129129
<div className={cn("transition-all", cost)}>
130130
<div
131-
className="absolute top-3 left-2 bottom-2 w-0.5 bg-zinc-100"
131+
className="absolute top-3 left-2 bottom-2 w-0.5 bg-zinc-900 dark:bg-zinc-100"
132132
style={{ translate: "-50% 0" }}
133133
/>
134134
<div
135-
className="border-zinc-100 absolute top-2 left-2"
135+
className="border-zinc-900 dark:border-zinc-100 absolute top-2 left-2"
136136
style={{
137137
width: 0,
138138
height: 0,
@@ -143,7 +143,9 @@ function Axis({ cost, rich }: { cost?: string; rich?: string }) {
143143
translate: "-50% 0",
144144
}}
145145
/>
146-
<div className="absolute top-1 left-5 text-sm text-zinc-100">Cost</div>
146+
<div className="absolute top-1 left-5 text-sm text-zinc-900 dark:text-zinc-100">
147+
Cost
148+
</div>
147149
</div>
148150
</>
149151
)
@@ -240,11 +242,8 @@ function SmallLayout({
240242
{steps.map((step, i) => (
241243
<div key={i}>
242244
<div
243-
className="h-96 w-[324px] max-w-full relative mx-auto bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black rounded"
244-
style={{
245-
backgroundPosition: "center",
246-
backgroundSize: "26px",
247-
}}
245+
className="h-96 w-[324px] max-w-full relative mx-auto bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-white rounded"
246+
style={{ backgroundPosition: "center", backgroundSize: "26px" }}
248247
>
249248
<Chart data={data[i]} />
250249
</div>
@@ -269,7 +268,7 @@ function ScrollyLayout({
269268
>
270269
<div className="flex-1">
271270
<div
272-
className="top-64 sticky h-96 flex-1 rounded bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black flex items-center justify-center"
271+
className="top-64 sticky h-96 flex-1 rounded bg-[url(/grid.svg)] dark:bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-zinc-300/10 flex items-center justify-center"
273272
style={{
274273
backgroundPosition: "center",
275274
backgroundSize: "26px",

‎apps/web/public/grid.svg‎

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)