apunkt/ktx
1
0
Fork 0
mirror of https://github.com/Kaelio/ktx.git synced 2026-06-07 07:55:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(docs): style Mode A (terminal) code blocks

Browse source 
Dark frame in both themes, traffic-light dots, zsh/title label,
copy button in the header. Wizard-glyph content (◆ ◇) also routes
through this mode.
This commit is contained in:
Luca Martial 2026-05-11 00:39:14 -07:00
parent cc033f1ce7
commit 86fc6aa463
1 changed files with 79 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

79
docs/app/global.css
View file

@ -165,6 +165,85 @@ pre {
background: transparent !important;
}
/* ═══════════════════════════════════════════
Code blocks — context-aware modes
═══════════════════════════════════════════ */
/* Shared wrapper base */
.ktx-code {
border-radius: 14px;
overflow: hidden;
margin: 1.25rem 0;
font-family: var(--font-mono), ui-monospace, SFMono-Regular, monospace;
transition: box-shadow 0.3s var(--ktx-ease), border-color 0.3s ease;
}
.ktx-code-body {
margin: 0 !important;
padding: 14px 18px !important;
font-size: 13.5px !important;
line-height: 1.7 !important;
overflow-x: auto;
border: 0 !important;
border-radius: 0 !important;
}
/* Neutralize the outer figure styling that our wrapper now owns */
figure:has(> .ktx-code),
figure[data-rehype-pretty-code-figure]:has(.ktx-code) {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0;
}
/* ── Mode A: Terminal ─────────────────────── */
.ktx-code-terminal {
background: #0c1417;
border: 1px solid rgba(255, 255, 255, 0.08);
color: #c8c3bc;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 12px 32px -16px rgba(0, 0, 0, 0.3);
}
.ktx-code-terminal:hover {
border-color: rgba(34, 211, 238, 0.2);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 14px 32px -12px rgba(34, 211, 238, 0.18);
}
.ktx-code-terminal-head {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}
.ktx-tl-dot {
width: 11px;
height: 11px;
border-radius: 999px;
flex-shrink: 0;
}
.ktx-code-terminal-label {
margin-left: 8px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.4);
}
.ktx-code-body-terminal {
background: transparent !important;
color: #c8c3bc !important;
}
/* Tables */
table {
border-radius: 8px;