dangrubbb/dangrubb.net
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

checkpoint: blog rethemed to crush (teal logo, white bg, teal accents)

Browse Source
This commit is contained in:
dangrubbb
2026-05-31 09:01:51 -04:00
parent b38cd8ba52
commit b3eabbd98f
1 changed files with 98 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/pages/blog/index.astro
View File

@ -1,15 +1,19 @@
---
import Base from '../../layouts/Base.astro';
import GlitchBard from '../../components/GlitchBard.astro';
import CrushBase from '../../layouts/CrushBase.astro';
import posts from '../../data/posts.json';
---
<Base title="dangrubb.net/blog">
<CrushBase 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>
<header class="blog-header">
<div class="header-logo">
<img src="/src/img/DanGrubbLogoTeal.png" alt="dangrubb" class="logo-img">
</div>
<p class="page-title">
<span class="title-name">dangrubb</span><span class="title-dot">.</span><span class="title-tld">net</span><span class="title-slash">/</span><span class="title-page">blog</span>
</p>
<p class="back-link"><a href="/">← home</a></p>
</header>
<div class="blogs-container">
{posts.map(post => (
@ -25,66 +29,111 @@ import posts from '../../data/posts.json';
</article>
))}
</div>
<footer class="blog-footer">
<a href="/">← home</a>
</footer>
</div>
</Base>
</CrushBase>
<style>
@import '../../styles/bard.css';
.page {
padding: 20px 20px 40px;
min-height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
background: var(--crush-white);
}
.page-title, .back-link {
margin: 20px auto 0;
max-width: 400px;
.blog-header {
text-align: center;
line-height: 1.3;
font-size: 0.875rem;
padding: 30px 20px 20px;
background: linear-gradient(180deg, #e8f5f5 0%, transparent 100%);
border-bottom: 3px solid var(--crush-teal);
}
.header-logo {
display: flex;
justify-content: center;
margin-bottom: 12px;
}
.logo-img {
width: 60px;
height: 60px;
object-fit: contain;
}
.page-title {
font-family: 'Alfa Slab One', 'Georgia', serif;
font-size: clamp(1.8rem, 5vw, 3rem);
letter-spacing: -1px;
line-height: 1;
margin-bottom: 8px;
}
.title-name { color: var(--crush-teal); }
.title-dot { color: var(--crush-teal-light); }
.title-tld { color: var(--crush-teal-dark); }
.title-slash { color: var(--crush-teal); }
.title-page { color: var(--crush-teal-dark); font-size: 0.7em; }
.back-link {
font-size: 0.875rem;
color: var(--crush-teal);
margin-top: 4px;
}
.back-link a {
color: var(--crush-teal);
opacity: 0.7;
}
.back-link a:hover { opacity: 1; }
.blogs-container {
margin: 40px auto 0;
max-width: 65em;
margin: 30px auto;
max-width: 700px;
width: 100%;
padding: 0 20px;
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;
margin-bottom: 40px;
padding: 24px;
border: 1px solid rgba(0, 139, 139, 0.12);
border-radius: 6px;
background: linear-gradient(135deg, #f0faf9, #f8f9fa);
max-width: 700px;
width: 100%;
}
.blog-post-title {
color: #ffff00;
font-weight: bold;
font-size: 1.8rem;
color: var(--crush-teal);
font-weight: 700;
font-size: 1.6rem;
text-align: center;
margin-bottom: 6px;
}
.blog-post-date {
color: #aa95bd;
font-size: 0.9rem;
color: var(--crush-teal-light);
font-size: 0.85rem;
text-align: center;
margin-bottom: 20px;
opacity: 0.7;
}
.blog-post-content {
color: #9d9aa4;
font-size: 0.95rem;
line-height: 1.6;
color: #333;
text-align: center;
}
.blog-post-content :global(p) {
margin: 0 0 15px;
}
.blog-post-image {
display: flex;
justify-content: center;
@ -95,13 +144,26 @@ import posts from '../../data/posts.json';
height: auto;
max-height: 60vh;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 12px rgba(0, 102, 102, 0.15);
}
.blog-footer {
text-align: center;
padding: 30px 20px 40px;
border-top: 3px solid var(--crush-teal);
background: linear-gradient(0deg, #e8f5f5 0%, transparent 100%);
margin-top: auto;
}
.blog-footer a {
color: var(--crush-teal);
font-weight: 600;
}
@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; }
.blog-header { padding: 20px 15px 15px; }
.logo-img { width: 45px; height: 45px; }
.blogs-container { padding: 0 15px; }
.blog-post { padding: 16px; margin-bottom: 24px; }
.blog-post-title { font-size: 1.3rem; }
}
</style>