A standing notice on every page
The tutorial was written by AI and has not been read line by line by a human,
which a reader deserves to know before trusting a number in it. The notice is
fixed to the corner of the viewport rather than placed in the prose, so it is
present on every chapter and on the library page, and it takes no pointer
events, so it can neither be dismissed nor swallow a click meant for a slider
or an editor underneath it.
2 changed files+36−0
src/App.tsxmodified+6−0View file
@@ -90,6 +90,12 @@ export default function App() {
9090 <p className="lab-error">no such chapter: {route}</p>
9191 )}
9292 </main>
93+
94+ {/* Sits above every page and takes no clicks, so it can neither be
95+ dismissed nor get in the way of a control underneath it. */}
96+ <aside className="ai-disclaimer" role="note">
97+ <strong>Note:</strong> written by AI, not fully checked by a human.
98+ </aside>
9399 </div>
94100 )
95101 }
src/index.cssmodified+30−0View file
@@ -525,11 +525,41 @@ button.ghost:hover {
525525 border-top: 1px solid var(--line-soft);
526526 }
527527
528+/* ---------- the standing disclaimer ---------- */
529+
530+.ai-disclaimer {
531+ position: fixed;
532+ right: 14px;
533+ bottom: 14px;
534+ z-index: 50;
535+ max-width: 340px;
536+ padding: 6px 11px;
537+ border: 1px solid var(--bad);
538+ border-radius: 6px;
539+ background: color-mix(in srgb, var(--bad) 16%, var(--surface));
540+ box-shadow: 0 2px 10px rgb(0 0 0 / 45%);
541+ color: var(--bad);
542+ font-size: 12px;
543+ line-height: 1.45;
544+ /* it is a standing notice, not a control: never intercept a click meant for
545+ a slider or an editor underneath it */
546+ pointer-events: none;
547+}
548+
549+.ai-disclaimer strong {
550+ font-weight: 650;
551+}
552+
528553 @media (max-width: 900px) {
529554 .app {
530555 flex-direction: column;
531556 }
532557
558+ .ai-disclaimer {
559+ left: 14px;
560+ max-width: none;
561+ }
562+
533563 .sidebar {
534564 position: static;
535565 width: 100%;