docs: update portal for WRNexusJS 0.2.65
This commit is contained in:
@@ -147,6 +147,174 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Documentation v3: editorial hierarchy, not a dashboard of cards. */
|
||||
.documentation.prose,
|
||||
.package-document,
|
||||
.component-detail-page .documentation {
|
||||
max-width: 52rem;
|
||||
}
|
||||
|
||||
.doc-intro {
|
||||
overflow: visible;
|
||||
margin-bottom: clamp(3rem, 7vw, 5rem);
|
||||
padding: 1.5rem 0 2rem;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.doc-intro::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.doc-intro h1 {
|
||||
max-width: 13ch;
|
||||
}
|
||||
|
||||
.doc-meta span,
|
||||
.component-card-meta span {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.doc-meta span + span::before,
|
||||
.component-card-meta span + span::before {
|
||||
margin-right: 0.5rem;
|
||||
color: var(--border);
|
||||
content: "·";
|
||||
}
|
||||
|
||||
.access-callout,
|
||||
.component-catalog-callout {
|
||||
margin-block: 2.25rem;
|
||||
padding: 1.25rem 0 1.25rem 1.4rem;
|
||||
border: 0;
|
||||
border-left: 3px solid var(--brand);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.on-this-page {
|
||||
border: 0;
|
||||
border-left: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
padding: 0.35rem 0 0.35rem 1.25rem;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.category-filter {
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
padding: 0.8rem 0;
|
||||
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.component-grid,
|
||||
.package-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.component-card,
|
||||
.package-card {
|
||||
min-height: 0;
|
||||
padding: 1.5rem 1.5rem 1.5rem 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.component-card:nth-child(odd),
|
||||
.package-card:nth-child(odd) {
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.component-card:nth-child(even),
|
||||
.package-card:nth-child(even) {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.component-card::before,
|
||||
.package-card::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.component-card:hover,
|
||||
.package-card:hover {
|
||||
border-color: var(--border);
|
||||
background: color-mix(in srgb, var(--brand) 4%, transparent);
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.component-card p,
|
||||
.package-card p {
|
||||
flex: initial;
|
||||
}
|
||||
|
||||
.component-card .card-link,
|
||||
.package-card .card-link {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.example-grid {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.example-card {
|
||||
margin-block: 2.5rem;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.example-card h3 {
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.documentation > section:not(.doc-intro) {
|
||||
scroll-margin-top: calc(var(--docs-header) + 2rem);
|
||||
margin-block: clamp(3rem, 7vw, 5rem);
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.table-wrap table {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.component-grid,
|
||||
.package-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.component-card,
|
||||
.package-card,
|
||||
.component-card:nth-child(even),
|
||||
.package-card:nth-child(even) {
|
||||
padding-inline: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f8fafc;
|
||||
@@ -1192,6 +1360,105 @@ footer a {
|
||||
}
|
||||
}
|
||||
|
||||
/* Final editorial surface overrides. Keep documentation open and reserve
|
||||
elevated cards for genuinely interactive choices. */
|
||||
body .doc-intro {
|
||||
overflow: visible;
|
||||
padding: 1.5rem 0 2rem;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
body .doc-intro::after,
|
||||
body .package-card::before {
|
||||
display: none;
|
||||
}
|
||||
body .access-callout,
|
||||
body .component-catalog-callout {
|
||||
border: 0;
|
||||
border-left: 3px solid var(--brand);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
body .on-this-page,
|
||||
body .sidebar {
|
||||
border: 0;
|
||||
border-left: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
body .category-filter {
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
body .component-grid,
|
||||
body .package-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
body .component-card,
|
||||
body .package-card {
|
||||
min-height: 0;
|
||||
padding: 1.5rem;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
body .component-card:nth-child(odd),
|
||||
body .package-card:nth-child(odd) {
|
||||
padding-left: 0;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
body .component-card:hover,
|
||||
body .package-card:hover {
|
||||
border-color: var(--border);
|
||||
background: color-mix(in srgb, var(--brand) 4%, transparent);
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
body .example-grid {
|
||||
display: block;
|
||||
}
|
||||
body .example-card {
|
||||
margin-block: 2.5rem;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
body .marketing-main > section:not(.marketing-hero) {
|
||||
margin-block: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
body .component-grid,
|
||||
body .package-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
body .component-card,
|
||||
body .package-card,
|
||||
body .component-card:nth-child(odd),
|
||||
body .package-card:nth-child(odd) {
|
||||
padding-inline: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Documentation design system v2 -------------------------------------------------
|
||||
A focused application layer over the semantic WRNexus theme and @wrnexus/ui.
|
||||
Components keep their own internal spacing; page rhythm belongs to this site. */
|
||||
|
||||
Reference in New Issue
Block a user