Something went wrong. Try again.
DASL — Data-Addressed Structures & Links — is a small set of simple, standard primitives for working with content-addressed, linked data. If
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397@import "shared.css";
/* ---------- palette helpers ---------- */.yellow { --c: var(--yellow); }.green { --c: var(--green); }.purple { --c: var(--purple); }.orange { --c: var(--orange); }.red { --c: var(--red); }.blue { --c: var(--blue); }
/* ---------- page ---------- */body { background: #fff; color: #000;}.stripe { display: flex; height: 18px;}.stripe > span { flex: 1 1 0; background: var(--c);}main { box-sizing: border-box; padding: 24px 16px 32px; display: flex; flex-direction: column; gap: 48px;}a { text-underline-offset: 3px;}a:hover { color: #000;}
/* ---------- header ---------- */header { border: var(--brutal-border); padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px;}.wordmark { display: flex; flex-wrap: wrap; align-items: center; gap: 18px;}h1 { margin: 0; font-size: 5.5rem; line-height: 0.9; font-weight: 700; letter-spacing: -0.02em; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 10px; text-underline-offset: 8px;}.sticker { display: inline-block; background: var(--yellow); border: 3px solid #000; padding: 4px 12px; font-size: 1.125rem; font-weight: 700; transform: rotate(-4deg);}.tagline { margin: 16px 0 0; font-size: var(--header-font-size);}header nav,footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-weight: 700; text-transform: uppercase;}header nav { font-size: var(--header-font-size);}header nav a,footer nav a { color: #000; padding: 2px 6px; text-decoration-thickness: 5px; text-decoration-color: var(--c);}header nav a:hover,footer nav a:hover { background: var(--c);}
/* ---------- sections ---------- */section { display: flex; flex-direction: column; gap: 24px;}h2 { margin: 0; border: var(--brutal-border); padding: 10px 16px; font-weight: 400; font-size: var(--header-font-size); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 5px;}#what > h2 { text-decoration-color: var(--orange); }#how > h2 { text-decoration-color: var(--purple); }#code > h2 { text-decoration-color: var(--blue); }#spec > h2 { text-decoration-color: var(--red); }p, .prose { margin: 0 16px; max-width: 70ch; font-size: 1.25rem; line-height: 1.45;}.prose { display: flex; flex-direction: column; gap: 16px;}.prose p { margin: 0;}
/* ---------- what: priorities ---------- */#what > h3 { margin: 8px 16px 0; font-size: 1.375rem; font-weight: 700;}.priorities { margin: 0; padding: 0 16px; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;}.priorities li { border: 4px solid #000; padding: 16px; box-shadow: 5px 5px 0 var(--c); font-size: 1.0625rem; line-height: 1.4;}.priorities strong { display: block; margin-bottom: 8px; font-size: 1.25rem;}
/* ---------- how: example ---------- */.how { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; padding: 0 16px;}.how .prose { flex: 1 1 420px; min-width: 0; max-width: 60ch; margin: 0;}.example { flex: 999 1 520px; min-width: 0; margin: 0; border: var(--brutal-border); box-shadow: 5px 5px 0 var(--purple); background: #faf7ff;}.example figcaption { border-bottom: var(--brutal-border); padding: 6px 12px; background: var(--purple); font-weight: 700; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: .05em;}.example figcaption span { font-weight: 400; text-transform: none; letter-spacing: 0;}.example pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-size: 0.9375rem; line-height: 1.55;}
/* ---------- code: implementations ---------- */.langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 44px 36px; padding: 0 16px 16px;}.langs h3 { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 3px solid #000; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;}.langs ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 1rem; line-height: 1.35;}.langs li > a { font-weight: 700;}
/* ---------- specs ---------- */#spec { gap: 52px;}#spec > h2 + .maturity-key { margin-top: -40px;}.maturity-key { max-width: none; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 10px;}.maturity-key a { font-size: 1.0625rem; font-weight: 700; margin-right: 4px;}.group { gap: 16px; padding: 0 16px;}.group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;}.group h3 { margin: 0; font-size: 1.75rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 6px; text-underline-offset: 6px;}.group .group-desc { margin: 0; font-size: 1.125rem;}.maturity-key + .group { margin-top: -32px;}.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;}.card { border: 3px solid #000; box-shadow: 5px 5px 0 #000;}.card-head { background: var(--c); border-bottom: 3px solid #000; padding: 10px 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px;}.card-head a { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: #000; text-decoration: none;}.card-head a:hover { text-decoration: underline; text-decoration-color: #000; text-decoration-thickness: 3px;}.card-body { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 6px;}.card-sub { font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em;}.card-body p { margin: 0; font-size: 1rem; line-height: 1.4;}
/* Maturity tags: the border carries the level (dotted, dashed, solid). */.tag { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid rgba(0, 0, 0, .5); background: rgba(0, 0, 0, .1); color: #000; font-size: 0.6875rem; font-weight: 400; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;}.tag.hns { border-style: dotted; }.tag.stabilising { border-style: dashed; }.tag .boom { display: inline-block; font-size: .85em; line-height: 1; vertical-align: .08em; margin: 0 -.08em;}.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
/* ---------- footer ---------- */footer { border: var(--brutal-border); padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;}footer p { margin: 0; font-size: 1.125rem;}footer nav { font-size: 1.375rem;}
/* ---------- small screens ---------- */@media only screen and (max-width: 800px) { h1 { font-size: 4rem; } header { padding: 20px; } .maturity-key { justify-content: flex-start; }}