851c706db7
* Redesign changelog page with feature highlights and visual hierarchy Major releases now show narrative summaries, feature highlight cards (with image support for screenshots), colored section badges, and contributor avatars. Minor releases stay compact. Adds changelog-media.ts as a supplementary data layer alongside CHANGELOG.md. * Use Next.js Image for optimized loading and GitHub avatar remotes * Add screenshots for Open With and Tab Colors features * Add workspace metadata screenshot * Switch to single-column inline layout, add command palette screenshot * Conductor-style titles, narrower body, narrative descriptions, reorder features * Add pin workspace and tab context menu screenshots, remove subtitle * Add View Changelog link to front page, add DevTools to 0.60.0 * Add CJK input screenshot to 0.60.0 * Read real PNG dimensions at build time, add proper sizes attribute * Fix image overflow: wrap in overflow-hidden container, add max-w-full * Fix CSS cascade: move docs-content styles into @layer base Unlayered CSS beats @layer utilities in the cascade, so .docs-content rules (margins, padding, list-style) were overriding Tailwind utilities on ul, li, h2 elements in the changelog page. Moving them into @layer base lets utilities win without needing !important hacks. * Switch docs-content spacing from margin to padding Margins were collapsing and conflicting with Tailwind layout utilities in the changelog. Padding doesn't collapse and can't interfere with external spacing set by parent containers. * Fix changelog layout: use flex column + inline styles for all spacing Block layout was collapsing when articles had media content (h2, feature divs, section divs all rendered at the same position). Switching to display:flex + flex-direction:column on articles and using inline styles for all spacing guarantees proper vertical stacking regardless of docs-content CSS interference. * Remove border from changelog images * Replace devtools screenshot with cmux inspecting cmux.dev
226 lines
4.2 KiB
CSS
226 lines
4.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
:root {
|
|
--background: #fafafa;
|
|
--foreground: #171717;
|
|
--muted: #737373;
|
|
--border: #e5e5e5;
|
|
--code-bg: #f5f5f5;
|
|
}
|
|
|
|
.dark {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
--muted: #a3a3a3;
|
|
--border: #262626;
|
|
--code-bg: #171717;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-muted: var(--muted);
|
|
--color-border: var(--border);
|
|
--color-code-bg: var(--code-bg);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
html {
|
|
background: var(--background);
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
::selection {
|
|
background: #3b82f620;
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 320ms;
|
|
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
::view-transition-old(root) {
|
|
mix-blend-mode: normal;
|
|
}
|
|
|
|
.dark::view-transition-old(root) {
|
|
z-index: 1;
|
|
}
|
|
|
|
.dark::view-transition-new(root) {
|
|
z-index: 2;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 1ms;
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
.animate-blink {
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
|
|
/* Docs prose styles — in @layer base so Tailwind utilities can override */
|
|
@layer base {
|
|
.docs-content h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.025em;
|
|
padding-bottom: 0.75rem;
|
|
}
|
|
|
|
.docs-content h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
padding-top: 2.5rem;
|
|
padding-bottom: 0.75rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.docs-content h3 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
padding-top: 1.75rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.docs-content h4 {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
padding-top: 1.25rem;
|
|
padding-bottom: 0.375rem;
|
|
font-family: var(--font-geist-mono);
|
|
}
|
|
|
|
.docs-content > p {
|
|
line-height: 1.7;
|
|
padding-bottom: 1rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.docs-content ul,
|
|
.docs-content ol {
|
|
padding-left: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.docs-content ul {
|
|
list-style: disc;
|
|
}
|
|
|
|
.docs-content ol {
|
|
list-style: decimal;
|
|
}
|
|
|
|
.docs-content li {
|
|
line-height: 1.7;
|
|
padding-bottom: 0.25rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.docs-content code {
|
|
font-family: var(--font-geist-mono);
|
|
font-size: 0.8125em;
|
|
background: var(--code-bg);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.docs-content kbd {
|
|
font-family: var(--font-geist-mono);
|
|
font-size: 0.75em;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.3125rem;
|
|
padding: 0.2rem 0.375rem;
|
|
min-width: 1.4em;
|
|
text-align: center;
|
|
display: inline-block;
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.dark .docs-content kbd {
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.docs-content pre {
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.docs-content pre code {
|
|
background: none;
|
|
padding: 0;
|
|
font-size: 1em;
|
|
font-family: inherit;
|
|
}
|
|
}
|
|
|
|
/* Shiki dual theme */
|
|
.shiki,
|
|
.shiki span {
|
|
color: var(--shiki-light) !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.dark .shiki,
|
|
.dark .shiki span {
|
|
color: var(--shiki-dark) !important;
|
|
}
|
|
|
|
@layer base {
|
|
.docs-content table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
padding-bottom: 1.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.docs-content th {
|
|
text-align: left;
|
|
font-weight: 600;
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.docs-content td {
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 1px solid var(--border);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.docs-content strong {
|
|
font-weight: 600;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.docs-content a:not([class]) {
|
|
color: var(--foreground);
|
|
text-decoration: underline;
|
|
text-decoration-skip-ink: none;
|
|
text-underline-offset: 3px;
|
|
text-decoration-thickness: 1px;
|
|
text-decoration-color: var(--border);
|
|
}
|
|
|
|
.docs-content a:not([class]):hover {
|
|
text-decoration-color: var(--foreground);
|
|
}
|
|
}
|