2cd6f70b99
- Migrated main site, blog, CV, and music sections to Astro - Component-based architecture with layouts - JSON-based blog posts - Static site generation - Preserved original styling and functionality
108 lines
2.5 KiB
Plaintext
108 lines
2.5 KiB
Plaintext
---
|
|
import Base from '../../layouts/Base.astro';
|
|
import GlitchBard from '../../components/GlitchBard.astro';
|
|
import posts from '../../data/posts.json';
|
|
---
|
|
|
|
<Base title="dangrubb.net/blog">
|
|
<div class="page">
|
|
<GlitchBard />
|
|
|
|
<p class="page-title">dangrubb.net/blog</p>
|
|
<p class="back-link"><a href="/">← back to home</a></p>
|
|
|
|
<div class="blogs-container">
|
|
{posts.map(post => (
|
|
<article class="blog-post" id={post.slug}>
|
|
<h2 class="blog-post-title">{post.title}</h2>
|
|
<div class="blog-post-date">
|
|
{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
|
|
</div>
|
|
<div class="blog-post-content" set:html={post.content} />
|
|
<div class="blog-post-image">
|
|
<img src={post.image} alt={post.title} />
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Base>
|
|
|
|
<style>
|
|
@import '../../styles/bard.css';
|
|
|
|
.page {
|
|
padding: 20px 20px 40px;
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.page-title, .back-link {
|
|
margin: 20px auto 0;
|
|
max-width: 400px;
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.blogs-container {
|
|
margin: 40px auto 0;
|
|
max-width: 65em;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.blog-post {
|
|
margin: 40px auto;
|
|
padding: 20px;
|
|
border: 1px solid rgba(155, 169, 180, 0.2);
|
|
border-radius: 4px;
|
|
background: linear-gradient(135deg, rgba(13, 10, 20, 0.4), rgba(50, 30, 80, 0.2));
|
|
scroll-margin-top: 100px;
|
|
max-width: 700px;
|
|
width: 100%;
|
|
}
|
|
.blog-post-title {
|
|
color: #ffff00;
|
|
font-weight: bold;
|
|
font-size: 1.8rem;
|
|
text-align: center;
|
|
}
|
|
.blog-post-date {
|
|
color: #aa95bd;
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.blog-post-content {
|
|
color: #9d9aa4;
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
text-align: center;
|
|
}
|
|
.blog-post-content :global(p) {
|
|
margin: 0 0 15px;
|
|
}
|
|
.blog-post-image {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
.blog-post-image img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
max-height: 60vh;
|
|
border-radius: 4px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.page { padding: 20px 10px 40px; }
|
|
.page-title, .back-link { font-size: 0.8rem; max-width: 320px; }
|
|
.blog-post { padding: 15px; margin: 20px auto; }
|
|
.blog-post-title { font-size: 1.4rem; }
|
|
}
|
|
</style>
|