mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul Bakaus
282987ad7b
Two problems with the previous hero pass: 1. The whole .skill-detail was capped at 720px, so the hero grid got squeezed into that same width. The demo column tried to hold its fixed 360px height but lost width, forcing the split-container into a portrait aspect ratio with no room for the intended 500x360 landscape layout. 2. The grid used grid-template-columns: minmax(0, 1fr) auto, which meant the demo column was sized to its content (max 564px) but competed with the text column for the shared 720px. The demo got cramped instead of floating as a proper hero module. Fix: drop the max-width from .skill-detail itself. Apply it per body section (.skill-detail-hero, .skill-detail-editorial, .skill-source-card, .skill-references) so each one keeps its readable 720px cap by default but the hero can override it. At >=1280px viewport, .skill-detail-hero--has-demo switches to a grid with a FIXED 564px demo column (guaranteeing the split-container holds its 500x360 landscape) and a minmax(0,1fr) text column, capped at max-width: 1200px. The editorial body below still renders at 720px for line length. Below 1280px the hero stacks as before (header then demo) within the 720px body column, same layout as a minute ago.
1578 lines
34 KiB
CSS
1578 lines
34 KiB
CSS
/*
|
|
* impeccable.style — shared styles for sub-pages and the site-wide header
|
|
*
|
|
* Imported by all generated pages under /skills, /anti-patterns, /tutorials,
|
|
* and by the hand-authored pages (index, cheatsheet, gallery, privacy) via
|
|
* a direct <link> tag so they all share the same header + prose typography.
|
|
*/
|
|
|
|
@import "./tokens.css";
|
|
|
|
/* ============================================
|
|
SKIP LINK (a11y)
|
|
============================================ */
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10000;
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
border-radius: 0 0 8px 8px;
|
|
transition: top 0.2s ease;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
BASE
|
|
============================================ */
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
color: var(--color-ink);
|
|
background: var(--color-paper);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ============================================
|
|
SHARED SITE HEADER
|
|
============================================ */
|
|
|
|
.site-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-md);
|
|
padding: 14px clamp(var(--spacing-md), 4vw, var(--spacing-2xl));
|
|
background: color-mix(in oklch, var(--color-paper) 94%, transparent);
|
|
-webkit-backdrop-filter: saturate(1.4) blur(16px);
|
|
backdrop-filter: saturate(1.4) blur(16px);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
/* Kill any inherited text-decoration from page-level `a` rules. */
|
|
.site-header a,
|
|
.site-header a:hover {
|
|
text-decoration: none;
|
|
text-decoration-thickness: 0;
|
|
}
|
|
|
|
.site-header-brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
color: var(--color-ink);
|
|
flex-shrink: 0;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.site-header-brand:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.site-header-brand-logo {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.site-header-brand-name {
|
|
display: inline-block;
|
|
}
|
|
|
|
.site-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
|
|
min-width: 0;
|
|
}
|
|
|
|
.site-header-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
font-weight: 500;
|
|
min-width: 0;
|
|
}
|
|
|
|
.site-header-nav a {
|
|
position: relative;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
color: var(--color-charcoal);
|
|
padding: 4px 0;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.site-header-nav a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.site-header-nav a[aria-current="page"] {
|
|
color: var(--color-ink);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.site-header-nav a[aria-current="page"]::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: -4px;
|
|
height: 2px;
|
|
background: var(--color-accent);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* GitHub star pill — subtle, inviting nudge without shouting */
|
|
.site-header-github {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px 4px 8px;
|
|
border-radius: 99px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
flex-shrink: 0;
|
|
transition:
|
|
background var(--duration-fast) var(--ease-out),
|
|
border-color var(--duration-fast) var(--ease-out),
|
|
color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.site-header-github svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.site-header-github:hover {
|
|
background: var(--color-paper);
|
|
border-color: var(--color-ink);
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.site-header-github-star {
|
|
color: #f59e0b;
|
|
width: 12px;
|
|
height: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.site-header {
|
|
padding: 12px var(--spacing-md);
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.site-header-brand {
|
|
font-size: 1.0625rem;
|
|
}
|
|
|
|
.site-header-brand-logo {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.site-header-right {
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.site-header-nav {
|
|
font-size: 0.8125rem;
|
|
gap: var(--spacing-sm);
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
/* fade the right edge so users see there's more to scroll */
|
|
mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%);
|
|
-webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%);
|
|
}
|
|
|
|
.site-header-nav::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.site-header-nav a[data-nav="home"] {
|
|
/* Brand already acts as home link on mobile */
|
|
display: none;
|
|
}
|
|
|
|
.site-header-github {
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.site-header-github-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.site-header-brand-name {
|
|
/* Logo alone on narrow screens */
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
SUB-PAGE LAYOUT SHELL
|
|
============================================ */
|
|
|
|
main#main {
|
|
display: block;
|
|
}
|
|
|
|
.sub-page-content {
|
|
max-width: 820px;
|
|
margin: 0 auto;
|
|
padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) 6rem;
|
|
}
|
|
|
|
.skill-detail {
|
|
/* No max-width on the article itself. The editorial body sections
|
|
(header, editorial wrapper, skill source, references) each cap
|
|
themselves at 720px for readable line length, while the hero is
|
|
allowed to break out on wide viewports. */
|
|
width: 100%;
|
|
}
|
|
|
|
.sub-page-header {
|
|
margin-bottom: clamp(2.5rem, 6vw, 4rem);
|
|
}
|
|
|
|
.sub-page-eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-accent);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.sub-page-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
|
font-weight: 400;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.sub-page-lede {
|
|
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
max-width: 62ch;
|
|
}
|
|
|
|
/* ============================================
|
|
DOCS-BROWSER LAYOUT (used by /skills)
|
|
============================================ */
|
|
|
|
:root {
|
|
--site-header-height: 62px;
|
|
--skills-sidebar-width: 200px;
|
|
}
|
|
|
|
.skills-layout-page main#main {
|
|
/* Reset: the docs layout provides its own max-width container. */
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.skills-layout {
|
|
display: grid;
|
|
grid-template-columns: var(--skills-sidebar-width) minmax(0, 1fr);
|
|
gap: clamp(var(--spacing-lg), 4vw, var(--spacing-2xl));
|
|
/*
|
|
* Match horizontal padding to .site-header so the sidebar content lines
|
|
* up with the brand logo in the nav bar above. Intentionally no max-width
|
|
* so the docs-browser feels wall-to-wall on wide screens.
|
|
*/
|
|
padding: 0 clamp(var(--spacing-md), 4vw, var(--spacing-2xl));
|
|
align-items: start;
|
|
}
|
|
|
|
/* ============================================
|
|
SIDEBAR
|
|
============================================ */
|
|
|
|
.skills-sidebar {
|
|
position: sticky;
|
|
top: var(--site-header-height);
|
|
align-self: start;
|
|
max-height: calc(100vh - var(--site-header-height));
|
|
overflow-y: auto;
|
|
padding: var(--spacing-lg) 0 var(--spacing-2xl);
|
|
border-right: 1px solid var(--color-mist);
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-mist) transparent;
|
|
}
|
|
|
|
.skills-sidebar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.skills-sidebar::-webkit-scrollbar-thumb {
|
|
background: var(--color-mist);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.skills-sidebar-inner {
|
|
padding-right: var(--spacing-md);
|
|
}
|
|
|
|
/* Label at the top of the sidebar — hidden visually, kept for a11y tree. */
|
|
.skills-sidebar-label {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
border: 0;
|
|
}
|
|
|
|
.skills-sidebar-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.skills-sidebar-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.skills-sidebar-divider {
|
|
border: none;
|
|
height: 1px;
|
|
background: var(--color-mist);
|
|
margin: 0 0 1.5rem 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.skills-sidebar-group-title {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-ash);
|
|
margin-bottom: 6px;
|
|
padding: 0;
|
|
}
|
|
|
|
.skills-sidebar-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.skills-sidebar-list li {
|
|
margin: 0;
|
|
}
|
|
|
|
.skills-sidebar-list a {
|
|
display: block;
|
|
/* No left padding: text starts at the column edge so it lines up with
|
|
the header logo. The 2px active accent lives 2px to the left via a
|
|
negative margin, sitting in the layout's horizontal padding gutter. */
|
|
padding: 4px 0;
|
|
margin-left: -2px;
|
|
border-left: 2px solid transparent;
|
|
padding-left: 2px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
color: var(--color-charcoal);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--ease-out),
|
|
border-color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.skills-sidebar-list a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.skills-sidebar-list a[aria-current="page"] {
|
|
color: var(--color-ink);
|
|
font-weight: 600;
|
|
border-left-color: var(--color-accent);
|
|
}
|
|
|
|
/* ============================================
|
|
OVERVIEW MAIN CONTENT
|
|
============================================ */
|
|
|
|
.skills-main {
|
|
min-width: 0;
|
|
padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(4rem, 8vw, 6rem);
|
|
}
|
|
|
|
.skills-overview-content {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.skills-overview-header {
|
|
margin-bottom: clamp(2.5rem, 5vw, 4rem);
|
|
}
|
|
|
|
.skills-overview-header .sub-page-lede a {
|
|
color: var(--color-ink);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-decoration-color: var(--color-accent);
|
|
text-underline-offset: 4px;
|
|
font-family: var(--font-mono);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.skills-overview-howto {
|
|
padding: var(--spacing-lg) var(--spacing-lg);
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 10px;
|
|
margin-bottom: clamp(2.5rem, 5vw, 4rem);
|
|
}
|
|
|
|
.skills-overview-howto-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.skills-overview-howto p {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.7;
|
|
color: var(--color-charcoal);
|
|
max-width: 60ch;
|
|
}
|
|
|
|
.skills-overview-howto a {
|
|
color: var(--color-ink);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--color-accent);
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.skills-overview-howto a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.skills-overview-categories {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(2rem, 4vw, 3rem);
|
|
}
|
|
|
|
.skills-overview-category {
|
|
padding-bottom: clamp(2rem, 4vw, 2.5rem);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.skills-overview-category:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.skills-overview-category-meta {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-md);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.skills-overview-category-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.5rem, 3vw, 2rem);
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
color: var(--color-ink);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.skills-overview-category-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.skills-overview-category-desc {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.7;
|
|
color: var(--color-charcoal);
|
|
max-width: 58ch;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.skills-overview-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.skills-overview-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 6px 12px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 99px;
|
|
text-decoration: none;
|
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
color var(--duration-fast) var(--ease-out),
|
|
background var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.skills-overview-chip:hover {
|
|
color: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
/* ============================================
|
|
ANTI-PATTERNS INDEX
|
|
============================================ */
|
|
|
|
.anti-patterns-sidebar-list a {
|
|
display: flex !important;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.anti-patterns-sidebar-count {
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
color: var(--color-ash);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.anti-patterns-content {
|
|
max-width: 820px;
|
|
}
|
|
|
|
.anti-patterns-header {
|
|
margin-bottom: clamp(2.5rem, 5vw, 4rem);
|
|
}
|
|
|
|
.anti-patterns-header .sub-page-lede code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
color: var(--color-ink);
|
|
background: var(--color-cream);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.anti-patterns-header .sub-page-lede a {
|
|
color: var(--color-ink);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--color-accent);
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 4px;
|
|
font-family: var(--font-mono);
|
|
font-weight: 500;
|
|
font-size: 0.9375em;
|
|
}
|
|
|
|
.anti-patterns-legend {
|
|
padding: var(--spacing-lg);
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 10px;
|
|
margin-bottom: clamp(2.5rem, 5vw, 4rem);
|
|
max-width: 720px;
|
|
}
|
|
|
|
.anti-patterns-legend-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.anti-patterns-legend p {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.7;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.anti-patterns-legend a {
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.anti-patterns-legend a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.anti-patterns-sections {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: clamp(3rem, 6vw, 4.5rem);
|
|
}
|
|
|
|
.anti-patterns-section-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-md);
|
|
padding-bottom: var(--spacing-sm);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.anti-patterns-section-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.75rem, 3vw, 2.25rem);
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
color: var(--color-ink);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.anti-patterns-section-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.rule-card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.rule-card {
|
|
padding: var(--spacing-md);
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
transition: border-color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.rule-card:hover {
|
|
border-color: var(--color-ash);
|
|
}
|
|
|
|
.rule-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.rule-card-id {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--color-ash);
|
|
background: transparent;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.rule-card-category {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
padding: 3px 8px;
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.rule-card-category[data-category="slop"] {
|
|
color: var(--color-accent);
|
|
background: var(--color-accent-dim);
|
|
}
|
|
|
|
.rule-card-category[data-category="quality"] {
|
|
color: var(--color-charcoal);
|
|
background: var(--color-mist);
|
|
}
|
|
|
|
.rule-card-name {
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.rule-card-desc {
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
flex: 1;
|
|
}
|
|
|
|
.rule-card-skill-link {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
text-decoration: none;
|
|
align-self: flex-start;
|
|
padding-top: 4px;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.rule-card-skill-link:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.rule-card-skill-link::after {
|
|
content: " →";
|
|
}
|
|
|
|
/* ============================================
|
|
TUTORIALS INDEX
|
|
============================================ */
|
|
|
|
.tutorials-content {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.tutorial-cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.tutorial-card {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: var(--spacing-md);
|
|
align-items: center;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 10px;
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.tutorial-card:hover {
|
|
border-color: var(--color-ink);
|
|
}
|
|
|
|
.tutorial-card-number {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
color: var(--color-ash);
|
|
line-height: 1;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.tutorial-card:hover .tutorial-card-number {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.tutorial-card-body {
|
|
min-width: 0;
|
|
}
|
|
|
|
.tutorial-card-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.375rem;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
line-height: 1.2;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.tutorial-card-tagline {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tutorial-card-arrow {
|
|
font-family: var(--font-body);
|
|
font-size: 1.25rem;
|
|
color: var(--color-ash);
|
|
transition: color var(--duration-fast) var(--ease-out),
|
|
transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.tutorial-card:hover .tutorial-card-arrow {
|
|
color: var(--color-accent);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
/* ============================================
|
|
TUTORIAL EMBEDS (live overlays, screenshots)
|
|
============================================ */
|
|
|
|
.tutorial-embed {
|
|
margin: var(--spacing-lg) 0 var(--spacing-xl);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-mist);
|
|
box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.12);
|
|
max-width: none;
|
|
}
|
|
|
|
.tutorial-embed-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 14px;
|
|
background: var(--color-cream);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.tutorial-embed-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tutorial-embed-dot.red { background: #ff5f56; }
|
|
.tutorial-embed-dot.yellow { background: #ffbd2e; }
|
|
.tutorial-embed-dot.green { background: #27c93f; }
|
|
|
|
.tutorial-embed-title {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.tutorial-embed-iframe {
|
|
display: block;
|
|
width: 100%;
|
|
height: 520px;
|
|
border: none;
|
|
background: white;
|
|
}
|
|
|
|
.tutorial-embed-caption {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
margin-top: var(--spacing-sm);
|
|
font-style: italic;
|
|
max-width: 60ch;
|
|
}
|
|
|
|
/* ============================================
|
|
TUTORIAL DETAIL
|
|
============================================ */
|
|
|
|
.tutorial-detail {
|
|
max-width: 680px;
|
|
}
|
|
|
|
.tutorial-detail-header {
|
|
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.tutorial-detail-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
|
font-weight: 400;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.tutorial-detail-tagline {
|
|
font-family: var(--font-body);
|
|
font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
max-width: 60ch;
|
|
}
|
|
|
|
.tutorial-detail-body {
|
|
max-width: 65ch;
|
|
}
|
|
|
|
/* ============================================
|
|
MOBILE: collapse sidebar into inline block
|
|
============================================ */
|
|
|
|
@media (max-width: 920px) {
|
|
.skills-layout {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.skills-sidebar {
|
|
position: static;
|
|
max-height: none;
|
|
overflow: visible;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
padding: var(--spacing-md) 0 var(--spacing-lg);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.skills-sidebar-inner {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.skills-sidebar-group {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
SKILL DETAIL — BEFORE/AFTER DEMO
|
|
============================================ */
|
|
|
|
/* Ported from main.css for use on sub-pages. The split-compare effect
|
|
is initialized by js/effects/split-compare.js loaded on demand. */
|
|
|
|
.split-comparison {
|
|
position: relative;
|
|
width: 100%;
|
|
/* 500px visible + 64px buffer (32px per side) = 564px total.
|
|
box-sizing: border-box is inherited, so children sit in 500px. */
|
|
max-width: 564px;
|
|
/* 32px padding is an invisible hover buffer so the divider does not
|
|
immediately snap back when the pointer grazes the visible box
|
|
edge. Negative top/bottom margins collapse the padding out of
|
|
layout flow so the demo keeps its rhythm in the page. */
|
|
padding: 32px;
|
|
margin: -32px 0 calc(clamp(2rem, 4vw, 3rem) - 32px);
|
|
}
|
|
|
|
.split-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 360px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
/* Match the page background so the 32px padding area is invisible.
|
|
The border + border-radius define the visible box; individual
|
|
demo content provides its own colors on top. */
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
cursor: ew-resize;
|
|
user-select: none;
|
|
}
|
|
|
|
.split-before,
|
|
.split-after {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.split-before {
|
|
z-index: 1;
|
|
}
|
|
|
|
.split-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* No padding: demos that fill the container (overdrive) need full
|
|
bleed, and demos with smaller content (polish, bolder) already
|
|
center themselves via flex. */
|
|
}
|
|
|
|
.split-after {
|
|
clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
|
|
z-index: 2;
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
.split-divider {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 3px;
|
|
background: var(--color-accent);
|
|
transform: translateX(-50%) skewX(-10deg);
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.split-labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.split-label-item[data-point="before"] {
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.split-label-item[data-point="after"] {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.skill-demo-caption {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
margin-top: 12px;
|
|
font-style: italic;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.skill-demo-eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-ash);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
/* ============================================
|
|
SKILL DETAIL
|
|
============================================ */
|
|
|
|
/* Editorial hero: on wide viewports, text header on the left and the
|
|
before/after demo floats to the right as a hero module and is allowed
|
|
to break out of the 720px body cap. On narrow viewports everything
|
|
stacks within the 720px column. */
|
|
.skill-detail-hero {
|
|
max-width: 720px;
|
|
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
/* Stacked spacing between header and demo on narrow viewports; cancelled
|
|
when the hero switches to two columns at >=1280px. */
|
|
.skill-detail-hero--has-demo .skill-demo {
|
|
margin-top: clamp(2rem, 4vw, 2.5rem);
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.skill-detail-hero--has-demo {
|
|
/* Wider editorial hero at large viewports. Fixed 564px demo column
|
|
(500px visible + 64px hover buffer) keeps the split-container at
|
|
its designed 500x360 landscape aspect ratio. Text column takes
|
|
whatever's left, clamped by the hero's own max-width. */
|
|
max-width: 1200px;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 564px;
|
|
gap: clamp(var(--spacing-xl), 4vw, var(--spacing-2xl));
|
|
align-items: center;
|
|
}
|
|
|
|
.skill-detail-hero--has-demo .skill-detail-header {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.skill-detail-hero--has-demo .skill-demo {
|
|
align-self: center;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
/* Body sections stay at a readable line length regardless of the hero
|
|
width above them. */
|
|
.skill-detail-editorial,
|
|
.skill-source-card,
|
|
.skill-references {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.skill-detail-eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.skill-detail-eyebrow a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.skill-detail-eyebrow a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.skill-detail-title {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(3rem, 5.5vw, 5rem);
|
|
font-weight: 600;
|
|
line-height: 0.95;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-md);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.skill-detail-title-slash {
|
|
color: var(--color-accent);
|
|
font-weight: 300;
|
|
}
|
|
|
|
.skill-detail-tagline {
|
|
font-family: var(--font-body);
|
|
font-size: clamp(1rem, 1.4vw, 1.125rem);
|
|
font-weight: 400;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.55;
|
|
max-width: 60ch;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.skill-meta-strip {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.skill-meta-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
padding: 4px 10px;
|
|
border-radius: 99px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.skill-meta-category[data-category="create"] {
|
|
background: var(--cat-create-bg);
|
|
border-color: var(--cat-create-border);
|
|
color: var(--cat-create-text);
|
|
}
|
|
|
|
.skill-meta-category[data-category="evaluate"] {
|
|
background: var(--cat-evaluate-bg);
|
|
border-color: var(--cat-evaluate-border);
|
|
color: var(--cat-evaluate-text);
|
|
}
|
|
|
|
.skill-meta-category[data-category="refine"] {
|
|
background: var(--cat-refine-bg);
|
|
border-color: var(--cat-refine-border);
|
|
color: var(--cat-refine-text);
|
|
}
|
|
|
|
.skill-meta-category[data-category="simplify"] {
|
|
background: var(--cat-simplify-bg);
|
|
border-color: var(--cat-simplify-border);
|
|
color: var(--cat-simplify-text);
|
|
}
|
|
|
|
.skill-meta-category[data-category="harden"] {
|
|
background: var(--cat-harden-bg);
|
|
border-color: var(--cat-harden-border);
|
|
color: var(--cat-harden-text);
|
|
}
|
|
|
|
.skill-meta-category[data-category="system"] {
|
|
background: var(--cat-system-bg);
|
|
border-color: var(--cat-system-border);
|
|
color: var(--cat-system-text);
|
|
}
|
|
|
|
.skill-meta-args {
|
|
font-family: var(--font-mono);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.skill-detail-editorial {
|
|
margin-bottom: clamp(2rem, 4vw, 3rem);
|
|
}
|
|
|
|
/* "The skill itself" card: visually contains the auto-rendered SKILL.md
|
|
body so it reads as a distinct reference block, not a continuation of
|
|
the editorial section above. */
|
|
.skill-source-card {
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 12px;
|
|
padding: clamp(var(--spacing-md), 3vw, var(--spacing-xl));
|
|
margin-top: clamp(2rem, 4vw, 3rem);
|
|
box-shadow: 0 1px 0 oklch(90% 0 0);
|
|
}
|
|
|
|
.skill-source-card-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-sm);
|
|
padding-bottom: var(--spacing-md);
|
|
margin-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.skill-source-card-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-accent);
|
|
padding: 3px 8px;
|
|
background: var(--color-accent-dim);
|
|
border-radius: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.skill-source-card-subtitle {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
font-style: italic;
|
|
}
|
|
|
|
.skill-source-card-body {
|
|
max-width: none;
|
|
}
|
|
|
|
.skill-source-card-body > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.skill-source-card-body > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.skill-references {
|
|
margin-top: clamp(3rem, 6vw, 4.5rem);
|
|
padding-top: clamp(2rem, 4vw, 3rem);
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.skill-references-heading {
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.skill-reference {
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.skill-reference:last-child {
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.skill-reference > summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
padding: 16px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.skill-reference > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.skill-reference > summary::before {
|
|
content: "+";
|
|
flex-shrink: 0;
|
|
width: 18px;
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
color: var(--color-accent);
|
|
line-height: 1;
|
|
transition: transform var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.skill-reference[open] > summary::before {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.skill-reference > summary:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.skill-reference-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--color-ash);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.skill-reference-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.125rem;
|
|
font-style: italic;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.skill-reference-body {
|
|
padding: var(--spacing-sm) 0 var(--spacing-md) 34px;
|
|
max-width: 62ch;
|
|
}
|
|
|
|
/* ============================================
|
|
PROSE — rendered markdown bodies
|
|
============================================ */
|
|
|
|
.prose {
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
color: var(--color-charcoal);
|
|
max-width: 65ch;
|
|
}
|
|
|
|
.prose h1,
|
|
.prose h2,
|
|
.prose h3,
|
|
.prose h4 {
|
|
color: var(--color-ink);
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
margin-top: 2em;
|
|
margin-bottom: 0.6em;
|
|
}
|
|
|
|
.prose h1 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 500; font-style: italic; }
|
|
.prose h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-style: italic; margin-top: 2.2em; }
|
|
.prose h3 { font-size: 1.125rem; margin-top: 1.8em; }
|
|
.prose h4 { font-size: 1rem; }
|
|
|
|
.prose h2:first-child,
|
|
.prose h3:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.prose p {
|
|
margin-top: 0;
|
|
margin-bottom: 1.1em;
|
|
}
|
|
|
|
.prose ul,
|
|
.prose ol {
|
|
margin: 0 0 1.2em 0;
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
.prose li {
|
|
margin-bottom: 0.4em;
|
|
}
|
|
|
|
.prose a {
|
|
color: var(--color-accent);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
text-decoration-color: var(--color-accent-dim);
|
|
transition: text-decoration-color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.prose a:hover {
|
|
text-decoration-color: var(--color-accent);
|
|
}
|
|
|
|
.prose strong {
|
|
color: var(--color-ink);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prose em {
|
|
font-style: italic;
|
|
}
|
|
|
|
.prose code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875em;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.prose .code-block-wrap {
|
|
position: relative;
|
|
margin: 1.25em 0;
|
|
}
|
|
|
|
.prose .code-block-wrap .code-block {
|
|
margin: 0;
|
|
}
|
|
|
|
.prose .code-block {
|
|
padding: var(--spacing-md);
|
|
background: oklch(12% 0.005 350);
|
|
color: oklch(92% 0.005 350);
|
|
border-radius: 10px;
|
|
overflow-x: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.55;
|
|
border: 1px solid oklch(20% 0.005 350);
|
|
}
|
|
|
|
.code-block-copy {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
padding: 4px 10px;
|
|
background: oklch(20% 0.005 350);
|
|
border: 1px solid oklch(30% 0.005 350);
|
|
color: oklch(78% 0.005 350);
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition:
|
|
opacity var(--duration-fast) var(--ease-out),
|
|
background var(--duration-fast) var(--ease-out),
|
|
color var(--duration-fast) var(--ease-out),
|
|
border-color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.code-block-wrap:hover .code-block-copy,
|
|
.code-block-copy:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.code-block-copy::before {
|
|
content: "Copy";
|
|
}
|
|
|
|
.code-block-copy:hover {
|
|
background: oklch(30% 0.005 350);
|
|
color: oklch(92% 0.005 350);
|
|
border-color: oklch(40% 0.005 350);
|
|
}
|
|
|
|
.code-block-copy.is-copied {
|
|
opacity: 1;
|
|
background: var(--color-accent);
|
|
color: var(--color-paper);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.code-block-copy.is-copied::before {
|
|
content: "Copied";
|
|
}
|
|
|
|
.prose .code-block code {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.prose blockquote {
|
|
margin: 1.5em 0;
|
|
padding: 0 0 0 var(--spacing-md);
|
|
border-left: 3px solid var(--color-mist);
|
|
color: var(--color-ash);
|
|
font-style: italic;
|
|
}
|
|
|
|
.prose hr {
|
|
border: none;
|
|
height: 1px;
|
|
background: var(--color-mist);
|
|
margin: 2.5em 0;
|
|
}
|