Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Update website ✨ #482

Merged
merged 1 commit into from
Nov 21, 2024
Merged

✨ Update website ✨ #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion apps/web/content/blog/the-curse-of-markdown.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
40 changes: 20 additions & 20 deletions apps/web/content/blog/the-curse-of-markdown.steps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 = {
Expand All @@ -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 = {
Expand Down
23 changes: 11 additions & 12 deletions apps/web/content/blog/the-curse-of-markdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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>
</>
)
Expand Down Expand Up @@ -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>
Expand All @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions apps/web/public/grid.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.