syntaxbullet/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Implement mobile-friendly control panel toggle and remove keyboard shortcuts hint.

Browse Source
This commit is contained in:
syntaxbullet
2026-02-10 13:02:41 +01:00
parent bb4ca0610d
commit faa9609254
10 changed files with 1160 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
src/pages/blog/[slug].astro
View File

@@ -1,6 +1,7 @@
---
import { getEntry } from "astro:content";
import Layout from "../../layouts/Layout.astro";
import Sidebar from "../../components/Sidebar.astro";
const { slug } = Astro.params;
if (!slug) {
@@ -16,117 +17,243 @@ if (!entry) {
const { Content } = await entry.render();
---
<Layout title={entry.data.title} showScroll={true}>
<main>
<article>
<section class="h-entry">
<header>
<h1 class="p-name">{entry.data.title}</h1>
<div class="metadata">
<time
class="dt-published"
datetime={entry.data.pubDate.toISOString()}
>
{entry.data.pubDate.toISOString().slice(0, 10)}
</time>
{
entry.data.updatedDate && (
<div class="last-updated">
Last updated on{" "}
<time>
<Layout title={entry.data.title}>
<div class="split-layout">
<Sidebar />
<main class="content-workspace">
<div class="content-container">
<article class="h-entry">
<header class="post-header">
<a href="/blog" class="back-link">
&larr; Back to Blog
</a>
<h1 class="p-name">{entry.data.title}</h1>
<div class="metadata">
<span class="dt-published">
{entry.data.pubDate.toISOString().slice(0, 10)}
</span>
{
entry.data.updatedDate && (
<span class="updated-date">
&nbsp;&bull;&nbsp; Updated:{" "}
{entry.data.updatedDate
.toISOString()
.slice(0, 10)}
</time>
</div>
)
}
</span>
)
}
</div>
<div class="divider"></div>
</header>
<div class="e-content">
<Content />
</div>
</header>
<div class="e-content">
<Content />
</div>
</section>
</article>
</main>
</article>
</div>
</main>
</div>
</Layout>
<style>
main {
width: calc(100% - 2em);
/* Split Layout */
.split-layout {
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
background: var(--bg-color);
}
/* Content Workspace */
.content-workspace {
flex-grow: 1;
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
background: #050505;
overflow-y: auto;
overflow-x: hidden;
}
.content-container {
max-width: 800px;
margin: 0;
padding: 2em;
width: 100%;
margin: 0 auto;
padding: 4rem 2rem;
box-sizing: border-box;
}
header {
margin-bottom: 2rem;
/* Header Styling */
.post-header {
margin-bottom: 3rem;
}
header a {
.back-link {
display: inline-block;
margin-bottom: 1rem;
color: var(--text-color);
opacity: 0.6;
font-family: var(--font-mono);
margin-bottom: 1.5rem;
font-family:
system-ui,
-apple-system,
sans-serif;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.2s;
}
header a:hover {
opacity: 1;
.back-link:hover {
color: #fff;
}
.title {
font-size: 2em;
margin: 0.25em 0 0;
}
hr {
border-top: 1px solid var(--text-color);
opacity: 0.3;
margin: 1rem 0;
h1 {
font-size: 2.5rem;
font-weight: 800;
margin: 0 0 1rem 0;
line-height: 1.2;
color: #fff;
letter-spacing: -0.5px;
}
.metadata {
font-family: var(--font-mono);
color: var(--text-color);
opacity: 0.8;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 2rem;
}
/* Markdown Styles */
.divider {
height: 1px;
background: rgba(255, 255, 255, 0.2);
width: 100%;
}
/* Content Styling (Markdown) */
.e-content {
line-height: 1.6;
font-family: var(--font-mono); /* Keep vibe */
font-size: 1rem;
line-height: 1.8;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
font-family:
system-ui,
-apple-system,
sans-serif; /* Clean reading font */
}
/* Typography Overrides */
.e-content :global(h1),
.e-content :global(h2),
.e-content :global(h3),
.e-content :global(h4) {
margin-top: 2rem;
margin-bottom: 1rem;
color: var(--text-color);
font-weight: bold;
font-family:
system-ui,
-apple-system,
sans-serif;
color: #fff;
margin-top: 3rem;
margin-bottom: 1.5rem;
line-height: 1.3;
font-weight: 700;
letter-spacing: -0.02em;
}
.e-content :global(h2) {
font-size: 1.8rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 0.5rem;
}
.e-content :global(h3) {
font-size: 1.4rem;
}
.e-content :global(p) {
margin-bottom: 1.5rem;
}
.e-content :global(a) {
color: var(--text-color);
text-decoration: underline;
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
transition: border-color 0.2s;
}
.e-content :global(a:hover) {
border-bottom-color: #fff;
}
.e-content :global(ul),
.e-content :global(ol) {
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.e-content :global(li) {
margin-bottom: 0.5rem;
}
.e-content :global(blockquote) {
border-left: 4px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.03);
margin: 2rem 0;
padding: 1rem 1.5rem;
font-style: italic;
color: rgba(255, 255, 255, 0.8);
}
.e-content :global(img) {
max-width: 100%;
height: auto;
border-radius: 8px; /* Softer corners */
margin: 2rem 0;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Code Blocks */
.e-content :global(pre) {
background: #111 !important; /* Force override */
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px; /* Softer corners */
padding: 1.5rem;
margin: 2rem 0;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 0.9rem;
line-height: 1.5;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.e-content :global(code) {
background: #111;
padding: 2px 5px;
border-radius: 2px;
font-family: var(--font-mono);
background: rgba(255, 255, 255, 0.1);
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.85em;
color: #fff;
}
.e-content :global(pre) {
background: #111;
padding: 1rem;
border: 1px solid #333;
overflow-x: auto;
.e-content :global(pre code) {
background: none;
padding: 0;
color: inherit;
font-size: 1em;
}
/* Responsive */
@media (max-width: 1024px) {
.split-layout {
flex-direction: column;
overflow: hidden;
height: 100dvh;
}
.content-workspace {
height: auto;
flex-grow: 1;
overflow-y: auto;
}
}
</style>