/* nsite-clay base stylesheet. * * Everything the engine needs, in one file every template links. A template * sets the variables below and styles its own content; nothing here should * need editing to change how a page looks, and changing the engine should not * mean touching ten template files. * * Templates override the variables, not the rules. */ :root { /* The only things a template is expected to set. */ --nc-ink: #16130f; /* body text */ --nc-ink-dim: #6b6257; /* secondary text */ --nc-bg: #ffffff; /* page background */ --nc-panel: #f6f4f0; /* chrome and cards */ --nc-edge: #ddd5c8; /* borders */ --nc-accent: #7b3f00; /* focus rings, primary actions */ --nc-accent-ink: #ffffff; /* text on the accent */ --nc-ok: #2f6b3a; --nc-bad: #9b2c2c; --nc-radius: 10px; --nc-radius-sm: 7px; /* buttons and small controls */ --nc-shadow: 0 12px 34px -18px rgba(0, 0, 0, .55); /* set to none for a flat design */ --nc-chrome-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --nc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* ---- editing affordances ------------------------------------------------ */ [editable]:focus { outline: 2px solid var(--nc-accent); outline-offset: 5px; border-radius: 3px; } html[nc\:editable="true"] [editable]:hover:not(:focus) { box-shadow: 0 0 0 1px var(--nc-edge); border-radius: 3px; } /* ---- the edit gate ------------------------------------------------------ * With nc:edit-gate="hash" on , the runtime sets nc:editing to false * until the URL ends in #edit. Anything marked nc-ui disappears with it, so a * reader gets the page and nothing else. Templates put their toolbar, their * sign-in panel and any other control inside an element carrying nc-ui. */ html[nc\:editing="false"] .nc-ui-chrome { display: none !important; } /* Before the runtime boots, and for a reader with scripting off, nothing has * set nc:editing at all. Without this the toolbar renders as live furniture on * a static page. */ html:not([nc\:editing]) .nc-ui-chrome { display: none !important; } /* A template's own button rules routinely outrank the user-agent [hidden] rule, * which ships JavaScript-only controls to readers as visible dead buttons. */ [hidden] { display: none !important; } /* ---- the standard toolbar ----------------------------------------------- */ .nc-bar { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; gap: .5rem; align-items: center; padding: .5rem .6rem; border-radius: var(--nc-radius); background: var(--nc-panel); border: 1px solid var(--nc-edge); color: var(--nc-ink); font: .82rem/1.3 var(--nc-chrome-font); box-shadow: var(--nc-shadow); } .nc-bar button { font: inherit; cursor: pointer; white-space: nowrap; padding: .38rem .75rem; border-radius: var(--nc-radius-sm); border: 1px solid var(--nc-edge); background: var(--nc-bg); color: var(--nc-ink); } .nc-bar button:hover { border-color: var(--nc-accent); } .nc-bar button.nc-primary { background: var(--nc-accent); border-color: transparent; color: var(--nc-accent-ink); font-weight: 600; } .nc-bar .nc-who { color: var(--nc-ink-dim); font: .78rem var(--nc-mono); } .nc-bar .nc-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--nc-ink-dim); flex: 0 0 auto; } html[nc\:status="saving"] .nc-bar .nc-dot { background: var(--nc-accent); animation: nc-pulse 1s infinite; } html[nc\:status="saved"] .nc-bar .nc-dot { background: var(--nc-ok); } html[nc\:status="error"] .nc-bar .nc-dot { background: var(--nc-bad); } @keyframes nc-pulse { 50% { opacity: .3; } } /* Owner-only controls. The runtime stamps nc:owner-here on . */ .nc-owner-only { display: none; } html[nc\:owner-here="true"] .nc-owner-only { display: inline-flex; } html[nc\:owner-here="true"] .nc-guest-only { display: none; } /* A hint for an owner who is signed in but has not added #edit yet. Hidden from * everyone else, including readers, so it is not furniture on a public page. */ .nc-edit-hint { display: none; position: fixed; right: 1rem; bottom: 1rem; z-index: 59; font: .75rem var(--nc-mono); color: var(--nc-ink-dim); opacity: .55; } html[nc\:owner-here="true"][nc\:editing="false"] .nc-edit-hint { display: block; } /* ---- contextual controls ------------------------------------------------- * The gear pattern: controls that live on the object they act on and appear * only for an owner who is editing. * * A gear is part of the app, so it stays in the saved file and these rules keep * it away from readers. Do not put clay="no-save" on one: that strips it from * the save, so the pattern would work exactly once and the published page would * have no controls. clay="no-save" is for markup that must never be written at * all, such as a composer holding a half-typed line. * * nc-gear is visibility only. nc-gear-row adds the usual layout, so a control * that is not a row of small buttons can lay itself out without having to * out-specify the visibility rule. */ .nc-gear { display: none; } html[nc\:owner-here="true"][nc\:editing="true"] .nc-gear { display: revert; } html[nc\:owner-here="true"][nc\:editing="true"] .nc-gear-row { display: flex; gap: .25rem; } .nc-gear button { font: inherit; font-size: .78rem; line-height: 1; cursor: pointer; padding: .3rem .5rem; border-radius: var(--nc-radius-sm); border: 1px solid var(--nc-edge); background: var(--nc-panel); color: var(--nc-ink); } .nc-gear button:hover { border-color: var(--nc-accent); } /* ---- media inserted by the toolbar -------------------------------------- */ .nc-figure { margin: 1.4rem 0; } .nc-figure img, .nc-figure video { width: 100%; height: auto; display: block; border-radius: var(--nc-radius); } .nc-figure figcaption { font-size: .85rem; color: var(--nc-ink-dim); margin-top: .45rem; } .nc-embed .nc-embed-link { position: relative; display: block; } .nc-embed-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .75); } /* ---- Nostr feeds -------------------------------------------------------- * feed.js injects a minimal fallback; these override it so a feed inherits the * template rather than looking bolted on. */ .nc-feed { display: grid; gap: 1rem; } .nc-feed-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .nc-item { border: 1px solid var(--nc-edge); border-radius: var(--nc-radius); padding: .9rem 1rem; background: var(--nc-panel); } /* Clipping belongs to designs where the item is a box, not to every one. */ .nc-feed-cards .nc-item { overflow: hidden; } .nc-by { display: flex; align-items: center; gap: .55rem; font-size: .82rem; margin-bottom: .5rem; opacity: .75; } .nc-by a { text-decoration: none; color: inherit; } .nc-by a:hover { text-decoration: underline; } .nc-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } /* Opt in: a card wants the date pushed right, a plain log line wants it to * follow the name. */ .nc-feed-spread .nc-by .nc-when { margin-left: auto; } /* A kind-0 display name is free text and is sometimes a whole sentence, which * shoves everything after it out of the line. Every template that renders a * byline compactly would otherwise solve this again. */ .nc-name { font-weight: 500; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nc-title { font-size: 1.05rem; margin: .2rem 0 .35rem; } .nc-title a { text-decoration: none; color: inherit; } .nc-summary { margin: 0; font-size: .93rem; color: var(--nc-ink-dim); overflow-wrap: anywhere; } /* A note is the content on a page built around notes, not a caption under a * title, so it gets the body colour rather than the dim one. */ .nc-text { margin: 0; font-size: .93rem; color: var(--nc-ink); overflow-wrap: anywhere; } .nc-text p { margin: 0 0 .5rem; } .nc-cover { width: 100%; height: 9rem; object-fit: cover; border-radius: 8px; margin-bottom: .5rem; } .nc-pics { display: grid; gap: .35rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin-bottom: .5rem; } .nc-pics img { width: 100%; border-radius: 8px; object-fit: cover; } .nc-tags { margin-top: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; font-size: .75rem; opacity: .6; } .nc-feed-status { color: var(--nc-ink-dim); font-size: .9rem; } /* ---- site navigation ----------------------------------------------------- * Used by the project's own pages rather than by templates, but it lives here * so the twelve translated pages do not each carry a copy. */ .nc-nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; padding: 1.2rem 0; font: .88rem var(--nc-chrome-font); } .nc-nav a { color: var(--nc-ink-dim); text-decoration: none; } .nc-nav a:hover, .nc-nav a[aria-current="page"] { color: var(--nc-accent); } .nc-nav a[aria-current="page"] { font-weight: 600; } .nc-nav .nc-brand { display: flex; align-items: center; gap: .5rem; margin-right: auto; color: var(--nc-ink); font-weight: 600; } .nc-nav .nc-brand img { width: 26px; height: 26px; } .nc-lang { display: flex; gap: .4rem; align-items: center; } .nc-lang a { font: .78rem var(--nc-mono); text-transform: uppercase; letter-spacing: .04em; padding: .2rem .4rem; border-radius: var(--nc-radius-sm); } .nc-lang a[aria-current="page"] { background: var(--nc-panel); color: var(--nc-ink); } .nc-credit { color: var(--nc-ink-dim); font-size: .88rem; margin: .4rem 0 0; } @media (max-width: 34rem) { .nc-nav { gap: .8rem; font-size: .82rem; } .nc-nav .nc-brand { margin-right: 0; width: 100%; } } /* ---- form controls a template puts in its own page ----------------------- * A composer, a filter or a search box otherwise arrives with browser default * chrome inside a themed page, and every template writes the same reset. */ .nc-input { font: inherit; color: inherit; width: 100%; padding: .5rem .65rem; border-radius: var(--nc-radius-sm); border: 1px solid var(--nc-edge); background: var(--nc-bg); } .nc-input:focus { outline: 2px solid var(--nc-accent); outline-offset: 1px; } .nc-input::placeholder { color: var(--nc-ink-dim); opacity: .8; } /* ---- respect the reader ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; /* Without this an infinite animation restarts every frame instead of * stopping, so a breathing glow flickers rather than settling, which is * worse than the animation it was meant to remove. */ animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto !important; } }