feat: replace basic frontmatter display with structured accent card UI featuring badges, tags, and boolean flags
This commit is contained in:
+233
-16
@@ -30,6 +30,25 @@
|
||||
--danger-bg: #3d1a18;
|
||||
--success: #3fb950;
|
||||
--success-bg: #1a3d1f;
|
||||
|
||||
/* Accent Card variables */
|
||||
--accent-card: #58a6ff;
|
||||
--accent-bg: #1f2a3a;
|
||||
--accent-text: #79c0ff;
|
||||
--green: #3fb950;
|
||||
--green-bg: #1a3d1f;
|
||||
--purple: #a371f7;
|
||||
--purple-bg: #2d1b4e;
|
||||
--surface: #161b22;
|
||||
--surface2: #0f1117;
|
||||
--surface3: #0d0f14;
|
||||
--border-md: #30363d;
|
||||
--text: #e6edf3;
|
||||
--text-2: #8b949e;
|
||||
--text-3: #484f58;
|
||||
--mono: 'JetBrains Mono', monospace;
|
||||
--radius: 6px;
|
||||
--radius-lg: 10px;
|
||||
}
|
||||
|
||||
/* ===== THEME — LIGHT ===== */
|
||||
@@ -55,6 +74,25 @@
|
||||
--danger-bg: #ffebe9;
|
||||
--success: #1a7f37;
|
||||
--success-bg: #dafbe1;
|
||||
|
||||
/* Accent Card variables */
|
||||
--accent-card: #4f6ef7;
|
||||
--accent-bg: #eef1fe;
|
||||
--accent-text: #2540c9;
|
||||
--green: #1a7f50;
|
||||
--green-bg: #eaf5ee;
|
||||
--purple: #6b40c4;
|
||||
--purple-bg: #f1ecfd;
|
||||
--surface: #ffffff;
|
||||
--surface2: #f2f1ef;
|
||||
--surface3: #ebe9e6;
|
||||
--border-md: rgba(0,0,0,0.13);
|
||||
--text: #1a1917;
|
||||
--text-2: #6b6a67;
|
||||
--text-3: #a09e9b;
|
||||
--mono: 'JetBrains Mono', monospace;
|
||||
--radius: 6px;
|
||||
--radius-lg: 10px;
|
||||
}
|
||||
|
||||
/* ===== BASE ===== */
|
||||
@@ -1061,35 +1099,214 @@ select {
|
||||
background: var(--tag-bg);
|
||||
}
|
||||
|
||||
/* Frontmatter collapsible */
|
||||
.frontmatter-toggle {
|
||||
/* ===== FRONTMATTER — ACCENT CARD ===== */
|
||||
|
||||
/* Frontmatter section wrapper */
|
||||
.fm-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Header toggle */
|
||||
.fm-header {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
user-select: none;
|
||||
transition: color 150ms ease;
|
||||
}
|
||||
.frontmatter-toggle:hover {
|
||||
.fm-header:hover {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.frontmatter-content {
|
||||
background: var(--code-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
|
||||
/* Chevron icon */
|
||||
.fm-chevron {
|
||||
transition: transform 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.fm-chevron.open {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.fm-chevron.closed {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/* Accent Card main container */
|
||||
.ac-card {
|
||||
border: 1px solid var(--border-md);
|
||||
border-left: 3px solid var(--accent-card);
|
||||
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
|
||||
background: var(--surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ZONE 1 — Top strip */
|
||||
.ac-top {
|
||||
padding: 12px 16px 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ac-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-family: var(--mono);
|
||||
letter-spacing: -0.01em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ac-badge {
|
||||
padding: 2px 9px;
|
||||
border-radius: 99px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.ac-badge.green {
|
||||
background: var(--green-bg);
|
||||
color: var(--green);
|
||||
}
|
||||
.ac-badge.blue {
|
||||
background: var(--accent-bg);
|
||||
color: var(--accent-text);
|
||||
}
|
||||
.ac-badge.purple {
|
||||
background: var(--purple-bg);
|
||||
color: var(--purple);
|
||||
}
|
||||
.ac-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ZONE 2 — Body 2 columns */
|
||||
.ac-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
.ac-col {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 20px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
white-space: pre-wrap;
|
||||
display: none;
|
||||
}
|
||||
.frontmatter-content.open {
|
||||
display: block;
|
||||
.ac-col + .ac-col {
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
.ac-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
padding: 4px 0;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.ac-row + .ac-row {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.ac-k {
|
||||
color: var(--text-3);
|
||||
font-size: 11px;
|
||||
font-family: var(--mono);
|
||||
min-width: 110px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ac-v {
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.ac-v.mono {
|
||||
font-family: var(--mono);
|
||||
font-weight: 400;
|
||||
color: var(--text-2);
|
||||
font-size: 11px;
|
||||
}
|
||||
.ac-v.muted {
|
||||
color: var(--text-3);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ZONE 3 — Tags row */
|
||||
.ac-tags-row {
|
||||
padding: 10px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.ac-tags-k {
|
||||
font-size: 11px;
|
||||
font-family: var(--mono);
|
||||
color: var(--text-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ac-tags-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
.ac-tag {
|
||||
padding: 2px 9px;
|
||||
border-radius: 99px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: var(--accent-bg);
|
||||
color: var(--accent-text);
|
||||
border: 1px solid rgba(79, 110, 247, 0.18);
|
||||
}
|
||||
|
||||
/* ZONE 4 — Flags row */
|
||||
.ac-flags-row {
|
||||
padding: 9px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--surface2);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.ac-flags-k {
|
||||
font-size: 11px;
|
||||
font-family: var(--mono);
|
||||
color: var(--text-3);
|
||||
margin-right: 2px;
|
||||
}
|
||||
.flag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border-md);
|
||||
}
|
||||
.flag-chip.on {
|
||||
background: var(--green-bg);
|
||||
color: var(--green);
|
||||
border-color: rgba(26, 127, 80, 0.2);
|
||||
}
|
||||
.flag-chip.off {
|
||||
background: var(--surface3);
|
||||
color: var(--text-3);
|
||||
}
|
||||
.flag-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* --- Raw source view --- */
|
||||
|
||||
Reference in New Issue
Block a user