From a4f3e3a4bb63b8065c6e6eb7cbaae5ff00fccc56 Mon Sep 17 00:00:00 2001 From: xylophonez Date: Tue, 7 Apr 2026 10:05:00 +0000 Subject: [PATCH] style: overhaul --- src/App.tsx | 53 +++++++-- src/favicon.ico | Bin 3270 -> 6926 bytes src/load1.png | Bin 0 -> 618 bytes src/load2.png | Bin 0 -> 656 bytes src/load3.png | Bin 0 -> 700 bytes src/load4.png | Bin 0 -> 711 bytes src/load5.png | Bin 0 -> 654 bytes src/load6.png | Bin 0 -> 633 bytes src/styles.css | 279 ++++++++++++++++++++++++++++------------------ src/vite-env.d.ts | 1 + 10 files changed, 214 insertions(+), 119 deletions(-) create mode 100644 src/load1.png create mode 100644 src/load2.png create mode 100644 src/load3.png create mode 100644 src/load4.png create mode 100644 src/load5.png create mode 100644 src/load6.png create mode 100644 src/vite-env.d.ts diff --git a/src/App.tsx b/src/App.tsx index 28b1af5..3b8f2ac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,12 @@ import { } from "./config"; import { arweaveUrl, getReadableDate, loadManifest, loadPostContent } from "./lib"; import type { Frontmatter, ManifestPost } from "./types"; +import load1 from "./load1.png"; +import load2 from "./load2.png"; +import load3 from "./load3.png"; +import load4 from "./load4.png"; +import load5 from "./load5.png"; +import load6 from "./load6.png"; type LoadState = "idle" | "loading" | "error"; @@ -21,6 +27,9 @@ type MetaInput = { modifiedTime?: string; }; +const LOADER_FRAMES = [load1, load2, load3, load4, load5, load6]; +const FORCE_LOADER_PREVIEW = false; + const toAbsoluteUrl = (path = "/"): string => new URL(path, BLOG_SITE_URL).toString(); const setMetaTag = (attribute: "name" | "property", key: string, content?: string): void => { @@ -91,9 +100,19 @@ const usePageMetadata = ({ }; function BlisterLoader() { + const [frame, setFrame] = useState(0); + + useEffect(() => { + const timer = window.setInterval(() => { + setFrame((value) => (value + 1) % LOADER_FRAMES.length); + }, 70); + + return () => window.clearInterval(timer); + }, []); + return (
- +
); } @@ -137,18 +156,23 @@ function App() { return (
- -
+ {FORCE_LOADER_PREVIEW ? ( + + ) : ( } /> + )}
); @@ -341,9 +366,15 @@ function PostPage({ {updatedDate && Updated {updatedDate}} {post.readingTime && {post.readingTime} min read} {post.wordCount && {post.wordCount} words} + {post.postTxId.slice(0, 8)}... [permalink] + + + [arweave] + + {bannerTxId && ( diff --git a/src/favicon.ico b/src/favicon.ico index 18dbc2d6c2d92cb5ba6fb9eeb940169448745af1..24ac122afd9abcbf10d4f447a7731344c5afceae 100644 GIT binary patch literal 6926 zcmeH{F-`+95Jeq{0}vrmP^O}z2q!??gC;H4;Y{@00Er7wAS%H2+TUY`6>l~L%`RGE z!o2-|zQ-HFCjJ}_=kfPh_`C|?GK6p)??b$wy1mv8{M4fuQ7S0rpUaZ;ywcpGI~S#4gH`w z9T{TMFvwSm!7y=2R1AYv3&V0oS%=`6}%$@$5O$fCSCUI>j@po3iH z*p#&+HZhY&CZ>KILSpDa7|##XGCFbT?5Ds)s?%XIUDgn>3`N9XV9Yu;=ga_0)!fMQ zr>Q>a{f2!dt?G?+Ke=m6TCuKrh7D=Qz^*C-%X34O$)6DX2ZjZ0_Z0S$La6;X5HWNH ztWMPG4T(AoyyQ0j1EQ2 zS%A%${UN>Q4K+;hi2Rv;u#_02Fu4;G7gVS)4wW|7(gR|uO$(?d20Z_l{edd#$Dtyo zT10Fu<_R<%+|2Qe`n;j)<9VZ-sto)(o(TH)0Xz-zMw>BNJK8zbo3Xhr*96uC)&$lB J)&%}a;0Ky~q@4f& delta 46 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 literal 0 HcmV?d00001 diff --git a/src/load6.png b/src/load6.png new file mode 100644 index 0000000000000000000000000000000000000000..22718e741628ab7407d954e6a91206944f17aa5d GIT binary patch literal 633 zcmV-<0*3vGP)z@;j|==^1poj5AY({UO#lFTCIA3{ga82g0001h=l}q9FaQARU;qF* zm;eA5aGbhPJOBUy32;bRa{vG?BLDy{BLR4&KXw2B00(qQO+^Rl1P2K^HE)+K=l}o# z&q+i=y4(dmx6Z`QqIrn_HB#uRx=qeK-sgkxtWZMJG0;xKZ)8nH z3~-QkAi7pq%sL9niVV@b3_ZbR+)?V_u`QD_41!evgt7*vEDRoZ?@@*zvuaA+lhxch zxZg7KVuS+29Lqp6eDHWfu;aR^EBiTv^98^e<+R}e9m!)JJNv5+rhgeC~(o= zI?!!(E<^4cVp4f$!-`+Pr3@LQOL$g5h`jm7X=sBo$F*NK_*g6V_AE|7wKBxuDMq#q zlwm1w0tm((6RiBx0JC8p&w@yq+0Y+uWUYHn6n>8vTQHx{ TS>y1!00000NkvXXu0mjfGg}0L literal 0 HcmV?d00001 diff --git a/src/styles.css b/src/styles.css index 8cb14a4..3162db0 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,23 +1,39 @@ +@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap"); + :root { - color: #0a0a0a; + color: #101010; background: #ffffff; - font-family: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 1.6; + font-family: "DM Sans", sans-serif; + line-height: 1.55; + --site-max-width: 760px; --brand-red: #f60000; --brand-purple: #9611ff; --brand-blue: #86dafe; --brand-yellow: #fee55f; --brand-green: #33f22f; + --line: #121212; + --line-soft: #d8d8d8; + --muted: #585858; + --accent: #0072c8; } * { box-sizing: border-box; + border-radius: 0; +} + +html, +body, +#root { + min-height: 100%; } body { margin: 0; background: #ffffff; color: #111111; + font-family: "DM Sans", sans-serif; + font-weight: 400; } a { @@ -26,21 +42,32 @@ a { text-underline-offset: 3px; } +a:hover { + color: var(--accent); +} + .page { min-height: 100vh; - padding: 24px; + width: min(var(--site-max-width), 100% - 48px); + margin: 0 auto; + padding: 0 0 48px; } .header { - border-bottom: 2px solid #111111; - padding-bottom: 14px; - margin-bottom: 28px; + border-bottom: 1px solid var(--line); +} + +.header-row { + display: flex; + align-items: center; + min-height: 72px; + padding: 0 24px; } .brand { - font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; + font-family: "DM Sans", sans-serif; font-size: 1.3rem; - font-weight: 600; + font-weight: 500; letter-spacing: 0.08em; text-decoration: none; display: inline-flex; @@ -87,12 +114,14 @@ a { } .content { - max-width: 860px; - margin: 0 auto; + max-width: 100%; } .status { - font-size: 1rem; + margin: 0; + padding: 24px; + border-top: 1px solid var(--line); + font-size: 0.95rem; } .loader-screen { @@ -101,58 +130,39 @@ a { place-items: center; } -.loader-square { - width: 22px; - height: 22px; - background: var(--brand-red); - animation: blister-flicker 180ms steps(1, end) infinite; -} - -@keyframes blister-flicker { - 0% { - background: var(--brand-red); - } - 20% { - background: var(--brand-purple); - } - 40% { - background: var(--brand-blue); - } - 60% { - background: var(--brand-yellow); - } - 80% { - background: var(--brand-green); - } - 100% { - background: var(--brand-red); - } +.loader-frame { + display: block; + width: min(45px, 11vw); + height: auto; + image-rendering: pixelated; + border-radius: 8px; } .index { - display: grid; - gap: 28px; + border-top: 0; +} + +.post-card { + padding: 22px 24px 26px; + border-bottom: 1px solid var(--line-soft); +} + +.post-card-featured { + border-bottom: 1px solid var(--line-soft); + background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%); } .index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - column-gap: 28px; - row-gap: 28px; } -.post-card { - padding-top: 0; +.index-grid .post-card { + border-bottom: 0; } -.index-grid .post-card:nth-child(n + 3) { - border-top: 1px solid #111111; - padding-top: 18px; -} - -.post-card-featured { - border-top: 0; - padding-top: 0; +.index-grid .post-card:nth-child(odd) { + border-right: 0; } .banner-link { @@ -164,36 +174,43 @@ a { display: block; width: 100%; height: auto; - border: 1px solid #111111; + border: 1px solid var(--line); } .post-title-link { text-decoration: none; } +.post-title-link:hover .post-title { + color: var(--accent); +} + .post-title { margin: 0; - font-size: 1.8rem; - line-height: 1.2; + font-size: clamp(1.32rem, 2.15vw, 1.7rem); + font-weight: 500; + line-height: 1.18; + letter-spacing: -0.02em; } .post-description { - margin: 10px 0 12px; - font-size: 1.04rem; + margin: 12px 0 14px; + font-size: 0.97rem; + color: #222222; } .meta-row { display: flex; flex-wrap: wrap; gap: 0; - font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; - font-size: 0.86rem; + font-size: 0.82rem; + color: var(--muted); } .meta-row > span + span { position: relative; - margin-left: 14px; - padding-left: 14px; + margin-left: 12px; + padding-left: 12px; } .meta-row > span + span::before { @@ -203,51 +220,61 @@ a { top: 50%; width: 6px; height: 1px; - background: #111111; + background: #7d7d7d; transform: translateY(-50%); } -.post-meta-row > span + span::before { - content: "|"; - width: auto; - height: auto; - background: none; - top: 0; - transform: none; -} - .post { - max-width: 760px; + border-top: 0; } -.post-topline { - margin-bottom: 16px; -} - -.home-link { - text-decoration: none; - border-bottom: 1px solid #111111; +.post-header { + max-width: 100%; + margin: 0; + padding: 24px 24px 0; + border-bottom: 0; } .post-header h1 { margin: 0; - line-height: 1.15; - font-size: clamp(2rem, 6vw, 3.4rem); + line-height: 1.07; + font-size: clamp(2rem, 5vw, 3rem); + font-weight: 500; + letter-spacing: -0.03em; + max-width: 26ch; } .post-header p { - margin: 12px 0; - font-size: 1.06rem; + margin: 14px 0 0; + max-width: 70ch; + font-size: 1rem; + color: #1b1b1b; +} + +.post-meta-row { + margin-top: 14px; +} + +.post-meta-row a { + color: #1f1f1f; } .post-hero { - margin-top: 24px; + max-width: 100%; + margin: 0; + padding: 24px 24px 0; + border-bottom: 0; +} + +.post-hero .post-banner { + width: 100%; + margin: 0; } .article { - margin-top: 32px; - border-top: 1px solid #111111; - padding-top: 24px; + max-width: 100%; + margin: 0; + padding: 30px 24px 52px; } .article > *:first-child { @@ -257,56 +284,92 @@ a { .article h2, .article h3, .article h4 { - margin-top: 1.9em; - line-height: 1.25; + margin-top: 1.6em; + margin-bottom: 0.55em; + line-height: 1.2; + font-weight: 500; +} + +.article p, +.article li, +.article blockquote { + font-size: 1.04rem; +} + +.article ul, +.article ol { + padding-left: 1.3rem; +} + +.article a { + color: var(--accent); } .article pre { - border: 1px solid #111111; + border: 1px solid var(--line); padding: 14px; overflow: auto; - background: #ffffff; + background: #f7f7f7; + font-size: 0.9rem; } .article code { - font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; + font-size: 0.9em; +} + +.article pre, +.article kbd, +.article samp { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; } .article blockquote { - margin-left: 0; - padding-left: 16px; - border-left: 2px solid #111111; + margin: 1.2em 0; + padding: 0 0 0 14px; + border-left: 2px solid var(--line); + color: #292929; } .article img { max-width: 100%; height: auto; + border: 0; } -@media (max-width: 740px) { +@media (max-width: 860px) { .page { - padding: 16px; + width: 100%; + border-left: 0; + border-right: 0; + padding-top: 0; } - .index { - grid-template-columns: 1fr; + .header-row { + min-height: 64px; + padding: 0 16px; + } + + .post-card, + .post-header, + .post-hero, + .article, + .status { + padding-left: 16px; + padding-right: 16px; } .index-grid { grid-template-columns: 1fr; } - .index-grid .post-card:nth-child(n + 3) { - border-top: 0; - padding-top: 0; - } - - .index-grid .post-card + .post-card { - border-top: 1px solid #111111; - padding-top: 18px; + .index-grid .post-card:nth-child(odd) { + border-right: 0; } .post-title { - font-size: 1.45rem; + font-size: 1.38rem; } } diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +///