johnandersen777.bsky.social/atlibs-socialweb-computer-app
app.socialweb.computer: socialweb.computer in one page, one atlibs composition
0
0
/* exec.fedfork.com's stylesheet, as is: socialweb-computer-emdash 2d0a3fc site/src/styles/site.css (Unlicense) */
:root {
color-scheme: light dark;
--color-bg: light-dark(#f7f7f5, #0f1012);
--color-surface: light-dark(#ffffff, #18191c);
--color-fill: light-dark(#efefec, #222327);
--color-text: light-dark(#18181b, #ededed);
--color-text-secondary: light-dark(#52525b, #a1a1aa);
--color-muted: light-dark(#71717a, #8b8b94);
--color-border-subtle: light-dark(#ececea, #232428);
--color-border: light-dark(#e2e2df, #2c2d31);
--color-border-strong: light-dark(#c9c9c4, #3f4046);
--color-brand: #1d4ed8;
--color-brand-text: light-dark(#1d4ed8, #93c5fd);
--color-brand-ring: light-dark(#bfdbfe, #1e3a8a);
--font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
--font-size-xs: 0.75rem;
--font-size-label: 0.8125rem;
--font-size-sm: 0.875rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.75rem;
--font-weight-heading: 650;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 999px;
--shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 0 0 1px var(--color-border-subtle);
--tone-you: #8b5cf6;
--tone-pds: #ec4899;
--tone-site: #3b82f6;
--tone-sandbox: #f59e0b;
--tone-wasm: #10b981;
--tone-store: #64748b;
--tone-cloud: #f97316;
--tone-deny: #ef4444;
--syntax-keyword: light-dark(#7c3aed, #c4b5fd);
--syntax-string: light-dark(#047857, #6ee7b7);
--syntax-number: light-dark(#b45309, #fcd34d);
--syntax-comment: light-dark(#71717a, #8b8b94);
--syntax-type: light-dark(#0369a1, #7dd3fc);
--syntax-function: light-dark(#1d4ed8, #93c5fd);
--syntax-property: light-dark(#be185d, #f9a8d4);
--syntax-punctuation: light-dark(#52525b, #a1a1aa);
}
:root[data-theme="light"] {
color-scheme: light;
}
:root[data-theme="dark"] {
color-scheme: dark;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: var(--color-bg);
color: var(--color-text);
font: 400 1rem/1.6 var(--font-body);
}
a {
color: inherit;
}
code,
pre {
font-family: var(--font-mono);
}
.frame {
width: min(100% - 2rem, 64rem);
margin-inline: auto;
}
.site-header {
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
}
.site-header__inner {
display: grid;
grid-template-areas: "title nav actions";
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.5rem 1.25rem;
min-height: 3.75rem;
padding-block: 0.5rem;
}
.site-title {
grid-area: title;
overflow: hidden;
font-weight: var(--font-weight-heading);
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-nav {
grid-area: nav;
display: flex;
justify-content: flex-end;
gap: 1rem;
font-size: var(--font-size-sm);
white-space: nowrap;
}
.site-nav a {
color: var(--color-text-secondary);
text-decoration: none;
}
.site-nav a[aria-current] {
color: var(--color-text);
font-weight: 600;
}
.site-actions {
grid-area: actions;
display: flex;
align-items: center;
gap: 0.75rem;
font-size: var(--font-size-sm);
}
.site-actions__link,
.site-user {
color: var(--color-text-secondary);
text-decoration: none;
white-space: nowrap;
}
.source-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.3rem 0.7rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-full);
color: var(--color-text);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.source-link:hover {
border-color: var(--color-text-secondary);
}
.menu-toggle,
.site-nav__extras {
display: none;
}
@media (max-width: 72rem) {
.site-header__inner {
grid-template-areas:
"title actions"
"nav nav";
grid-template-columns: minmax(0, 1fr) auto;
}
.site-nav {
justify-content: flex-start;
margin-inline: -1rem;
padding: 0.25rem 1rem 0.5rem;
overflow-x: auto;
scrollbar-width: none;
mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.js .menu-toggle {
display: inline-grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
background: none;
color: var(--color-text);
cursor: pointer;
}
.menu-toggle:focus-visible {
outline: 3px solid var(--color-brand-ring);
outline-offset: 2px;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
display: block;
width: 1.1rem;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: transform 160ms ease, opacity 160ms ease;
}
.menu-toggle__bars {
position: relative;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
content: "";
position: absolute;
left: 0;
}
.menu-toggle__bars::before {
top: -6px;
}
.menu-toggle__bars::after {
top: 6px;
}
.is-open .menu-toggle__bars {
background: transparent;
}
.is-open .menu-toggle__bars::before {
transform: translateY(6px) rotate(45deg);
}
.is-open .menu-toggle__bars::after {
transform: translateY(-6px) rotate(-45deg);
}
.js .site-nav {
display: none;
flex-direction: column;
gap: 0;
margin-inline: -1rem;
padding: 0.25rem 0 0.5rem;
overflow: visible;
mask-image: none;
border-top: 1px solid var(--color-border-subtle);
font-size: 1rem;
}
.js .is-open .site-nav {
display: flex;
}
.js .site-nav a {
padding: 0.75rem 1rem;
border-left: 3px solid transparent;
}
.js .site-nav a[aria-current] {
border-left-color: var(--color-brand);
background: var(--color-fill);
}
.js .site-actions .source-link,
.js .site-actions .theme-toggle {
display: none;
}
.js .site-nav__extras {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.25rem;
padding: 0.75rem 1rem 0.25rem;
border-top: 1px solid var(--color-border-subtle);
}
.js .site-nav .site-nav__extras a {
padding: 0.3rem 0.7rem;
border-left: 1px solid var(--color-border-strong);
}
}
@media (prefers-reduced-motion: reduce) {
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
transition: none;
}
}
@media (max-width: 30rem) {
.site-actions .source-link span,
.site-user {
display: none;
}
.site-actions .source-link {
padding: 0.35rem;
}
.site-actions {
gap: 0.5rem;
}
.site-actions .btn {
padding: 0.4rem 0.75rem;
}
.site-actions .theme-toggle__track {
width: 2.75rem;
}
.site-actions .theme-toggle[aria-checked="true"] .theme-toggle__thumb {
transform: translateX(1rem);
}
}
.band {
padding-block: 3rem;
}
.band + .band {
padding-top: 0;
}
.eyebrow {
color: var(--color-brand-text);
font-size: var(--font-size-label);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.intro__title {
margin-top: 0.5rem;
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: var(--font-weight-heading);
line-height: 1.15;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
border: 1px solid var(--color-brand);
border-radius: var(--radius-full);
background: var(--color-brand);
color: #fff;
font: 500 var(--font-size-sm) / 1.2 var(--font-body);
text-decoration: none;
cursor: pointer;
}
.btn--ghost {
border-color: var(--color-border-strong);
background: transparent;
color: var(--color-text);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn:focus-visible {
outline: 3px solid var(--color-brand-ring);
outline-offset: 2px;
}
.lede {
max-width: 46rem;
margin-block: 1rem 0;
color: var(--color-text-secondary);
font-size: var(--font-size-lg);
}
.site-footer {
margin-top: 4rem;
border-top: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-muted);
font-size: var(--font-size-sm);
}
.site-footer__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem 2rem;
padding-block: 1.5rem;
}
.site-footer a {
display: inline-block;
margin-right: 1rem;
white-space: nowrap;
}
.pele {
--pele-bg: var(--color-surface);
--pele-fg: var(--color-text);
--pele-muted: var(--color-muted);
--pele-line: var(--color-text-secondary);
--pele-surface: var(--color-fill);
--pele-surface-alt: var(--color-border-subtle);
--pele-border: var(--color-border-strong);
--pele-accent: var(--color-brand);
--pele-font: var(--font-body);
--pele-font-mono: var(--font-mono);
--pele-radius: 8px;
}
.diagram {
margin-block: 1.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-card);
}
.diagram__canvas {
display: flex;
justify-content: safe center;
padding: 1.25rem;
overflow-x: auto;
}
.diagram__canvas svg {
flex: none;
min-width: min(var(--diagram-width, 0px), 40rem);
}
.diagram__canvas--narrow {
display: none;
}
@media (max-width: 40rem) {
.diagram--flips .diagram__canvas--wide {
display: none;
}
.diagram--flips .diagram__canvas--narrow {
display: flex;
}
}
.diagram figcaption {
padding: 0.75rem 1.25rem;
border-top: 1px solid var(--color-border-subtle);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
list-style: none;
color: var(--color-text-secondary);
font-size: var(--font-size-label);
}
.legend__item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.legend__swatch {
width: 0.9rem;
height: 0.9rem;
border: 1.5px solid var(--tone);
border-radius: 4px;
background: color-mix(in srgb, var(--tone) 18%, transparent);
}
.tone-you { --tone: var(--tone-you); }
.tone-pds { --tone: var(--tone-pds); }
.tone-site { --tone: var(--tone-site); }
.tone-sandbox { --tone: var(--tone-sandbox); }
.tone-wasm { --tone: var(--tone-wasm); }
.tone-store { --tone: var(--tone-store); }
.tone-cloud { --tone: var(--tone-cloud); }
.tone-deny { --tone: var(--tone-deny); }
.code {
margin-block: 1rem;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-fill);
}
.code__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.375rem 0.5rem 0.375rem 1rem;
border-bottom: 1px solid var(--color-border);
color: var(--color-muted);
font: 500 var(--font-size-xs) / 1.4 var(--font-mono);
}
.code__copy {
padding: 0.25rem 0.625rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-full);
background: var(--color-surface);
color: var(--color-text);
font: 500 var(--font-size-xs) / 1.4 var(--font-body);
cursor: pointer;
}
.code pre {
padding: 1rem;
overflow-x: auto;
font-size: var(--font-size-sm);
line-height: 1.55;
}
.guide {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
}
.guide__toc {
font-size: var(--font-size-sm);
}
.guide__toc-title {
margin-bottom: 0.5rem;
color: var(--color-muted);
font-size: var(--font-size-label);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.guide__toc ol {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
list-style: none;
}
.guide__toc a {
color: var(--color-text-secondary);
text-decoration: none;
}
.guide__toc a:hover {
color: var(--color-brand-text);
}
@media (min-width: 60rem) {
.guide {
grid-template-columns: 12rem minmax(0, 1fr);
gap: 3rem;
}
.guide__toc {
position: sticky;
top: 1.5rem;
align-self: start;
}
.guide__toc ol {
flex-direction: column;
padding-left: 0.75rem;
border-left: 1px solid var(--color-border);
}
}
.prose {
min-width: 0;
max-width: 48rem;
}
.prose > section + section {
margin-top: 3rem;
}
.prose h2 {
margin-bottom: 0.75rem;
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-heading);
line-height: 1.25;
scroll-margin-top: 1.5rem;
}
.prose h3 {
margin-block: 1.75rem 0.5rem;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-heading);
}
.prose p,
.prose ul,
.prose ol {
margin-block: 0.75rem;
}
.prose ul,
.prose ol {
padding-left: 1.4rem;
}
.prose li + li {
margin-top: 0.35rem;
}
.prose a {
color: var(--color-brand-text);
}
.prose :not(pre) > code,
.lede code,
.card code {
padding: 0.1em 0.35em;
border-radius: 0.3em;
background: var(--color-fill);
font-size: 0.875em;
overflow-wrap: anywhere;
}
.prose table {
width: 100%;
margin-block: 1rem;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
.table-scroll {
overflow-x: auto;
}
.prose th,
.prose td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--color-border);
text-align: left;
vertical-align: top;
}
.prose th {
color: var(--color-muted);
font-weight: 600;
}
.steps {
counter-reset: step;
list-style: none;
padding-left: 0 !important;
}
.steps > li {
position: relative;
padding-left: 2.75rem;
counter-increment: step;
}
.steps > li + li {
margin-top: 1.5rem;
}
.steps > li::before {
content: counter(step);
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 1.9rem;
height: 1.9rem;
border-radius: var(--radius-full);
background: var(--color-brand);
color: #fff;
font-size: var(--font-size-sm);
font-weight: 600;
}
.steps > li > strong:first-child {
display: block;
font-size: var(--font-size-lg);
}
.callout {
margin-block: 1.25rem;
padding: 0.875rem 1rem;
border: 1px solid color-mix(in srgb, var(--tone, var(--tone-site)) 45%, transparent);
border-left-width: 4px;
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--tone, var(--tone-site)) 8%, transparent);
font-size: var(--font-size-sm);
}
.callout strong:first-child {
display: block;
margin-bottom: 0.25rem;
}
.pager {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1rem;
margin-top: 4rem;
}
.pager__link {
display: grid;
gap: 0.125rem;
padding: 1rem 1.25rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
font-weight: 600;
text-decoration: none;
}
.pager__link span {
color: var(--color-muted);
font-size: var(--font-size-label);
font-weight: 500;
}
.pager__link--next {
text-align: right;
}
.pager__link:hover {
border-color: var(--color-brand);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1rem;
}
.tile {
padding: 1.25rem;
border: 1px solid var(--color-border);
border-top: 3px solid var(--tone, var(--color-brand));
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.tile h3 {
margin-bottom: 0.375rem;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-heading);
}
.tile p {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
a.tile {
text-decoration: none;
}
a.tile:hover {
border-color: var(--tone, var(--color-brand));
}
.section-title {
margin-bottom: 1rem;
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-heading);
}
.actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
}
.theme-toggle {
display: inline-flex;
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: none;
cursor: pointer;
}
.theme-toggle:focus-visible {
outline: 3px solid var(--color-brand-ring);
outline-offset: 2px;
}
.theme-toggle__track {
position: relative;
display: inline-block;
width: 3.25rem;
height: 1.75rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-full);
background: light-dark(#e0e7ff, #312e81);
transition: background 160ms ease;
}
.theme-toggle__thumb {
position: absolute;
top: 0.15rem;
left: 0.15rem;
display: grid;
place-items: center;
width: 1.35rem;
height: 1.35rem;
border-radius: var(--radius-full);
background: light-dark(#ffffff, #e0e7ff);
box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
font-size: 0.8rem;
line-height: 1;
transition: transform 160ms ease;
}
.theme-toggle__sun {
color: #d97706;
}
.theme-toggle__moon {
display: none;
color: #4338ca;
}
.theme-toggle[aria-checked="true"] .theme-toggle__thumb {
transform: translateX(1.5rem);
}
.theme-toggle[aria-checked="true"] .theme-toggle__sun {
display: none;
}
.theme-toggle[aria-checked="true"] .theme-toggle__moon {
display: inline;
}
@media (prefers-reduced-motion: reduce) {
.theme-toggle__track,
.theme-toggle__thumb {
transition: none;
}
}
.prose .legend {
margin-block: 0.75rem;
padding-left: 0;
}
.card {
padding: 1.5rem;
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-card);
}
.card > h2,
.card > h3 {
margin-bottom: 0.5rem;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-heading);
}
.notice {
margin-bottom: 1.5rem;
padding: 0.875rem 1.125rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.notice--success {
border-color: light-dark(#bbf7d0, #14532d);
background: light-dark(#f0fdf4, #052e16);
}
.notice--error {
border-color: light-dark(#fecaca, #7f1d1d);
background: light-dark(#fef2f2, #450a0a);
}
.pill {
display: inline-block;
flex-shrink: 0;
padding: 0.2rem 0.65rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 500;
white-space: nowrap;
}
.pill--on {
border-color: light-dark(#bbf7d0, #14532d);
background: light-dark(#f0fdf4, #052e16);
color: light-dark(#166534, #86efac);
}
.pill--off {
background: var(--color-fill);
color: var(--color-muted);
}
.pill--bad {
border-color: light-dark(#fecaca, #7f1d1d);
background: light-dark(#fef2f2, #450a0a);
color: light-dark(#991b1b, #fca5a5);
}
.field {
width: 100%;
min-width: 0;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-bg);
color: var(--color-text);
font: inherit;
}
textarea.field {
min-height: 5rem;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
line-height: 1.5;
resize: vertical;
}
.field:focus-visible {
outline: 3px solid var(--color-brand-ring);
outline-offset: 1px;
}
.form {
display: grid;
gap: 1rem;
}
.form-row {
display: grid;
gap: 0.35rem;
}
.form-row > label,
.form-label {
font-size: var(--font-size-sm);
font-weight: 600;
}
.form-hint {
color: var(--color-muted);
font-size: var(--font-size-xs);
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
.btn--small {
padding: 0.3rem 0.75rem;
font-size: var(--font-size-xs);
}
.btn--danger {
border-color: var(--tone-deny);
background: transparent;
color: var(--tone-deny);
}
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.output {
max-height: 24rem;
padding: 0.875rem 1rem;
overflow: auto;
border-radius: var(--radius-lg);
background: var(--color-fill);
font-size: var(--font-size-sm);
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
}