fn/hyperzine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: overhaul

Browse Source
This commit is contained in:
fn
2026-04-07 10:05:00 +00:00
parent 852a4a348c
commit a4f3e3a4bb
10 changed files with 214 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/App.tsx
View File

@@ -8,6 +8,12 @@ import {
} from "./config"; } from "./config";
import { arweaveUrl, getReadableDate, loadManifest, loadPostContent } from "./lib"; import { arweaveUrl, getReadableDate, loadManifest, loadPostContent } from "./lib";
import type { Frontmatter, ManifestPost } from "./types"; 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"; type LoadState = "idle" | "loading" | "error";
@@ -21,6 +27,9 @@ type MetaInput = {
modifiedTime?: string; 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 toAbsoluteUrl = (path = "/"): string => new URL(path, BLOG_SITE_URL).toString();
const setMetaTag = (attribute: "name" | "property", key: string, content?: string): void => { const setMetaTag = (attribute: "name" | "property", key: string, content?: string): void => {
@@ -91,9 +100,19 @@ const usePageMetadata = ({
}; };
function BlisterLoader() { 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 ( return (
<div className="loader-screen" aria-live="polite" aria-label="Loading article"> <div className="loader-screen" aria-live="polite" aria-label="Loading article">
<span className="loader-square" /> <img className="loader-frame" src={LOADER_FRAMES[frame]} alt="" aria-hidden="true" />
</div> </div>
); );
} }
@@ -137,18 +156,23 @@ function App() {
return ( return (
<div className="page"> <div className="page">
<header className="header"> <header className="header">
<Link to="/" className="brand"> <div className="header-row">
<span className="brand-mark" aria-hidden="true"> <Link to="/" className="brand">
<span className="brand-square brand-square-red" /> <span className="brand-mark" aria-hidden="true">
<span className="brand-square brand-square-purple" /> <span className="brand-square brand-square-red" />
<span className="brand-square brand-square-blue" /> <span className="brand-square brand-square-purple" />
<span className="brand-square brand-square-yellow" /> <span className="brand-square brand-square-blue" />
<span className="brand-square brand-square-green" /> <span className="brand-square brand-square-yellow" />
</span> <span className="brand-square brand-square-green" />
<span className="brand-text">{BLOG_NAME}</span> </span>
</Link> <span className="brand-text">{BLOG_NAME}</span>
</Link>
</div>
</header> </header>
<main className="content"> <main className="content">
{FORCE_LOADER_PREVIEW ? (
<BlisterLoader />
) : (
<Routes> <Routes>
<Route <Route
path="/" path="/"
@@ -160,6 +184,7 @@ function App() {
/> />
<Route path="*" element={<Navigate to="/" replace />} /> <Route path="*" element={<Navigate to="/" replace />} />
</Routes> </Routes>
)}
</main> </main>
</div> </div>
); );
@@ -341,9 +366,15 @@ function PostPage({
{updatedDate && <span>Updated {updatedDate}</span>} {updatedDate && <span>Updated {updatedDate}</span>}
{post.readingTime && <span>{post.readingTime} min read</span>} {post.readingTime && <span>{post.readingTime} min read</span>}
{post.wordCount && <span>{post.wordCount} words</span>} {post.wordCount && <span>{post.wordCount} words</span>}
<span>{post.postTxId.slice(0, 8)}...</span>
<span> <span>
<a href={permalink}>[permalink]</a> <a href={permalink}>[permalink]</a>
</span> </span>
<span>
<a href={arweaveUrl(post.postTxId)} target="_blank" rel="noreferrer">
[arweave]
</a>
</span>
</div> </div>
</header> </header>
{bannerTxId && ( {bannerTxId && (

BIN
src/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
src/load1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 618 B

BIN
src/load2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 656 B

BIN
src/load3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 700 B

BIN
src/load4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 711 B

BIN
src/load5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 654 B

BIN
src/load6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 633 B

279
src/styles.css
View File

@@ -1,23 +1,39 @@
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap");
:root { :root {
color: #0a0a0a; color: #101010;
background: #ffffff; background: #ffffff;
font-family: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "DM Sans", sans-serif;
line-height: 1.6; line-height: 1.55;
--site-max-width: 760px;
--brand-red: #f60000; --brand-red: #f60000;
--brand-purple: #9611ff; --brand-purple: #9611ff;
--brand-blue: #86dafe; --brand-blue: #86dafe;
--brand-yellow: #fee55f; --brand-yellow: #fee55f;
--brand-green: #33f22f; --brand-green: #33f22f;
--line: #121212;
--line-soft: #d8d8d8;
--muted: #585858;
--accent: #0072c8;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
border-radius: 0;
}
html,
body,
#root {
min-height: 100%;
} }
body { body {
margin: 0; margin: 0;
background: #ffffff; background: #ffffff;
color: #111111; color: #111111;
font-family: "DM Sans", sans-serif;
font-weight: 400;
} }
a { a {
@@ -26,21 +42,32 @@ a {
text-underline-offset: 3px; text-underline-offset: 3px;
} }
a:hover {
color: var(--accent);
}
.page { .page {
min-height: 100vh; min-height: 100vh;
padding: 24px; width: min(var(--site-max-width), 100% - 48px);
margin: 0 auto;
padding: 0 0 48px;
} }
.header { .header {
border-bottom: 2px solid #111111; border-bottom: 1px solid var(--line);
padding-bottom: 14px; }
margin-bottom: 28px;
.header-row {
display: flex;
align-items: center;
min-height: 72px;
padding: 0 24px;
} }
.brand { .brand {
font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-family: "DM Sans", sans-serif;
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 600; font-weight: 500;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-decoration: none; text-decoration: none;
display: inline-flex; display: inline-flex;
@@ -87,12 +114,14 @@ a {
} }
.content { .content {
max-width: 860px; max-width: 100%;
margin: 0 auto;
} }
.status { .status {
font-size: 1rem; margin: 0;
padding: 24px;
border-top: 1px solid var(--line);
font-size: 0.95rem;
} }
.loader-screen { .loader-screen {
@@ -101,58 +130,39 @@ a {
place-items: center; place-items: center;
} }
.loader-square { .loader-frame {
width: 22px; display: block;
height: 22px; width: min(45px, 11vw);
background: var(--brand-red); height: auto;
animation: blister-flicker 180ms steps(1, end) infinite; image-rendering: pixelated;
} border-radius: 8px;
@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);
}
} }
.index { .index {
display: grid; border-top: 0;
gap: 28px; }
.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 { .index-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 28px;
row-gap: 28px;
} }
.post-card { .index-grid .post-card {
padding-top: 0; border-bottom: 0;
} }
.index-grid .post-card:nth-child(n + 3) { .index-grid .post-card:nth-child(odd) {
border-top: 1px solid #111111; border-right: 0;
padding-top: 18px;
}
.post-card-featured {
border-top: 0;
padding-top: 0;
} }
.banner-link { .banner-link {
@@ -164,36 +174,43 @@ a {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: auto;
border: 1px solid #111111; border: 1px solid var(--line);
} }
.post-title-link { .post-title-link {
text-decoration: none; text-decoration: none;
} }
.post-title-link:hover .post-title {
color: var(--accent);
}
.post-title { .post-title {
margin: 0; margin: 0;
font-size: 1.8rem; font-size: clamp(1.32rem, 2.15vw, 1.7rem);
line-height: 1.2; font-weight: 500;
line-height: 1.18;
letter-spacing: -0.02em;
} }
.post-description { .post-description {
margin: 10px 0 12px; margin: 12px 0 14px;
font-size: 1.04rem; font-size: 0.97rem;
color: #222222;
} }
.meta-row { .meta-row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0; gap: 0;
font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.82rem;
font-size: 0.86rem; color: var(--muted);
} }
.meta-row > span + span { .meta-row > span + span {
position: relative; position: relative;
margin-left: 14px; margin-left: 12px;
padding-left: 14px; padding-left: 12px;
} }
.meta-row > span + span::before { .meta-row > span + span::before {
@@ -203,51 +220,61 @@ a {
top: 50%; top: 50%;
width: 6px; width: 6px;
height: 1px; height: 1px;
background: #111111; background: #7d7d7d;
transform: translateY(-50%); transform: translateY(-50%);
} }
.post-meta-row > span + span::before {
content: "|";
width: auto;
height: auto;
background: none;
top: 0;
transform: none;
}
.post { .post {
max-width: 760px; border-top: 0;
} }
.post-topline { .post-header {
margin-bottom: 16px; max-width: 100%;
} margin: 0;
padding: 24px 24px 0;
.home-link { border-bottom: 0;
text-decoration: none;
border-bottom: 1px solid #111111;
} }
.post-header h1 { .post-header h1 {
margin: 0; margin: 0;
line-height: 1.15; line-height: 1.07;
font-size: clamp(2rem, 6vw, 3.4rem); font-size: clamp(2rem, 5vw, 3rem);
font-weight: 500;
letter-spacing: -0.03em;
max-width: 26ch;
} }
.post-header p { .post-header p {
margin: 12px 0; margin: 14px 0 0;
font-size: 1.06rem; max-width: 70ch;
font-size: 1rem;
color: #1b1b1b;
}
.post-meta-row {
margin-top: 14px;
}
.post-meta-row a {
color: #1f1f1f;
} }
.post-hero { .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 { .article {
margin-top: 32px; max-width: 100%;
border-top: 1px solid #111111; margin: 0;
padding-top: 24px; padding: 30px 24px 52px;
} }
.article > *:first-child { .article > *:first-child {
@@ -257,56 +284,92 @@ a {
.article h2, .article h2,
.article h3, .article h3,
.article h4 { .article h4 {
margin-top: 1.9em; margin-top: 1.6em;
line-height: 1.25; 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 { .article pre {
border: 1px solid #111111; border: 1px solid var(--line);
padding: 14px; padding: 14px;
overflow: auto; overflow: auto;
background: #ffffff; background: #f7f7f7;
font-size: 0.9rem;
} }
.article code { .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 { .article blockquote {
margin-left: 0; margin: 1.2em 0;
padding-left: 16px; padding: 0 0 0 14px;
border-left: 2px solid #111111; border-left: 2px solid var(--line);
color: #292929;
} }
.article img { .article img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border: 0;
} }
@media (max-width: 740px) { @media (max-width: 860px) {
.page { .page {
padding: 16px; width: 100%;
border-left: 0;
border-right: 0;
padding-top: 0;
} }
.index { .header-row {
grid-template-columns: 1fr; min-height: 64px;
padding: 0 16px;
}
.post-card,
.post-header,
.post-hero,
.article,
.status {
padding-left: 16px;
padding-right: 16px;
} }
.index-grid { .index-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.index-grid .post-card:nth-child(n + 3) { .index-grid .post-card:nth-child(odd) {
border-top: 0; border-right: 0;
padding-top: 0;
}
.index-grid .post-card + .post-card {
border-top: 1px solid #111111;
padding-top: 18px;
} }
.post-title { .post-title {
font-size: 1.45rem; font-size: 1.38rem;
} }
} }

1
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />