mirror of
https://github.com/profullstack/logicsrc.git
synced 2026-10-03 13:17:07 +00:00
Anthony Ettinger
f41abbd712
The CLI is the product, and the way you get it was nowhere on the site. You had to already know the URL of a script served out of public/. Two placements, one command: - The homepage hero gets the loud version, directly under the lede and above the fold -- a bordered dark panel, the command at full size, Copy alongside. - Every page carries a compact version in the rail, between the brand and the nav. Present on arrival, never competing with navigation. Both come from renderInstallCommand() in one module. The homepage builds its HTML as a string and the rest of the site is JSX, which is precisely the shape that lets one copy of a command drift while the other stays right -- so there is one definition and SiteShell renders it rather than restating it. The command keeps its flags: `curl -fsSL`. Without -f, curl prints an HTTP error body and still exits 0, so a 404 gets piped into sh; without -L the install breaks the first time the URL redirects. This is the form install.sh already documents in its own header. Copy is one delegated listener on document for any [data-copy] button, mounted site-wide in the layout. Delegation because the two placements arrive by different rendering paths and a document listener does not care which; it also means the next copy button needs the attribute and no wiring. It falls back to a throwaway textarea + execCommand outside a secure context, where navigator.clipboard is simply undefined, so the button never no-ops silently. The contract tests pin the command, both placements, and that the clipboard payload equals the visible text -- a Copy button that hands over something other than what is on screen is worse than no button. They also read public/install.sh and assert it is #!/bin/sh and documents this exact command, so `| sh` cannot quietly become a lie. apps/logicsrc-web: 13 new tests pass, 46 total. The ontology-api contract file fails to resolve @logicsrc/validators, which it also does on a pristine origin/master -- unbuilt workspace package, unrelated to this change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
894 lines
14 KiB
CSS
894 lines
14 KiB
CSS
:root {
|
|
color: #101418;
|
|
background: #f6f7f4;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
font-size: 16px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
color: #0a7d59;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: wait;
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.shell {
|
|
display: grid;
|
|
grid-template-columns: 16rem minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.rail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
padding: 1rem;
|
|
border-right: 1px solid #d9ded4;
|
|
background: #101418;
|
|
color: #f6f7f4;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.brand small {
|
|
display: block;
|
|
margin-top: 0.15rem;
|
|
color: #b5beb2;
|
|
}
|
|
|
|
.mark {
|
|
display: grid;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
place-items: center;
|
|
border: 1px solid #5ac8a6;
|
|
border-radius: 6px;
|
|
color: #5ac8a6;
|
|
font-weight: 800;
|
|
}
|
|
|
|
nav {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
nav a {
|
|
color: inherit;
|
|
min-height: 2.35rem;
|
|
padding: 0.55rem 0.75rem;
|
|
border: 1px solid #263039;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
nav a.active,
|
|
nav a:hover {
|
|
border-color: #3f5049;
|
|
background: #1b2329;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.workspace {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.hero,
|
|
.band {
|
|
width: 100%;
|
|
max-width: 72rem;
|
|
margin: 0 auto 1rem;
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
|
|
gap: 1rem;
|
|
align-items: end;
|
|
padding: 1.25rem 0 0.25rem;
|
|
}
|
|
|
|
.eyebrow,
|
|
.section-head p,
|
|
.tile p,
|
|
.implementation-list p,
|
|
.cli-panel p {
|
|
color: #58615b;
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 0.4rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 0.45rem;
|
|
font-size: 3rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.lede {
|
|
max-width: 52rem;
|
|
margin-bottom: 0;
|
|
font-size: 1.12rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.65rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.status-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.status-grid span {
|
|
min-height: 5rem;
|
|
padding: 0.75rem;
|
|
border: 1px solid #d6ddd2;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
color: #58615b;
|
|
}
|
|
|
|
.status-grid strong {
|
|
display: block;
|
|
color: #101418;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.band {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.section-head {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.section-head h2,
|
|
.cli-panel h2 {
|
|
margin-bottom: 0;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.section-head p {
|
|
max-width: 34rem;
|
|
margin-bottom: 0;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.primitive-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.tile,
|
|
.schema-list article,
|
|
.cli-panel,
|
|
.soon-lead,
|
|
.soon-grid article,
|
|
.implementation-list article,
|
|
.hire-panel,
|
|
.hire-grid article,
|
|
.coinpay-panel {
|
|
border: 1px solid #d6ddd2;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.tile {
|
|
min-height: 10rem;
|
|
padding: 0.85rem;
|
|
}
|
|
|
|
.tile h3,
|
|
.implementation-list h3 {
|
|
margin-bottom: 0.35rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.tile p,
|
|
.implementation-list p,
|
|
.cli-panel p {
|
|
margin-bottom: 0;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.two-col {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.coming-soon {
|
|
padding-top: 1.2rem;
|
|
}
|
|
|
|
.soon-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(20rem, 0.95fr) minmax(0, 1.05fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.soon-lead {
|
|
padding: 1rem;
|
|
background: #eef7f3;
|
|
}
|
|
|
|
.agentbyte .soon-lead {
|
|
background: #f7f3e8;
|
|
}
|
|
|
|
.credentials .soon-lead {
|
|
background: #eef3f7;
|
|
}
|
|
|
|
.agentbyte .soon-lead span {
|
|
border-color: #e3c878;
|
|
color: #735b14;
|
|
}
|
|
|
|
.credentials .soon-lead span {
|
|
border-color: #9fc3da;
|
|
color: #225d77;
|
|
}
|
|
|
|
.soon-lead span {
|
|
display: inline-block;
|
|
margin-bottom: 0.75rem;
|
|
padding: 0.35rem 0.5rem;
|
|
border: 1px solid #a8d9c9;
|
|
border-radius: 999px;
|
|
color: #2d6f60;
|
|
font-size: 0.9rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.soon-lead h3 {
|
|
margin-bottom: 0.45rem;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.soon-lead p {
|
|
color: #39443e;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.soon-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.soon-grid article {
|
|
min-height: 8.5rem;
|
|
padding: 0.85rem;
|
|
}
|
|
|
|
.soon-grid h3 {
|
|
margin-bottom: 0.35rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.soon-grid p {
|
|
margin-bottom: 0;
|
|
color: #58615b;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.surface-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 0.75rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.surface-strip article {
|
|
min-height: 7.25rem;
|
|
padding: 0.85rem;
|
|
border: 1px solid #d6ddd2;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.surface-strip h3 {
|
|
margin-bottom: 0.35rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.surface-strip p {
|
|
margin-bottom: 0;
|
|
color: #58615b;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.schema-list {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.schema-list article {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
min-height: 4.2rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
code {
|
|
overflow-wrap: anywhere;
|
|
color: #2d6f60;
|
|
}
|
|
|
|
.cli-panel {
|
|
padding: 1rem;
|
|
}
|
|
|
|
pre {
|
|
overflow-x: auto;
|
|
margin: 0.75rem 0;
|
|
padding: 0.85rem;
|
|
border-radius: 6px;
|
|
background: #101418;
|
|
color: #f6f7f4;
|
|
}
|
|
|
|
.implementation-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.implementation-list article {
|
|
display: grid;
|
|
grid-template-columns: 0.7rem 1fr;
|
|
gap: 0.65rem;
|
|
min-height: 9rem;
|
|
padding: 0.85rem;
|
|
}
|
|
|
|
.implementation-list span {
|
|
width: 0.7rem;
|
|
height: 0.7rem;
|
|
margin-top: 0.25rem;
|
|
border-radius: 999px;
|
|
background: #f0c56a;
|
|
}
|
|
|
|
.compare-table {
|
|
display: grid;
|
|
overflow: hidden;
|
|
border: 1px solid #d6ddd2;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.compare-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(8rem, 0.6fr) repeat(2, minmax(0, 1fr));
|
|
border-top: 1px solid #e1e6dc;
|
|
}
|
|
|
|
.compare-row:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.compare-row > * {
|
|
margin: 0;
|
|
padding: 0.85rem;
|
|
border-left: 1px solid #e1e6dc;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.compare-row > *:first-child {
|
|
border-left: 0;
|
|
}
|
|
|
|
.compare-head {
|
|
background: #eef7f3;
|
|
}
|
|
|
|
.compare-row p {
|
|
color: #58615b;
|
|
}
|
|
|
|
.compare-note {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.hire-us {
|
|
padding-top: 1.2rem;
|
|
}
|
|
|
|
.hire-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(20rem, 0.9fr) minmax(0, 1.1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.hire-panel {
|
|
padding: 1rem;
|
|
background: #101418;
|
|
color: #f6f7f4;
|
|
}
|
|
|
|
.hire-panel .eyebrow {
|
|
color: #5ac8a6;
|
|
}
|
|
|
|
.hire-panel h3 {
|
|
margin-bottom: 0.55rem;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.hire-panel p {
|
|
color: #ccd5ce;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.price-row {
|
|
display: flex;
|
|
align-items: end;
|
|
gap: 0.5rem;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.price-row strong {
|
|
color: #ffffff;
|
|
font-size: 2.4rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.price-row span {
|
|
color: #b5beb2;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.price-terms {
|
|
color: #b5beb2;
|
|
font-size: 0.85rem;
|
|
line-height: 1.5;
|
|
margin: -0.5rem 0 0;
|
|
}
|
|
|
|
.price-terms a {
|
|
color: inherit;
|
|
}
|
|
|
|
.cta-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
.project-request-form {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.project-request-form label {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.project-request-form label span {
|
|
color: #8ee4c9;
|
|
font-size: 0.78rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.project-request-form input,
|
|
.project-request-form textarea {
|
|
width: 100%;
|
|
border: 1px solid #3f5049;
|
|
border-radius: 6px;
|
|
background: #171d1a;
|
|
color: #f6f7f4;
|
|
font: inherit;
|
|
line-height: 1.45;
|
|
padding: 0.7rem 0.75rem;
|
|
}
|
|
|
|
.project-request-form textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
.project-request-form input::placeholder,
|
|
.project-request-form textarea::placeholder {
|
|
color: #7f8b84;
|
|
}
|
|
|
|
.button-primary,
|
|
.button-secondary {
|
|
display: inline-flex;
|
|
min-height: 2.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.6rem 0.85rem;
|
|
border-radius: 6px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.button-primary {
|
|
background: #5ac8a6;
|
|
color: #101418;
|
|
}
|
|
|
|
.button-secondary {
|
|
border: 1px solid #3f5049;
|
|
color: #f6f7f4;
|
|
}
|
|
|
|
.hire-stack {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.hire-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.hire-grid article,
|
|
.coinpay-panel {
|
|
padding: 0.85rem;
|
|
}
|
|
|
|
.hire-grid h3,
|
|
.coinpay-panel h3 {
|
|
margin-bottom: 0.35rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.hire-grid p,
|
|
.coinpay-panel p {
|
|
margin-bottom: 0;
|
|
color: #58615b;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.coinpay-panel pre {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.coinpay-result {
|
|
margin-top: 0.85rem;
|
|
color: #ccd5ce;
|
|
}
|
|
|
|
.coinpay-result:empty {
|
|
display: none;
|
|
}
|
|
|
|
.coinpay-result strong {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.coinpay-result p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.coinpay-result dl {
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.coinpay-result div {
|
|
display: grid;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.coinpay-result dt {
|
|
color: #8ee4c9;
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.coinpay-result dd {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.coinpay-result img {
|
|
width: min(12rem, 100%);
|
|
height: auto;
|
|
margin-top: 0.75rem;
|
|
border-radius: 6px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.primitive-grid,
|
|
.implementation-list,
|
|
.hire-grid,
|
|
.surface-strip {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.hero,
|
|
.soon-layout,
|
|
.two-col,
|
|
.hire-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.rail {
|
|
border-right: 0;
|
|
}
|
|
|
|
nav {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
nav a {
|
|
text-align: center;
|
|
}
|
|
|
|
.workspace {
|
|
padding: 0.9rem;
|
|
}
|
|
|
|
.section-head,
|
|
.hero {
|
|
align-items: start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.status-grid,
|
|
.primitive-grid,
|
|
.soon-grid,
|
|
.implementation-list,
|
|
.hire-grid,
|
|
.surface-strip {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.compare-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.compare-row > * {
|
|
border-left: 0;
|
|
border-top: 1px solid #e1e6dc;
|
|
}
|
|
|
|
.compare-row > *:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.4rem;
|
|
}
|
|
}
|
|
|
|
/* Rendered blog post HTML (autoblog payload) on the light workspace. */
|
|
.blog-content {
|
|
color: #1f2933;
|
|
}
|
|
.blog-content a {
|
|
color: #0a7d59;
|
|
}
|
|
.blog-content h2,
|
|
.blog-content h3,
|
|
.blog-content h4 {
|
|
margin: 1.75rem 0 0.5rem;
|
|
line-height: 1.25;
|
|
color: #101418;
|
|
}
|
|
.blog-content p,
|
|
.blog-content ul,
|
|
.blog-content ol,
|
|
.blog-content blockquote {
|
|
margin: 0 0 1rem;
|
|
}
|
|
.blog-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 0.5rem;
|
|
}
|
|
.blog-content pre {
|
|
background: #f1f3ef;
|
|
border: 1px solid #e3e6e0;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
overflow: auto;
|
|
}
|
|
.blog-content code {
|
|
background: rgba(16, 20, 24, 0.06);
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.9em;
|
|
}
|
|
.blog-content pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
.blog-content blockquote {
|
|
border-left: 3px solid #d9ded4;
|
|
padding-left: 1rem;
|
|
color: #5b6b7a;
|
|
}
|
|
|
|
/* --------------------------------------------------- install command ----- */
|
|
/* Two placements of one command: `.install-cta` on the homepage hero, meant to
|
|
be the first thing anyone sees, and `.install-rail` riding in the dark chrome
|
|
on every page -- present, but never competing with the nav. */
|
|
|
|
.install-copy {
|
|
flex: 0 0 auto;
|
|
padding: 0.55rem 0.9rem;
|
|
border-radius: 6px;
|
|
background: #5ac8a6;
|
|
color: #101418;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
transition: background 120ms ease;
|
|
}
|
|
|
|
.install-copy:hover {
|
|
background: #7ad9bd;
|
|
}
|
|
|
|
/* Confirmation has to survive the button's own text changing width, so the
|
|
label is centred in a fixed box rather than reflowing the row. */
|
|
.install-copy.is-copied {
|
|
background: #2d6f60;
|
|
color: #f6f7f4;
|
|
}
|
|
|
|
.install-copy-sm {
|
|
padding: 0.35rem 0.5rem;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
/* ---- homepage hero ---- */
|
|
|
|
.install-cta {
|
|
margin: 1rem 0 0.25rem;
|
|
padding: 0.9rem 1rem 0.8rem;
|
|
border: 2px solid #5ac8a6;
|
|
border-radius: 10px;
|
|
background: #101418;
|
|
color: #f6f7f4;
|
|
}
|
|
|
|
.install-cta-label {
|
|
margin: 0 0 0.5rem;
|
|
color: #5ac8a6;
|
|
font-size: 0.78rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.install-cta-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* The command is the point of the box, so it gets the room: it scrolls on its
|
|
own rather than wrapping mid-flag or pushing the Copy button off the edge. */
|
|
.install-cta-cmd {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
padding: 0.55rem 0.7rem;
|
|
border-radius: 6px;
|
|
background: #1b2229;
|
|
color: #f6f7f4;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 1rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-cta-note {
|
|
margin: 0.6rem 0 0;
|
|
color: #b5beb2;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.install-cta-note a {
|
|
color: #5ac8a6;
|
|
}
|
|
|
|
/* ---- site chrome ---- */
|
|
|
|
.install-rail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
padding: 0.6rem;
|
|
border: 1px solid #3f5049;
|
|
border-radius: 8px;
|
|
background: #171d24;
|
|
}
|
|
|
|
.install-rail-label {
|
|
color: #8fa39a;
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.install-rail-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.install-rail-row code {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
color: #d7ded8;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 0.66rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
/* Stacked layout: the row would otherwise squeeze the command to nothing. */
|
|
.install-cta-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.install-cta-cmd {
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|