diff --git a/package.json b/package.json index 2ae66ff..8a14899 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@astrojs/node": "^9.2.1", "@astrojs/rss": "^4.0.1", "@astrojs/sitemap": "^3.3.1", + "@fontsource/space-mono": "^5.2.5", "astro": "^5.2.5", "fuse.js": "^7.0.0", "sharp": "^0.34.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c765bc9..ecb71a8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ importers: '@astrojs/sitemap': specifier: ^3.3.1 version: 3.3.1 + '@fontsource/space-mono': + specifier: ^5.2.5 + version: 5.2.5 astro: specifier: ^5.2.5 version: 5.7.10(@azure/identity@4.9.1)(@types/node@22.15.3)(rollup@4.40.1)(typescript@5.8.3)(yaml@2.7.1) @@ -545,6 +548,9 @@ packages: resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==} engines: {node: '>=14'} + '@fontsource/space-mono@5.2.5': + resolution: {integrity: sha512-yFU6K17ko4LEDHl5554n6mCrmDbuc2xYGCZZkCRpAvRtCaJisUjxFdDdph2d2hiIElaiMlinmkmV8IWlbQCMJA==} + '@hapi/hoek@9.3.0': resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==} @@ -3749,6 +3755,8 @@ snapshots: '@fastify/busboy@2.1.1': {} + '@fontsource/space-mono@5.2.5': {} + '@hapi/hoek@9.3.0': {} '@hapi/topo@5.1.0': diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro index b9deb1e..c5aab71 100644 --- a/src/pages/[...slug].astro +++ b/src/pages/[...slug].astro @@ -14,8 +14,8 @@ const { Content } = await entry.render(); --- -

{entry.data.title}

-
+

{entry.data.title}

+
\ No newline at end of file diff --git a/src/pages/blog.astro b/src/pages/blog.astro index baab6e9..0e7f986 100644 --- a/src/pages/blog.astro +++ b/src/pages/blog.astro @@ -7,9 +7,9 @@ posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDat --- -

~/blog

+

~/blog

-
+

Posts from the terminal.

@@ -17,7 +17,7 @@ posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDat
{posts.map((post) => (

- {new Date(post.data.pubDate).toISOString().split('T')[0]} + {new Date(post.data.pubDate).toISOString().split('T')[0]} {post.data.title}

))} diff --git a/src/pages/index.astro b/src/pages/index.astro index 8055825..79733f8 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -4,9 +4,9 @@ import Layout from '../layouts/Layout.astro'; --- -

~/

+

~/

-
+
Not much here yet, but you can check out my blog posts here.
If you are site owner, please edit src/pages/index.astro to customize this page. diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro index 25990b4..b8c69c4 100644 --- a/src/pages/post/[...slug].astro +++ b/src/pages/post/[...slug].astro @@ -39,9 +39,9 @@ const cover = customFeaturedImage || matchedImage_src?.src || `/post/${slug}/fea description={entry.data.description} ogImage={cover} > -

{entry.data.title}

- -
+

{entry.data.title}

+ {new Date(entry.data.pubDate).toISOString().split('T')[0]} +
@@ -51,4 +51,12 @@ const cover = customFeaturedImage || matchedImage_src?.src || `/post/${slug}/fea ← Back to posts
- \ No newline at end of file + + \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index 17d0a69..9c922cf 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,39 +1,40 @@ +@import url(@fontsource/space-mono); /* Global Styles for Terminal Blog */ :root { /* Dark theme (default) */ - --bg-color: #1f2937; - --text-color: #a5b4cf; - --accent-color: #64a0ff; + --bg-color: #2e3440; + --text-color: #d8dee9; + --accent-color: #81a1c1; --border-color: #3b4351; - --header-color: #83a2ce; - --terminal-green: #4ade80; - --terminal-yellow: #fbbf24; - --terminal-red: #ef4444; - --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --header-color: #2e3440; + --terminal-green: #a3be8c; + --terminal-yellow: #ebcb8b; + --terminal-red: #bf616a; + --font-mono: 'Space Mono',ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Light theme */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { - --bg-color: #f3f4f6; - --text-color: #374151; - --accent-color: #3b82f6; + --bg-color: #eceff4; + --text-color: #2e3440; + --accent-color: #81a1c1; --border-color: #d1d5db; - --header-color: #1f2937; - --terminal-green: #059669; - --terminal-yellow: #d97706; - --terminal-red: #dc2626; + --header-color: #2e3440; + --terminal-green: #a3be8c; + --terminal-yellow: #ebcb8b; + --terminal-red: #bf616a; } } /* Light theme override (for switch) */ :root[data-theme="light"] { - --bg-color: #f3f4f6; - --text-color: #374151; - --accent-color: #3b82f6; + --bg-color: #eceff4; + --text-color: #2e3440; + --accent-color: #81a1c1; --border-color: #d1d5db; - --header-color: #1f2937; - --terminal-green: #059669; - --terminal-yellow: #d97706; - --terminal-red: #dc2626; + --header-color: #2e3440; + --terminal-green: #a3be8c; + --terminal-yellow: #ebcb8b; + --terminal-red: #bf616a; } @@ -47,10 +48,13 @@ html, body { font-family: var(--font-mono); background-color: var(--bg-color); color: var(--text-color); - line-height: 1.6; + line-height: 1.5; height: 100%; width: 100%; transition: background-color 0.3s ease, color 0.3s ease; + text-align: left; + word-wrap: break-word; + overflow-wrap: break-word; } a { @@ -146,7 +150,6 @@ main { padding: 15px; } - #toTopBtn { display: none; background: var(--border-color); @@ -177,27 +180,47 @@ main { color: var(--bg-color); } - - -/* Post styles */ -.post-title { +/* Contents */ +h1.title { color: var(--header-color); - margin-bottom: 1rem; - font-size: 1.5rem; - font-weight: normal; + font-size: 1.75rem; + font-weight: bold; + margin-bottom: 0.5rem; } - -.post-date { - color: var(--terminal-yellow); - font-size: 0.9rem; - margin-bottom: 1.5rem; - display: block; -} - -.post-content { +div.content { margin-bottom: 2rem; + + ul, ol, li { + list-style-position: inside; + } + ul { + padding-left: 20px; + margin-top: 0.5em; + margin-bottom: 1em; + } + ul li { + padding-left: 0.5em; + margin-bottom: 0.5em; + line-height: 1.3; + } + + pre { + padding: 1rem; + } + /* Highlighted Code Blocks */ + pre.astro-code, + pre.astro-code span { + background-color: #3b4252 !important; + } + + h1, h2, h3, h4 { + margin: 0.5rem 0; + line-height: 1.3; + } } + + /* Terminal Commands */ .command { color: var(--terminal-green);