refactor(blocks): nest review-desk block styles
This commit is contained in:
Marcos Paulo
@@ -61,8 +61,6 @@ const { title, subtitle, rendered } = Astro.props;
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* The whole pane is the dark surface. The header border separates the
|
||||
action bar from the tab strip from the body. */
|
||||
.preview {
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--deep);
|
||||
@@ -77,7 +75,6 @@ const { title, subtitle, rendered } = Astro.props;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* Title cluster: eyebrow line + subtitle. */
|
||||
.preview-title {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
@@ -91,7 +88,6 @@ const { title, subtitle, rendered } = Astro.props;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* Subtitle below the eyebrow. */
|
||||
.preview-title small {
|
||||
color: var(--paper);
|
||||
/* token-gap: no --step-* covers 9px; owner design-system-keeper */
|
||||
@@ -101,8 +97,6 @@ const { title, subtitle, rendered } = Astro.props;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Action buttons live in the right cluster. The component lays them out;
|
||||
the call site fills the `actions` slot. */
|
||||
.preview-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
@@ -118,28 +112,28 @@ const { title, subtitle, rendered } = Astro.props;
|
||||
font:
|
||||
700 10px ui-monospace,
|
||||
monospace;
|
||||
|
||||
&:hover {
|
||||
background: var(--muted);
|
||||
}
|
||||
}
|
||||
|
||||
.preview button:hover {
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
/* The Markdown toggle is deliberately distinct from the other actions. */
|
||||
/* The Markdown toggle is the panel's primary action — gold by default,
|
||||
flips to red on press/hover so it reads as a stateful switch, not a
|
||||
ghost button. */
|
||||
.preview button.preview-markdown {
|
||||
color: var(--ink);
|
||||
border-color: var(--gold);
|
||||
background: var(--gold);
|
||||
|
||||
&:hover,
|
||||
&[aria-pressed='true'] {
|
||||
color: var(--paper);
|
||||
background: var(--red);
|
||||
border-color: var(--red);
|
||||
}
|
||||
}
|
||||
|
||||
.preview button.preview-markdown:hover,
|
||||
.preview button.preview-markdown[aria-pressed='true'] {
|
||||
color: var(--paper);
|
||||
background: var(--red);
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
/* Source body: bounded scroll, monospaced, the canonical dark code
|
||||
surface. The max-height hook is the one verify.mjs asserts. */
|
||||
.preview pre {
|
||||
max-height: 540px;
|
||||
margin: 0;
|
||||
@@ -148,7 +142,6 @@ const { title, subtitle, rendered } = Astro.props;
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
/* Code text inside the source surface. */
|
||||
.preview code {
|
||||
font:
|
||||
12px / 1.65 ui-monospace,
|
||||
@@ -156,179 +149,175 @@ const { title, subtitle, rendered } = Astro.props;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Rendered Markdown body: same bounded reading surface. */
|
||||
.markdown-preview {
|
||||
max-height: 540px;
|
||||
overflow: auto;
|
||||
padding: 24px;
|
||||
color: var(--paper);
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
.markdown-preview > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-preview :global(h1),
|
||||
.markdown-preview :global(h2),
|
||||
.markdown-preview :global(h3),
|
||||
.markdown-preview :global(h4),
|
||||
.markdown-preview :global(h5),
|
||||
.markdown-preview :global(h6) {
|
||||
margin: 1.5em 0 0.5em;
|
||||
color: var(--paper);
|
||||
line-height: 1.15;
|
||||
}
|
||||
:global(h1),
|
||||
:global(h2),
|
||||
:global(h3),
|
||||
:global(h4),
|
||||
:global(h5),
|
||||
:global(h6) {
|
||||
margin: 1.5em 0 0.5em;
|
||||
color: var(--paper);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.markdown-preview :global(h1) {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
:global(h1) {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.markdown-preview :global(h2) {
|
||||
font-size: 1.45em;
|
||||
}
|
||||
:global(h2) {
|
||||
font-size: 1.45em;
|
||||
}
|
||||
|
||||
.markdown-preview :global(h3) {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
:global(h3) {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.markdown-preview :global(p),
|
||||
.markdown-preview :global(li) {
|
||||
max-width: 78ch;
|
||||
}
|
||||
:global(p),
|
||||
:global(li) {
|
||||
max-width: 78ch;
|
||||
}
|
||||
|
||||
.markdown-preview :global(li + li) {
|
||||
margin-top: 0.35em;
|
||||
}
|
||||
:global(li + li) {
|
||||
margin-top: 0.35em;
|
||||
}
|
||||
|
||||
.markdown-preview :global(a) {
|
||||
color: var(--gold);
|
||||
}
|
||||
:global(a) {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.markdown-preview :global(code) {
|
||||
padding: 0.12em 0.3em;
|
||||
color: var(--paper);
|
||||
background: var(--muted);
|
||||
white-space: break-spaces;
|
||||
}
|
||||
:global(code) {
|
||||
padding: 0.12em 0.3em;
|
||||
color: var(--paper);
|
||||
background: var(--muted);
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.markdown-preview :global(pre) {
|
||||
max-height: none;
|
||||
margin: 1em 0;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
:global(pre) {
|
||||
max-height: none;
|
||||
margin: 1em 0;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.markdown-preview :global(pre code) {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
:global(pre code) {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.markdown-preview :global(blockquote) {
|
||||
margin: 1em 0;
|
||||
padding: 0.3em 1em;
|
||||
border-left: 3px solid var(--gold);
|
||||
color: var(--muted);
|
||||
}
|
||||
:global(blockquote) {
|
||||
margin: 1em 0;
|
||||
padding: 0.3em 1em;
|
||||
border-left: 3px solid var(--gold);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.markdown-preview :global(hr) {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
:global(hr) {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* Frontmatter: the two-column key/value grid that opens the rendered
|
||||
surface when a `---` block is present. */
|
||||
.markdown-preview :global(.markdown-frontmatter) {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 3px 14px;
|
||||
margin: 0 0 24px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--line);
|
||||
font:
|
||||
11px/1.5 ui-monospace,
|
||||
monospace;
|
||||
}
|
||||
:global(.markdown-frontmatter) {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 3px 14px;
|
||||
margin: 0 0 24px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--line);
|
||||
font:
|
||||
11px/1.5 ui-monospace,
|
||||
monospace;
|
||||
|
||||
.markdown-preview :global(.markdown-frontmatter dt) {
|
||||
color: var(--gold);
|
||||
}
|
||||
dt {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.markdown-preview :global(.markdown-frontmatter dd) {
|
||||
margin: 0;
|
||||
}
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Table wrapper: horizontal scroll on narrow viewports. */
|
||||
.markdown-preview :global(.markdown-table-wrap) {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
margin: 1em 0;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
:global(.markdown-table-wrap) {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
margin: 1em 0;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.markdown-preview :global(table) {
|
||||
width: 100%;
|
||||
min-width: 460px;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--step-13);
|
||||
}
|
||||
:global(table) {
|
||||
width: 100%;
|
||||
min-width: 460px;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--step-13);
|
||||
}
|
||||
|
||||
.markdown-preview :global(th),
|
||||
.markdown-preview :global(td) {
|
||||
padding: 9px 11px;
|
||||
border: 1px solid var(--line);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
:global(th),
|
||||
:global(td) {
|
||||
padding: 9px 11px;
|
||||
border: 1px solid var(--line);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.markdown-preview :global(th) {
|
||||
color: var(--gold);
|
||||
background: var(--deep);
|
||||
}
|
||||
:global(th) {
|
||||
color: var(--gold);
|
||||
background: var(--deep);
|
||||
}
|
||||
|
||||
/* Table of contents: the "ON THIS PAGE" nav that opens the body when
|
||||
the Markdown has two or more headings. */
|
||||
.markdown-preview :global(.markdown-toc) {
|
||||
margin: 0 0 24px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--deep);
|
||||
}
|
||||
:global(.markdown-toc) {
|
||||
margin: 0 0 24px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--deep);
|
||||
|
||||
.markdown-preview :global(.markdown-toc > span) {
|
||||
color: var(--gold);
|
||||
font:
|
||||
700 10px ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
> span {
|
||||
color: var(--gold);
|
||||
font:
|
||||
700 10px ui-monospace,
|
||||
monospace;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.markdown-preview :global(.markdown-toc ol) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px 13px;
|
||||
margin: 9px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
ol {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px 13px;
|
||||
margin: 9px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.markdown-preview :global(.markdown-toc li.level-2) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
li {
|
||||
&.level-2 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.markdown-preview :global(.markdown-toc li.level-3) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
&.level-3 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-preview :global(.markdown-toc a) {
|
||||
font:
|
||||
12px / 1.3 Arial,
|
||||
sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
a {
|
||||
font:
|
||||
12px / 1.3 Arial,
|
||||
sans-serif;
|
||||
text-decoration: none;
|
||||
|
||||
.markdown-preview :global(.markdown-toc a:hover) {
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
@@ -105,12 +105,16 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
/* Header row: title cluster on the left, version switcher on the right. */
|
||||
.detail > header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 25px;
|
||||
align-items: start;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
@@ -125,11 +129,6 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
|
||||
letter-spacing: -0.06em;
|
||||
}
|
||||
|
||||
.detail > header p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* author-link and share-link are NEW elements not in legacy stylesheets;
|
||||
use the canonical token. */
|
||||
.author-link,
|
||||
@@ -137,9 +136,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* Version switcher: hairline-bordered pill, active cell flips to the
|
||||
ink surface. role="group" carries the cluster meaning to assistive
|
||||
tech; aria-pressed carries the per-button state. */
|
||||
/* role="group" carries the switcher cluster meaning to assistive tech;
|
||||
aria-pressed carries the per-button state. */
|
||||
.switch {
|
||||
display: flex;
|
||||
border: 1px solid var(--ink);
|
||||
@@ -151,20 +149,19 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font: 700 10px monospace;
|
||||
|
||||
&.active,
|
||||
&[aria-pressed='true'] {
|
||||
color: var(--paper);
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--red);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.switch button.active,
|
||||
.switch button[aria-pressed='true'] {
|
||||
color: var(--paper);
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
.switch button:focus-visible {
|
||||
outline: 3px solid var(--red);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Purpose: the gold callout that names the skill's job in one sentence. */
|
||||
.purpose {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr;
|
||||
@@ -172,68 +169,66 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
|
||||
margin: 45px 0 20px;
|
||||
padding: 20px;
|
||||
background: var(--gold);
|
||||
|
||||
span {
|
||||
color: var(--red);
|
||||
font: 700 10px monospace;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: var(--step-18);
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.purpose span {
|
||||
color: var(--red);
|
||||
font: 700 10px monospace;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.purpose p {
|
||||
margin: 0;
|
||||
font-size: var(--step-18);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Review grid: two columns of bullets on a hairline "fake border" grid.
|
||||
Each column carries a red eyebrow naming what the list is. */
|
||||
/* Hairline "fake border" grid: the 1px gaps show the --line background. */
|
||||
.review-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1px;
|
||||
background: var(--line);
|
||||
|
||||
section {
|
||||
padding: 22px;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--red);
|
||||
font: 700 10px monospace;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 14px 0 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.review-grid section {
|
||||
padding: 22px;
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.review-grid span {
|
||||
color: var(--red);
|
||||
font: 700 10px monospace;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.review-grid ul {
|
||||
margin: 14px 0 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.review-grid li + li {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
/* Extras: the "good next addition" hint. */
|
||||
.extras {
|
||||
margin: 1px 0 25px;
|
||||
padding: 18px 22px;
|
||||
color: var(--ink);
|
||||
background: var(--paper);
|
||||
border-left: 4px solid var(--blue);
|
||||
}
|
||||
|
||||
.extras span {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--blue);
|
||||
font: 700 10px monospace;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--blue);
|
||||
font: 700 10px monospace;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.extras p {
|
||||
margin: 0;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
Reference in New Issue
Block a user