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