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,298 @@
|
||||
/* ==========================================================================
|
||||
Article Workspace & Markdown Prose (components/article.css)
|
||||
========================================================================== */
|
||||
|
||||
/* Left Sticky Sidebar */
|
||||
.article-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--tile-gap);
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.sidebar-tile {
|
||||
background-color: var(--bg-surface);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Document Table of Contents */
|
||||
.toc-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.toc-link {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
padding: 4px 6px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
line-height: 1.4;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toc-link:hover {
|
||||
background-color: var(--bg-elevated);
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.toc-link.active {
|
||||
color: var(--accent-cyan);
|
||||
background-color: var(--bg-canvas);
|
||||
border-left: 2px solid var(--accent-cyan);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.toc-sub {
|
||||
padding-left: 16px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
/* Main Article Reading Container */
|
||||
.article-tile {
|
||||
background-color: var(--bg-surface);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 36px 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.article-tile {
|
||||
padding: 24px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Article Header */
|
||||
.article-header-block {
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
padding-bottom: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.article-breadcrumbs {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.article-breadcrumbs a {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.article-breadcrumbs a:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.article-main-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.article-main-title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.article-meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Markdown Prose Hierarchy */
|
||||
.markdown-prose {
|
||||
max-width: var(--prose-max-width);
|
||||
font-size: 1.02rem;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.markdown-prose p {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.markdown-prose h2 {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.45rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 36px 0 16px 0;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.markdown-prose h3 {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 28px 0 12px 0;
|
||||
}
|
||||
|
||||
.markdown-prose a {
|
||||
color: var(--accent-cyan);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.markdown-prose a:hover {
|
||||
background-color: var(--accent-cyan);
|
||||
color: var(--bg-canvas);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Inline Code */
|
||||
.markdown-prose code:not(pre code) {
|
||||
font-family: var(--font-code);
|
||||
font-size: 0.88rem;
|
||||
background-color: var(--bg-canvas);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--border-radius-xs);
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
/* Keyboard Shortcut Hints */
|
||||
kbd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
background-color: var(--bg-surface);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--border-radius-xs);
|
||||
color: var(--text-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Markdown Callouts */
|
||||
.markdown-callout {
|
||||
margin: 20px 0;
|
||||
padding: 14px 18px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
background-color: var(--bg-canvas);
|
||||
font-size: 0.94rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.callout-note {
|
||||
border-left: 4px solid var(--accent-cyan);
|
||||
}
|
||||
|
||||
.callout-warning {
|
||||
border-left: 4px solid var(--accent-amber);
|
||||
}
|
||||
|
||||
.callout-title {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.callout-note .callout-title {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.callout-warning .callout-title {
|
||||
color: var(--accent-amber);
|
||||
}
|
||||
|
||||
/* Monospace Tables */
|
||||
.table-container {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
margin: 22px 0;
|
||||
}
|
||||
|
||||
.markdown-prose table,
|
||||
.markdown-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.86rem;
|
||||
font-family: var(--font-mono);
|
||||
text-align: left;
|
||||
margin: 20px 0;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
.markdown-prose th,
|
||||
.markdown-table th {
|
||||
background-color: var(--bg-canvas);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
padding: 8px 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown-prose td,
|
||||
.markdown-table td {
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
padding: 8px 12px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.markdown-prose tr:hover,
|
||||
.markdown-table tr:hover {
|
||||
background-color: var(--bg-elevated);
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
.markdown-prose ul, .markdown-prose ol {
|
||||
margin: 16px 0 18px 24px;
|
||||
}
|
||||
|
||||
.markdown-prose li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
/* ==========================================================================
|
||||
Terminal Code Blocks & Syntax Highlighting (components/code-box.css)
|
||||
========================================================================== */
|
||||
|
||||
/* Terminal Code Box Component */
|
||||
.terminal-code-box,
|
||||
.code-block-container {
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background-color: var(--bg-canvas);
|
||||
overflow: hidden;
|
||||
font-family: var(--font-code);
|
||||
margin: 18px 0;
|
||||
}
|
||||
|
||||
.code-titlebar,
|
||||
.code-block-header {
|
||||
background-color: var(--bg-surface);
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
padding: 6px 14px;
|
||||
font-size: 0.74rem;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.code-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.copy-code-btn {
|
||||
background: transparent;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
color: var(--text-muted);
|
||||
padding: 2px 8px;
|
||||
font-family: inherit;
|
||||
font-size: 0.72rem;
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
.copy-code-btn:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.code-content,
|
||||
.code-block-container pre,
|
||||
.markdown-prose pre {
|
||||
padding: 14px 16px;
|
||||
font-size: 0.82rem;
|
||||
overflow-x: auto;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.55;
|
||||
margin: 18px 0;
|
||||
background-color: var(--bg-canvas);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-family: var(--font-code);
|
||||
}
|
||||
|
||||
/* Syntax Highlighting Tokens (Prism / 11ty Syntax Highlight) */
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #5c6370;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #abb2bf;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: var(--accent-amber);
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #c678dd;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #61afef;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: var(--accent-amber);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/* ==========================================================================
|
||||
Footer Tile (components/footer.css)
|
||||
========================================================================== */
|
||||
|
||||
.footer-tile {
|
||||
background-color: var(--bg-surface);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 14px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.74rem;
|
||||
color: var(--text-muted);
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* ==========================================================================
|
||||
Global Status Header Bar (components/global-bar.css)
|
||||
========================================================================== */
|
||||
|
||||
.global-bar {
|
||||
background-color: var(--bg-surface);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 10px 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brand-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-group:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: var(--accent-green);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bar-nav {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bar-link {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bar-link:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.bar-link.active {
|
||||
color: var(--text-primary);
|
||||
border-bottom: 1px solid var(--accent-cyan);
|
||||
}
|
||||
|
||||
.bar-link.external::after {
|
||||
content: " ↗";
|
||||
font-size: 0.75em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
/* ==========================================================================
|
||||
Tile Containers & Hero Tile (components/tiles.css)
|
||||
========================================================================== */
|
||||
|
||||
/* Standard Tile Container */
|
||||
.tile {
|
||||
background-color: var(--bg-surface);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.tile-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
padding-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tile-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tile-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.74rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.tile-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Hero Lander Tile */
|
||||
.hero-tile {
|
||||
background-color: var(--bg-surface);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-left: 3px solid var(--accent-cyan);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 24px 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hero-pretitle {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
color: var(--accent-cyan);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-main-title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 2.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.hero-main-title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-landing-text {
|
||||
font-size: 0.98rem;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.65;
|
||||
max-width: 82ch;
|
||||
}
|
||||
|
||||
/* Filter Pills Row in Hero Tile */
|
||||
.filter-pills-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.filter-tag-btn {
|
||||
background-color: var(--bg-canvas);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
color: var(--text-muted);
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--border-radius-sm);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-tag-btn:hover {
|
||||
border-color: var(--accent-cyan);
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.filter-tag-btn.active {
|
||||
background-color: var(--accent-cyan);
|
||||
color: var(--bg-canvas);
|
||||
border-color: var(--accent-cyan);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Directive Callout Box inside Hero */
|
||||
.hero-directive-box {
|
||||
background-color: var(--bg-canvas);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 12px 16px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-directive-box strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ==========================================================================
|
||||
Tiling Window Manager Grids & Layout (layout.css)
|
||||
========================================================================== */
|
||||
|
||||
/* Outer Shell Container */
|
||||
.tiling-layout {
|
||||
width: 100%;
|
||||
max-width: var(--site-max-width);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--tile-gap);
|
||||
}
|
||||
|
||||
/* Asymmetric 2-Column Split Grid (Lander: Lead Article + Telemetry Sidebar) */
|
||||
.split-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.25fr 0.75fr;
|
||||
gap: var(--tile-gap);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.split-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Article Workspace Grid (Left Sidebar TOC + Main Reading Workspace) */
|
||||
.article-workspace-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 290px 1fr;
|
||||
gap: var(--tile-gap);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.article-workspace-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Generic Symmetrical Grids */
|
||||
.grid-2col {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--tile-gap);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-2col {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/* ==========================================================================
|
||||
Main Stylesheet (main.css)
|
||||
River Rooks Blog - Modular CSS Architecture
|
||||
========================================================================== */
|
||||
|
||||
/* 1. Design Tokens & CSS Custom Properties */
|
||||
@import "./tokens.css";
|
||||
|
||||
/* 2. Global Reset & Baseline Typography */
|
||||
@import "./reset.css";
|
||||
|
||||
/* 3. Tiling Window Manager Grids */
|
||||
@import "./layout.css";
|
||||
|
||||
/* 4. Component Styles */
|
||||
@import "./components/global-bar.css";
|
||||
@import "./components/tiles.css";
|
||||
@import "./components/cards.css";
|
||||
@import "./components/code-box.css";
|
||||
@import "./components/article.css";
|
||||
@import "./components/footer.css";
|
||||
@@ -0,0 +1,52 @@
|
||||
/* ==========================================================================
|
||||
CSS Reset & Baseline (reset.css)
|
||||
Strict adherence to developer-centric minimalism & instant transitions
|
||||
========================================================================== */
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-prose);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 24px 16px 48px 16px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Hard anti-pattern enforcement: instant transitions across UI elements */
|
||||
a, button, input, select, textarea {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* High-contrast keyboard accessibility outline */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent-cyan);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
img, svg, video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Monospace font assignment for code & structural elements */
|
||||
code, pre, kbd, samp {
|
||||
font-family: var(--font-code);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/* ==========================================================================
|
||||
Design Tokens (tokens.css)
|
||||
River Rooks Blog - Native Dark Mode Architecture
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
/* Surface & Canvas Colors */
|
||||
--bg-canvas: #0d0f12; /* Deep slate/charcoal canvas */
|
||||
--bg-surface: #121417; /* Tile & card surface */
|
||||
--bg-elevated: #1c1f26; /* Hovered surface */
|
||||
|
||||
/* Borders & Dividers */
|
||||
--border-color: #2b303b; /* Crisp 1px border */
|
||||
--border-width: 1px;
|
||||
--border-radius: 4px; /* Strictly capped at 4px */
|
||||
--border-radius-sm: 2px;
|
||||
--border-radius-xs: 1px;
|
||||
|
||||
/* Typography */
|
||||
--font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
|
||||
--font-code: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
--font-prose: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
|
||||
/* Text Colors */
|
||||
--text-primary: #e0e6f0; /* Light off-white prose */
|
||||
--text-muted: #8a95a5; /* Monospace metadata */
|
||||
|
||||
/* High-Signal Terminal Accents */
|
||||
--accent-cyan: #00f0ff; /* Primary active accent */
|
||||
--accent-green: #00e676; /* Success / online indicator */
|
||||
--accent-amber: #ffb700; /* Warning / highlight accent */
|
||||
--accent-red: #ff5252; /* Danger / caution accent */
|
||||
|
||||
/* Structural Dimensions */
|
||||
--site-max-width: 1140px;
|
||||
--tile-gap: 16px;
|
||||
--prose-max-width: 68ch;
|
||||
}
|
||||
Reference in New Issue
Block a user