netcracker/ai-for-dummies
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(blocks): nest review-desk block styles
verify-and-publish / gate (push) Successful in 3m59s
Details
verify-and-publish / publish (push) Has been skipped
Details

Browse Source
This commit is contained in:
Marcos Paulo
2026-09-07 07:37:52 -03:00
parent 0c51cede6e
commit edfa320678
2 changed files with 211 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/blocks/PreviewPane.astro
+48 -59
View File
@@ -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;
}
.preview button:hover {
&: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);
}
.preview button.preview-markdown:hover,
.preview button.preview-markdown[aria-pressed='true'] {
&:hover,
&[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,89 +149,85 @@ 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 {
> :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) {
: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) {
:global(h1) {
font-size: 1.8em;
}
.markdown-preview :global(h2) {
:global(h2) {
font-size: 1.45em;
}
.markdown-preview :global(h3) {
:global(h3) {
font-size: 1.2em;
}
.markdown-preview :global(p),
.markdown-preview :global(li) {
:global(p),
:global(li) {
max-width: 78ch;
}
.markdown-preview :global(li + li) {
:global(li + li) {
margin-top: 0.35em;
}
.markdown-preview :global(a) {
:global(a) {
color: var(--gold);
}
.markdown-preview :global(code) {
:global(code) {
padding: 0.12em 0.3em;
color: var(--paper);
background: var(--muted);
white-space: break-spaces;
}
.markdown-preview :global(pre) {
:global(pre) {
max-height: none;
margin: 1em 0;
padding: 14px;
border: 1px solid var(--line);
}
.markdown-preview :global(pre code) {
:global(pre code) {
padding: 0;
background: transparent;
}
.markdown-preview :global(blockquote) {
:global(blockquote) {
margin: 1em 0;
padding: 0.3em 1em;
border-left: 3px solid var(--gold);
color: var(--muted);
}
.markdown-preview :global(hr) {
: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) {
:global(.markdown-frontmatter) {
display: grid;
grid-template-columns: max-content 1fr;
gap: 3px 14px;
@@ -248,54 +237,50 @@ const { title, subtitle, rendered } = Astro.props;
font:
11px/1.5 ui-monospace,
monospace;
}
.markdown-preview :global(.markdown-frontmatter dt) {
dt {
color: var(--gold);
}
.markdown-preview :global(.markdown-frontmatter dd) {
dd {
margin: 0;
}
}
/* Table wrapper: horizontal scroll on narrow viewports. */
.markdown-preview :global(.markdown-table-wrap) {
:global(.markdown-table-wrap) {
max-width: 100%;
overflow: auto;
margin: 1em 0;
border: 1px solid var(--line);
}
.markdown-preview :global(table) {
:global(table) {
width: 100%;
min-width: 460px;
border-collapse: collapse;
font-size: var(--step-13);
}
.markdown-preview :global(th),
.markdown-preview :global(td) {
:global(th),
:global(td) {
padding: 9px 11px;
border: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.markdown-preview :global(th) {
: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) {
:global(.markdown-toc) {
margin: 0 0 24px;
padding: 12px 14px;
border: 1px solid var(--line);
background: var(--deep);
}
.markdown-preview :global(.markdown-toc > span) {
> span {
color: var(--gold);
font:
700 10px ui-monospace,
@@ -303,7 +288,7 @@ const { title, subtitle, rendered } = Astro.props;
letter-spacing: 0.1em;
}
.markdown-preview :global(.markdown-toc ol) {
ol {
display: flex;
flex-wrap: wrap;
gap: 7px 13px;
@@ -312,24 +297,28 @@ const { title, subtitle, rendered } = Astro.props;
list-style: none;
}
.markdown-preview :global(.markdown-toc li.level-2) {
li {
&.level-2 {
margin-left: 10px;
}
.markdown-preview :global(.markdown-toc li.level-3) {
&.level-3 {
margin-left: 20px;
}
}
.markdown-preview :global(.markdown-toc a) {
a {
font:
12px / 1.3 Arial,
sans-serif;
text-decoration: none;
}
.markdown-preview :global(.markdown-toc a:hover) {
&:hover {
text-decoration: underline;
}
}
}
}
@media (max-width: 800px) {
.preview > header {
src/components/blocks/ReviewDetail.astro
+23 -28
View File
@@ -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;
}
.switch button.active,
.switch button[aria-pressed='true'] {
&.active,
&[aria-pressed='true'] {
color: var(--paper);
background: var(--ink);
}
.switch button:focus-visible {
&: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,59 +169,56 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
margin: 45px 0 20px;
padding: 20px;
background: var(--gold);
}
.purpose span {
span {
color: var(--red);
font: 700 10px monospace;
letter-spacing: 0.1em;
}
.purpose p {
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);
}
.review-grid section {
section {
padding: 22px;
background: var(--paper);
}
.review-grid span {
span {
color: var(--red);
font: 700 10px monospace;
letter-spacing: 0.1em;
}
.review-grid ul {
ul {
margin: 14px 0 0;
padding-left: 20px;
}
.review-grid li + li {
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 {
span {
display: block;
margin-bottom: 8px;
color: var(--blue);
@@ -232,9 +226,10 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
letter-spacing: 0.1em;
}
.extras p {
p {
margin: 0;
}
}
@media (max-width: 800px) {
.detail {