gb/mercury
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

feat: several style improvements

Browse source
This commit is contained in:
grassblock 2025-05-15 10:34:16 +08:00
parent b4f5971cbc
commit a5dd6df739
7 changed files with 91 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/pages/[...slug].astro
View file

@ -14,8 +14,8 @@ const { Content } = await entry.render();
---
<Layout title={`${entry.data.title} | Terminal Blog`} path={`/var/log/${entry.slug}`} description={entry.data.description} >
<h1 class="post-title">{entry.data.title}</h1>
<div class="post-content">
<h1 class="title">{entry.data.title}</h1>
<div class="content">
<Content/>
</div>
</Layout>

6
src/pages/blog.astro
View file

@ -7,9 +7,9 @@ posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDat
---
<Layout title="Blog | Terminal Blog">
<h1 class="post-title">~/blog</h1>
<h1 class="title">~/blog</h1>
<div class="post-content">
<div class="content">
<p class="typewriter">Posts from the terminal.</p>
<div style="margin-top: 2rem;">
@ -17,7 +17,7 @@ posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDat
<div style="margin-top: 1rem; margin-left: 1rem;">
{posts.map((post) => (
<p>
<span style="color: var(--terminal-yellow);">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
<span style="color: #4c566a">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
<a href={`/post/${post.slug}`}>{post.data.title}</a>
</p>
))}

4
src/pages/index.astro
View file

@ -4,9 +4,9 @@ import Layout from '../layouts/Layout.astro';
---
<Layout title="Home | Terminal Blog">
<h1 class="post-title">~/</h1>
<h1 class="title">~/</h1>
<div class="post-content">
<div class="content">
Not much here yet, but you can check out my blog posts <a href="/blog">here</a>.
<br />
If you are site owner, please edit <code>src/pages/index.astro</code> to customize this page.

16
src/pages/post/[...slug].astro
View file

@ -39,9 +39,9 @@ const cover = customFeaturedImage || matchedImage_src?.src || `/post/${slug}/fea
description={entry.data.description}
ogImage={cover}
>
<h1 class="post-title">{entry.data.title}</h1>
<span class="post-date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>
<div class="post-content">
<h1 class="title">{entry.data.title}</h1>
<span class="date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>
<div class="content">
<Content />
</div>
@ -51,4 +51,12 @@ const cover = customFeaturedImage || matchedImage_src?.src || `/post/${slug}/fea
<a href="/blog">&larr; Back to posts</a>
</div>
</Layout>
</Layout>
<style>
span.date {
color: #4c566a;
font-size: 0.9rem;
margin-bottom: 1.5rem;
display: block;
}
</style>

103
src/styles/global.css
View file

@ -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);