feat: implement dynamic Eleventy tiling blog, modular CSS, and agent customizations
- Add project foundation README.md and root AGENTS.md for pair programming - Configure .agents/ rules and skills for Eleventy tiling and Obsidian publishing - Decompose monolithic styles into modular tokens, reset, layout, and component CSS - Implement Nunjucks layout inheritance (base.njk, post.njk, page.njk) and reusable partials - Configure Eleventy 3 with markdown-it-anchor, syntax highlighting, and dynamic collections - Migrate sample prototypes into dynamic dispatches lander, gateway, and Markdown posts - Add multi-stage Dockerfile and clean-URL nginx.conf for production serving
This commit is contained in:
venus
@@ -0,0 +1,366 @@
|
||||
/* ==========================================================================
|
||||
Cards & Feeds (components/cards.css)
|
||||
========================================================================== */
|
||||
|
||||
/* Featured Lead Article Card (Inside Tile) */
|
||||
.featured-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.featured-badge-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.76rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.badge-pinned {
|
||||
color: var(--accent-amber);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.featured-article-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.featured-article-title:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.featured-prose {
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.featured-cta-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
border-top: var(--border-width) solid var(--border-color);
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background-color: var(--accent-cyan);
|
||||
color: var(--bg-canvas);
|
||||
padding: 6px 14px;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
text-decoration: none;
|
||||
border-radius: var(--border-radius-sm);
|
||||
border: var(--border-width) solid var(--accent-cyan);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: transparent;
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
/* Sidebar Stats / Telemetry Box */
|
||||
.sidebar-stats-box {
|
||||
background-color: var(--bg-canvas);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stat-val {
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Curated Topic Track Item */
|
||||
.topic-track-item {
|
||||
background-color: var(--bg-canvas);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.topic-track-item:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
background-color: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.topic-track-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.topic-track-item:hover .topic-track-title {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.topic-track-desc {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Full-Width Chronological Article Feed */
|
||||
.feed-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.feed-card {
|
||||
background-color: var(--bg-canvas);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 16px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.feed-card:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
background-color: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.feed-meta-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.76rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.feed-date {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.feed-heading {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.feed-card:hover .feed-heading {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.feed-excerpt {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feed-tags-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 6px;
|
||||
border-top: var(--border-width) solid var(--border-color);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.74rem;
|
||||
color: var(--text-muted);
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tag-cluster {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background-color: var(--bg-surface);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.tag-chip:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
/* Featured Service Card (Homelab Gateway) */
|
||||
.blog-service-feature {
|
||||
background-color: var(--bg-canvas);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.blog-feature-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.badge-core {
|
||||
background-color: var(--accent-cyan);
|
||||
color: var(--bg-canvas);
|
||||
padding: 2px 6px;
|
||||
font-weight: 700;
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
.blog-feature-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.blog-feature-title:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.blog-feature-desc {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.blog-sublinks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
border-top: var(--border-width) solid var(--border-color);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.blog-sublink-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
padding: 4px 6px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
.blog-sublink-item:hover {
|
||||
background-color: var(--bg-elevated);
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
/* Homelab Services Mini-Grid */
|
||||
.services-mini-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
.services-mini-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.service-tile-item {
|
||||
background-color: var(--bg-canvas);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 12px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.service-tile-item:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
background-color: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.service-item-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.service-tile-item:hover .service-item-title {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.service-item-tag {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.service-item-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Infrastructure Node Telemetry */
|
||||
.node-stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
background-color: var(--bg-canvas);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.node-name {
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.node-load {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
Reference in New Issue
Block a user