Better light mode

Author: pomber

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"

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 = {

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",