From 1141b5837c5cca20e8e28f954b5152e19dd41122 Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Thu, 21 Nov 2024 15:14:38 +0100
Subject: [PATCH] Better light mode

---
 .../content/blog/the-curse-of-markdown.mdx    |  1 -
 .../blog/the-curse-of-markdown.steps.tsx      | 40 +++++++++----------
 .../content/blog/the-curse-of-markdown.tsx    | 23 +++++------
 apps/web/public/grid.svg                      |  4 ++
 4 files changed, 35 insertions(+), 33 deletions(-)
 create mode 100644 apps/web/public/grid.svg

diff --git a/apps/web/content/blog/the-curse-of-markdown.mdx b/apps/web/content/blog/the-curse-of-markdown.mdx
index 0302f2dc..46c16dc5 100644
--- a/apps/web/content/blog/the-curse-of-markdown.mdx
+++ b/apps/web/content/blog/the-curse-of-markdown.mdx
@@ -3,7 +3,6 @@ title: The Curse of Markdown
 description: And the content website wasteland
 date: 2024-11-21
 authors: [pomber]
-draft: true
 ---
 
 import { Layout, RainbowList } from "./the-curse-of-markdown"
diff --git a/apps/web/content/blog/the-curse-of-markdown.steps.tsx b/apps/web/content/blog/the-curse-of-markdown.steps.tsx
index e6b5fa03..52ae9efa 100644
--- a/apps/web/content/blog/the-curse-of-markdown.steps.tsx
+++ b/apps/web/content/blog/the-curse-of-markdown.steps.tsx
@@ -6,14 +6,14 @@ const lean = {
   extra: "opacity-0",
   points: [
     { rich: 10, cost: 50, pop: [], className: "bg-teal-600" },
-    { rich: 20, cost: 50, pop: [], className: "bg-zinc-800" },
-    { rich: 30, cost: 50, pop: [], className: "bg-zinc-800" },
-    { rich: 40, cost: 50, pop: [], className: "bg-zinc-800" },
-    { rich: 50, cost: 50, pop: [], className: "bg-zinc-800" },
-    { rich: 60, cost: 50, pop: [], className: "bg-zinc-800" },
-    { rich: 70, cost: 50, pop: [], className: "bg-zinc-800" },
-    { rich: 80, cost: 50, pop: [], className: "bg-zinc-800" },
-    { rich: 90, cost: 50, pop: [], className: "bg-zinc-800" },
+    { rich: 20, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
+    { rich: 30, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
+    { rich: 40, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
+    { rich: 50, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
+    { rich: 60, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
+    { rich: 70, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
+    { rich: 80, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
+    { rich: 90, cost: 50, pop: [], className: "bg-zinc-400 dark:bg-zinc-800" },
     {
       rich: 65,
       cost: 33.6,
@@ -109,15 +109,15 @@ const distribution = {
 const wasteland = {
   wall: "opacity-50 top-0 bottom-0 right-[15%] bg-pink-500/10 border-x-2 border-pink-500/80",
   points: [
-    { rich: 10, className: "bg-zinc-500" },
-    { rich: 20, className: "bg-zinc-500" },
-    { rich: 30, className: "bg-zinc-500" },
-    { rich: 40, className: "bg-zinc-500" },
-    { rich: 50, className: "bg-zinc-500" },
-    // { rich: 60, className: "bg-zinc-500" },
-    // { rich: 70, className: "bg-zinc-500" },
-    // { rich: 80, className: "bg-zinc-500" },
-    { rich: 90, className: "bg-zinc-500" },
+    { rich: 10, className: "bg-zinc-400 dark:bg-zinc-500" },
+    { rich: 20, className: "bg-zinc-400 dark:bg-zinc-500" },
+    { rich: 30, className: "bg-zinc-400 dark:bg-zinc-500" },
+    { rich: 40, className: "bg-zinc-400 dark:bg-zinc-500" },
+    { rich: 50, className: "bg-zinc-400 dark:bg-zinc-500" },
+    // { rich: 60, className: "bg-zinc-400 dark:bg-zinc-500" },
+    // { rich: 70, className: "bg-zinc-400 dark:bg-zinc-500" },
+    // { rich: 80, className: "bg-zinc-400 dark:bg-zinc-500" },
+    { rich: 90, className: "bg-zinc-400 dark:bg-zinc-500" },
   ],
 }
 const repopulating = {
@@ -134,9 +134,9 @@ const repopulating = {
       className:
         "bg-purple-500 data-[main=true]:opacity-0 data-[extra]:animate-appear",
     },
-    { rich: 60, className: "bg-zinc-500" },
-    { rich: 70, className: "bg-zinc-500" },
-    { rich: 80, className: "bg-zinc-500" },
+    { rich: 60, className: "bg-zinc-400 dark:bg-zinc-500" },
+    { rich: 70, className: "bg-zinc-400 dark:bg-zinc-500" },
+    { rich: 80, className: "bg-zinc-400 dark:bg-zinc-500" },
   ],
 }
 const repopulating2 = {
diff --git a/apps/web/content/blog/the-curse-of-markdown.tsx b/apps/web/content/blog/the-curse-of-markdown.tsx
index cb505b53..8f82bb55 100644
--- a/apps/web/content/blog/the-curse-of-markdown.tsx
+++ b/apps/web/content/blog/the-curse-of-markdown.tsx
@@ -108,11 +108,11 @@ function Axis({ cost, rich }: { cost?: string; rich?: string }) {
     <>
       <div className={cn("transition-all", rich)}>
         <div
-          className="absolute bottom-2 left-2 right-3 h-0.5 bg-zinc-100"
+          className="absolute bottom-2 left-2 right-3 h-0.5 bg-zinc-900 dark:bg-zinc-100"
           style={{ translate: "0 50%" }}
         />
         <div
-          className="border-zinc-100 absolute right-2 bottom-2"
+          className="border-zinc-900 dark:border-zinc-100 absolute right-2 bottom-2"
           style={{
             width: 0,
             height: 0,
@@ -122,17 +122,17 @@ function Axis({ cost, rich }: { cost?: string; rich?: string }) {
             translate: "0 50%",
           }}
         />
-        <div className="absolute bottom-3 right-2 text-sm text-zinc-100">
+        <div className="absolute bottom-3 right-2 text-sm text-zinc-900 dark:text-zinc-100">
           Richness
         </div>
       </div>
       <div className={cn("transition-all", cost)}>
         <div
-          className="absolute top-3 left-2 bottom-2 w-0.5 bg-zinc-100"
+          className="absolute top-3 left-2 bottom-2 w-0.5 bg-zinc-900 dark:bg-zinc-100"
           style={{ translate: "-50% 0" }}
         />
         <div
-          className="border-zinc-100 absolute top-2 left-2"
+          className="border-zinc-900 dark:border-zinc-100 absolute top-2 left-2"
           style={{
             width: 0,
             height: 0,
@@ -143,7 +143,9 @@ function Axis({ cost, rich }: { cost?: string; rich?: string }) {
             translate: "-50% 0",
           }}
         />
-        <div className="absolute top-1 left-5 text-sm text-zinc-100">Cost</div>
+        <div className="absolute top-1 left-5 text-sm text-zinc-900 dark:text-zinc-100">
+          Cost
+        </div>
       </div>
     </>
   )
@@ -240,11 +242,8 @@ function SmallLayout({
       {steps.map((step, i) => (
         <div key={i}>
           <div
-            className="h-96 w-[324px] max-w-full relative mx-auto bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black rounded"
-            style={{
-              backgroundPosition: "center",
-              backgroundSize: "26px",
-            }}
+            className="h-96 w-[324px] max-w-full relative mx-auto bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-white rounded"
+            style={{ backgroundPosition: "center", backgroundSize: "26px" }}
           >
             <Chart data={data[i]} />
           </div>
@@ -269,7 +268,7 @@ function ScrollyLayout({
     >
       <div className="flex-1">
         <div
-          className="top-64 sticky h-96 flex-1 rounded bg-[url(/dark-grid.svg)] dark:bg-[#e6edff05] bg-black flex items-center justify-center"
+          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"
           style={{
             backgroundPosition: "center",
             backgroundSize: "26px",
diff --git a/apps/web/public/grid.svg b/apps/web/public/grid.svg
new file mode 100644
index 00000000..b4c64f98
--- /dev/null
+++ b/apps/web/public/grid.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#111"
+  stroke-opacity="0.1">
+  <path d="M0 .5H31.5V32" />
+</svg>