refactor(docs): remove card shells and format examples
This commit is contained in:
+190
-66
@@ -316,6 +316,138 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Documentation v4: remove every legacy card-shaped documentation shell. */
|
||||
body .topbar nav {
|
||||
gap: 1.75rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body .topbar nav a {
|
||||
padding: 0.4rem 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body .preview-pill,
|
||||
body .theme-button {
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body .documentation.standalone,
|
||||
body .standalone,
|
||||
body .package-document,
|
||||
body .component-detail-page .documentation {
|
||||
width: 100%;
|
||||
max-width: 56rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body .documentation.standalone::before,
|
||||
body .standalone::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body .standalone > *,
|
||||
body .documentation.standalone > * {
|
||||
max-width: none;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
body .doc-intro {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body .local-toc {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem 1.5rem;
|
||||
padding: 1rem 0;
|
||||
border: 0;
|
||||
border-block: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body .local-toc a {
|
||||
padding: 0.25rem 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body .lifecycle,
|
||||
body .feature-grid,
|
||||
body .coverage-list {
|
||||
gap: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
body .lifecycle li,
|
||||
body .feature-grid article,
|
||||
body .coverage-list article,
|
||||
body .marketing-main .feature-grid article {
|
||||
min-height: 0;
|
||||
padding: 1.25rem 1.25rem 1.25rem 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
body .lifecycle li:hover,
|
||||
body .feature-grid article:hover,
|
||||
body .coverage-list article:hover,
|
||||
body .marketing-main .feature-grid article:hover {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
body .documentation pre,
|
||||
body .documentation .table-wrap {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body .documentation pre {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
body .breadcrumbs {
|
||||
padding: 0 0 1.25rem;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
body .topbar nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body .documentation.standalone,
|
||||
body .standalone,
|
||||
body .package-document,
|
||||
body .component-detail-page .documentation {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f8fafc;
|
||||
@@ -1553,16 +1685,16 @@ body {
|
||||
}
|
||||
|
||||
.topbar nav {
|
||||
gap: 0.25rem;
|
||||
padding: 0.3rem;
|
||||
border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
|
||||
border-radius: 0.9rem;
|
||||
background: color-mix(in srgb, var(--surface) 72%, transparent);
|
||||
gap: 1.75rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.topbar nav a {
|
||||
padding: 0.55rem 0.8rem;
|
||||
border-radius: 0.65rem;
|
||||
padding: 0.55rem 0;
|
||||
border-radius: 0;
|
||||
font-size: 0.82rem;
|
||||
transition:
|
||||
color 180ms ease,
|
||||
@@ -1575,8 +1707,8 @@ body {
|
||||
}
|
||||
|
||||
.topbar nav a:hover {
|
||||
background: var(--surface-soft);
|
||||
transform: translateY(-1px);
|
||||
background: transparent;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.preview-pill {
|
||||
@@ -1654,23 +1786,16 @@ body {
|
||||
position: relative;
|
||||
max-width: var(--docs-reading);
|
||||
margin: clamp(1rem, 4vw, 3rem) auto clamp(4rem, 8vw, 7rem);
|
||||
padding: clamp(1.4rem, 4vw, 3.5rem);
|
||||
border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
|
||||
border-radius: clamp(1.25rem, 3vw, 2rem);
|
||||
background: color-mix(in srgb, var(--surface) 92%, transparent);
|
||||
box-shadow: var(--docs-shadow);
|
||||
backdrop-filter: blur(18px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.documentation.standalone::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: clamp(1.4rem, 4vw, 3.5rem);
|
||||
width: 5rem;
|
||||
height: 3px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--brand), #a855f7);
|
||||
content: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
.documentation h1,
|
||||
@@ -1765,10 +1890,10 @@ pre code {
|
||||
|
||||
.table-wrap {
|
||||
margin-block: 1.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 1rem;
|
||||
background: color-mix(in srgb, var(--surface) 90%, transparent);
|
||||
box-shadow: 0 10px 32px rgb(15 23 42 / 0.05);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -1792,16 +1917,17 @@ tbody tr:hover {
|
||||
|
||||
.local-toc,
|
||||
.on-this-page {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
|
||||
border: 0;
|
||||
border-left: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
padding: 0.5rem 0 0.5rem 1rem;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.local-toc a,
|
||||
.on-this-page a {
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.45rem 0.6rem;
|
||||
border-radius: 0;
|
||||
padding: 0.35rem 0;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
color 160ms ease,
|
||||
@@ -1810,24 +1936,19 @@ tbody tr:hover {
|
||||
|
||||
.local-toc a:hover,
|
||||
.on-this-page a:hover {
|
||||
background: color-mix(in srgb, var(--brand) 10%, transparent);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.page > .hero.compact {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: clamp(1.5rem, 5vw, 4rem);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: clamp(1.5rem, 4vw, 2.5rem);
|
||||
padding: clamp(2rem, 6vw, 5rem);
|
||||
background:
|
||||
linear-gradient(
|
||||
145deg,
|
||||
color-mix(in srgb, var(--surface) 94%, transparent),
|
||||
color-mix(in srgb, var(--brand) 7%, var(--surface))
|
||||
),
|
||||
var(--surface);
|
||||
box-shadow: var(--docs-shadow);
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
padding: clamp(2rem, 6vw, 5rem) 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.page > .hero.compact::after {
|
||||
@@ -2062,21 +2183,23 @@ tbody tr:hover {
|
||||
}
|
||||
|
||||
.marketing-main > section:not(.marketing-hero) {
|
||||
margin-block: 1.25rem;
|
||||
border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
|
||||
border-radius: clamp(1.25rem, 3vw, 2rem);
|
||||
margin-block: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
padding: clamp(2rem, 6vw, 5rem);
|
||||
background: color-mix(in srgb, var(--surface) 88%, transparent);
|
||||
box-shadow: 0 14px 44px rgb(15 23 42 / 0.05);
|
||||
backdrop-filter: blur(14px);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.marketing-main .feature-grid article {
|
||||
min-height: 12rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 1rem;
|
||||
padding: 1.25rem;
|
||||
background: color-mix(in srgb, var(--surface-soft) 66%, transparent);
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
padding: 1.25rem 1.25rem 1.25rem 0;
|
||||
background: transparent;
|
||||
transition:
|
||||
transform 220ms ease,
|
||||
border-color 220ms ease,
|
||||
@@ -2084,14 +2207,14 @@ tbody tr:hover {
|
||||
}
|
||||
|
||||
.marketing-main .feature-grid article:hover {
|
||||
border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 16px 34px color-mix(in srgb, var(--brand) 8%, transparent);
|
||||
border-color: var(--border);
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.lifecycle li {
|
||||
border-radius: 1rem;
|
||||
background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
footer {
|
||||
@@ -2101,12 +2224,13 @@ footer {
|
||||
align-items: center;
|
||||
width: min(var(--docs-content), calc(100% - 2rem));
|
||||
margin: 2rem auto 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 1.5rem;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
padding: clamp(1.4rem, 4vw, 2.5rem);
|
||||
background: color-mix(in srgb, var(--surface) 88%, transparent);
|
||||
box-shadow: var(--docs-shadow);
|
||||
backdrop-filter: blur(18px);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
|
||||
Reference in New Issue
Block a user