/* inline-marks — yours to edit. * * Six ways for the name in a credit to carry its maker, on the line itself. * * A credit is one line in somebody else's footer, and it stays one: the same * size as the text round it, the same weight, never louder than the site it * is on. What a maker may choose is how their name is marked. Each of these * is a class on the credit and nothing else: the markup is `creditHTML`'s, * untouched. * * creditHTML(record, { className: 'nods-as-marker' }) * * nods-as-marker a stroke of highlighter under the name * nods-as-code the name as an element, in the page's mono * nods-as-disc a small record before the name * nods-as-dimension the name measured, between two strokes * nods-as-swatches the palette as the rule under the name * nods-as-wave a wave under the name * * At rest they are still. A line that moves in a footer nobody is looking at * is noise, and the reason clients ask for credits to be taken off. Each one * answers when it is attended to: under a pointer, with the keyboard on it, * and for as long as its card is open, which the panel says by writing * `data-nods-active` on the credit. * * --nods-mark the highlighter * --nods-code-ink the brackets * --nods-disc-label the record's label * --nods-palette a gradient of the palette, left to right */ /* The name's own rule is each style's to redraw. */ :is(.nods-as-marker, .nods-as-code, .nods-as-disc, .nods-as-dimension, .nods-as-swatches, .nods-as-wave) .nods-name { background: none; padding-bottom: 0; } /* ---- marker: a stroke under the name that fills when it is attended to ---- */ .nods-as-marker .nods-name { margin: 0 -0.14em; padding: 0.04em 0.14em; background: linear-gradient(var(--nods-mark, #ffd84a), var(--nods-mark, #ffd84a)) 0 100% / 100% 0.5em no-repeat; transition: background-size 260ms cubic-bezier(0.16, 1, 0.3, 1); } .nods-as-marker:is(:hover, :focus-within, [data-nods-active]) .nods-name, [data-nods-active] .nods-as-marker .nods-name { background-size: 100% 100%; } /* ---- code: the name as an element, with a caret after it ---- * Only the name is in the mono. The rest of the line is the client's, and * stays in the client's face. */ .nods-as-code .nods-name { font-family: var(--nods-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace); font-size: 0.92em; letter-spacing: 0; padding-right: 0.16em; border-right: 1.5px solid transparent; } .nods-as-code .nods-name::before { content: "<"; } .nods-as-code .nods-name::after { content: "/>"; } .nods-as-code .nods-name::before, .nods-as-code .nods-name::after { color: var(--nods-code-ink, color-mix(in oklab, currentColor 48%, transparent)); } .nods-as-code:is(:hover, :focus-within, [data-nods-active]) .nods-name, [data-nods-active] .nods-as-code .nods-name { animation: nods-caret 1s steps(1) infinite; } @keyframes nods-caret { 0%, 49% { border-right-color: currentColor; } 50%, 100% { border-right-color: transparent; } } /* ---- disc: a record before the name, which turns while it is attended to ---- */ .nods-as-disc .nods-name::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.36em; vertical-align: -0.16em; border-radius: 50%; background: radial-gradient(circle, transparent 0 7%, var(--nods-disc-label, #e8401c) 8.5% 37%, transparent 38.5%), conic-gradient(transparent 0 9%, rgb(255 255 255 / 0.5) 14%, transparent 20% 59%, rgb(255 255 255 / 0.35) 64%, transparent 70%), #0b0b0d; } .nods-as-disc:is(:hover, :focus-within, [data-nods-active]) .nods-name::before, [data-nods-active] .nods-as-disc .nods-name::before { animation: nods-turn 1.8s linear infinite; } @keyframes nods-turn { to { rotate: 360deg; } } /* ---- dimension: the name measured, on a line with a stroke across each end ---- */ .nods-as-dimension .nods-name { position: relative; padding-bottom: 0.36em; } .nods-as-dimension .nods-name::after { content: ""; position: absolute; left: -0.18em; right: -0.18em; bottom: 0; height: 0.44em; opacity: 0.7; background: linear-gradient(currentColor, currentColor) 50% 50% / calc(100% - 0.36em) 1px no-repeat, linear-gradient(135deg, transparent calc(50% - 0.55px), currentColor calc(50% - 0.55px) calc(50% + 0.55px), transparent calc(50% + 0.55px)) 0 50% / 0.44em 0.44em no-repeat, linear-gradient(135deg, transparent calc(50% - 0.55px), currentColor calc(50% - 0.55px) calc(50% + 0.55px), transparent calc(50% + 0.55px)) 100% 50% / 0.44em 0.44em no-repeat; } .nods-as-dimension:is(:hover, :focus-within, [data-nods-active]) .nods-name::after, [data-nods-active] .nods-as-dimension .nods-name::after { animation: nods-strike 520ms cubic-bezier(0.2, 0.9, 0.2, 1) both; opacity: 1; } @keyframes nods-strike { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } } /* ---- swatches: the palette as the rule under the name ---- */ .nods-as-swatches .nods-name { padding-bottom: 0.3em; /* A keyline under the palette, so a pale colour in it still closes the rule. */ background: linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2)) 0 100% / 100% 1px no-repeat, var(--nods-palette, linear-gradient(90deg, #1f2a44 0 20%, #c8553d 0 40%, #e9dcc3 0 60%, #7a8f6a 0 80%, #f2b84b 0)) 0 100% / 100% 0.16em no-repeat; transition: background-size 240ms cubic-bezier(0.16, 1, 0.3, 1); } .nods-as-swatches:is(:hover, :focus-within, [data-nods-active]) .nods-name, [data-nods-active] .nods-as-swatches .nods-name { background-size: 100% 1px, 100% 0.34em; } /* ---- wave: a rule under the name at rest, which becomes a wave and runs ---- * Still, it is a plain rule: a wavy line that does not move is what a * spelling checker draws. */ .nods-as-wave .nods-name { position: relative; padding-bottom: 0.42em; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.16em) / 100% 1px no-repeat; } .nods-as-wave .nods-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.36em; background: currentColor; opacity: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 32 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3q8-4.6 16 0t16 0' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 0 50% / 1.9em 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 32 8' preserveAspectRatio='none'%3E%3Cpath d='M0 3q8-4.6 16 0t16 0' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 0 50% / 1.9em 100% repeat-x; } .nods-as-wave:is(:hover, :focus-within, [data-nods-active]) .nods-name, [data-nods-active] .nods-as-wave .nods-name { background-size: 0 1px; } .nods-as-wave:is(:hover, :focus-within, [data-nods-active]) .nods-name::after, [data-nods-active] .nods-as-wave .nods-name::after { opacity: 1; animation: nods-run 900ms linear infinite; } @keyframes nods-run { to { -webkit-mask-position: 1.9em 50%; mask-position: 1.9em 50%; } } @media (prefers-reduced-motion: reduce) { [class*="nods-as-"] .nods-name, [class*="nods-as-"] .nods-name::before, [class*="nods-as-"] .nods-name::after { animation: none !important; transition: none !important; } } @media print { [class*="nods-as-"] .nods-name { background: none; text-decoration: underline; } [class*="nods-as-"] .nods-name::before, [class*="nods-as-"] .nods-name::after { display: none; } }