Skip to content

Use the shared Anomalon stylesheet byte for byte; About and Contact to anomalon.com #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dbccpage merged 1 commit into from
Nov 5, 2026
+86 −11
Merged

Use the shared Anomalon stylesheet byte for byte; About and Contact to anomalon.com #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 51 additions & 3 deletions web/static/anomalon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
* Anomalon design system v1 — palette A, "paper and teal".
* One stylesheet for www.anomalon.com and every *.anomalon.com tool.
* Load: <link rel="stylesheet" href="https://www.anomalon.com/ds/v1/anomalon.css">
* One stylesheet for anomalon.com and every *.anomalon.com tool.
* Load: <link rel="stylesheet" href="https://anomalon.com/ds/v1/anomalon.css">
* Classes are prefixed an- so they never collide with a tool's own CSS.
*/
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");
Expand All @@ -12,7 +12,7 @@
--an-surface: #ffffff;
--an-ink: #15202c;
--an-ink-2: #4b5664;
--an-ink-3: #6f7884;
--an-ink-3: #66717d;
--an-line: #e2e4e1;
--an-line-strong: #c9cdc8;
--an-accent: #12706c;
Expand Down Expand Up @@ -180,3 +180,51 @@ body.an { margin: 0; background: var(--an-bg); color: var(--an-ink); font: 400 v
.an-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) { .an *, .an *::before, .an *::after { transition: none !important; animation: none !important; } }

/* ---------- section heading on the home page ---------- */
.an-section { margin-top: var(--an-s7); display: grid; gap: var(--an-s2); }
.an-section > h2 { font-size: var(--an-fs-md); }
.an-section > p { color: var(--an-ink-2); max-width: 60ch; }
.an-section .an-tools { margin-top: var(--an-s3); }
.an-tool--placeholder { color: var(--an-ink-2) !important; }
.an-tool--placeholder .an-tool__name::after { content: none; }
.an-tool__name .an-chip { margin-left: auto; align-self: flex-start; flex: none; }

/* ---------- docs layout: left-hand nav + content ---------- */
.an-docs { max-width: var(--an-w-tool); margin: 0 auto; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--an-s6); align-items: start;
padding-block: var(--an-s6) var(--an-s6); padding-left: max(var(--an-s5), env(safe-area-inset-left, 0px)); padding-right: max(var(--an-s5), env(safe-area-inset-right, 0px)); }
.an-lhnav { position: sticky; top: calc(var(--an-header-h) + var(--an-s5) + env(safe-area-inset-top, 0px)); max-height: calc(100vh - var(--an-header-h) - var(--an-s6)); overflow-y: auto; font-size: 13.5px; }
.an-lhnav > summary { display: none; }
.an-lhnav ol, .an-lhnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.an-lhnav ol ol, .an-lhnav ul ul { margin: 2px 0 4px 12px; padding-left: 10px; border-left: 1px solid var(--an-line); }
.an-lhnav a { display: block; padding: 5px 10px; border-radius: 4px; color: var(--an-ink-2); text-decoration: none; line-height: 1.35; }
.an-lhnav a:hover { background: var(--an-mute-soft); color: var(--an-ink); }
.an-lhnav a[aria-current="true"] { background: var(--an-accent-soft); color: var(--an-ink); box-shadow: inset 2px 0 0 var(--an-accent); }
.an-lhnav__title { padding: 0 10px 8px; }
.an-docs__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--an-s6); min-width: 0; }
.an-docs__main > header { display: grid; gap: var(--an-s2); }
.an-docs__main > header p { color: var(--an-ink-2); max-width: 65ch; }
.an-topic { scroll-margin-top: calc(var(--an-header-h) + var(--an-s4)); display: grid; gap: var(--an-s2); padding-top: var(--an-s5); border-top: 1px solid var(--an-line); }
.an-topic .an-topic { margin-left: var(--an-s5); padding-top: var(--an-s4); }
.an-topic h2 { font-size: var(--an-fs-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--an-s3); }
.an-topic h3 { font-size: var(--an-fs-md); display: flex; flex-wrap: wrap; align-items: center; gap: var(--an-s3); }
/* nested contents toggles (e.g. "Subtopics (5)") and deep topic levels */
.an-lhnav details:not(.an-lhnav) > summary { display: list-item; padding: 2px 10px 4px 22px; font-size: 12.5px; color: var(--an-ink-3); cursor: pointer; }
.an-lhnav details:not(.an-lhnav) > summary:hover { color: var(--an-accent); }
.an-lhnav details:not(.an-lhnav) > ol { margin-left: 12px; }
.an-topic .an-topic .an-topic { border-top: 0; padding-top: var(--an-s1); gap: var(--an-s1); }
.an-topic h4, .an-topic h5, .an-topic h6 { margin: 0; }
.an-topic h4 { font-size: 15px; font-weight: 600; padding-top: var(--an-s2); }
.an-topic--leaf { border-top: 0; padding-top: 0; }
.an-topic--leaf > :is(h3, h4, h5, h6) { font-size: 14px; font-weight: 400; color: var(--an-ink-2); padding-top: 2px; }
.an-topic--leaf > :is(h3, h4, h5, h6)::before { content: "\2013\00a0"; color: var(--an-ink-3); }
.an-topic:focus { outline: 2px solid var(--an-accent); outline-offset: 4px; border-radius: 2px; }
.an-placeholder { border: 1px dashed var(--an-line-strong); border-radius: var(--an-radius); padding: 14px 16px; color: var(--an-ink-3); font-size: 13.5px; background: var(--an-surface); }
@media (max-width: 860px) {
.an-docs { grid-template-columns: minmax(0, 1fr); gap: var(--an-s5); padding-left: max(var(--an-s4), env(safe-area-inset-left, 0px)); padding-right: max(var(--an-s4), env(safe-area-inset-right, 0px)); }
.an-lhnav { position: static; max-height: none; border: 1px solid var(--an-line); border-radius: var(--an-radius); background: var(--an-surface); }
.an-lhnav > summary { display: flex; justify-content: space-between; padding: 10px 12px; cursor: pointer; font-weight: 500; color: var(--an-ink); }
.an-lhnav__body { padding: 0 6px 8px; }
.an-lhnav__title { display: none; }
.an-topic .an-topic { margin-left: var(--an-s3); }
}
35 changes: 31 additions & 4 deletions web/static/anomalon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
* Anomalon design system v1 — behaviour.
* Load: <script src="https://www.anomalon.com/ds/v1/anomalon.js" defer></script>
* Load: <script src="https://anomalon.com/ds/v1/anomalon.js" defer></script>
*
* - <div data-an-header data-tool="Simplex-NF" data-nav="Synthesis=/,Quickstart=/#quickstart"></div>
* renders the shared header. data-tool and data-nav are optional;
Expand All @@ -13,7 +13,7 @@
(function () {
"use strict";
if (window.Anomalon) return;
var HOME = "https://www.anomalon.com";
var HOME = "https://anomalon.com";
var MARK =
'<svg viewBox="0 0 22 22" aria-hidden="true"><rect x="1" y="1" width="20" height="20" rx="4" fill="none" stroke="currentColor" stroke-width="1.6"/>' +
'<path d="M6 15.5 11 6l5 9.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>' +
Expand Down Expand Up @@ -64,7 +64,7 @@
'<footer class="an-footer"><div class="an-footer__in">' +
"<span>" + (tool ? "Anomalon · " + esc(tool) : "© " + year + " Anomalon") + "</span>" +
(src ? '<a href="' + esc(src) + '">Source</a>' : "") +
'<a href="' + HOME + '/about">About</a><a href="' + HOME + '/contact">Contact</a>' +
'<a href="' + HOME + '/about/">About</a><a href="' + HOME + '/contact/">Contact</a>' +
"</div></footer>";
}

Expand Down Expand Up @@ -102,7 +102,34 @@
}
});

window.Anomalon = { init: init, version: "1.0.0" };
/* Left-hand nav: mark the section currently in view (aria-current="true"). */
function lhnav() {
/* phones: start with the Contents panel closed */
var panel = document.querySelector("details.an-lhnav");
if (panel && window.matchMedia && window.matchMedia("(max-width: 860px)").matches) panel.open = false;
var links = Array.prototype.slice.call(document.querySelectorAll(".an-lhnav a[href^='#']"));
if (!links.length || !("IntersectionObserver" in window)) return;
var byId = {};
links.forEach(function (a) { byId[decodeURIComponent(a.getAttribute("href").slice(1))] = a; });
var visible = {};
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) { visible[e.target.id] = e.isIntersecting ? e.boundingClientRect.top : undefined; });
var best = null, top = Infinity;
Object.keys(visible).forEach(function (id) { if (visible[id] !== undefined && visible[id] < top) { top = visible[id]; best = id; } });
if (!best) return;
links.forEach(function (a) { a.removeAttribute("aria-current"); });
if (byId[best]) {
byId[best].setAttribute("aria-current", "true");
/* reveal the current item inside collapsed nested contents */
for (var d = byId[best].parentElement; d && !d.classList.contains("an-lhnav"); d = d.parentElement)
if (d.tagName === "DETAILS") d.open = true;
}
}, { rootMargin: "-64px 0px -60% 0px" });
Object.keys(byId).forEach(function (id) { var el = document.getElementById(id); if (el) io.observe(el); });
}

window.Anomalon = { init: init, version: "1.3.0" };
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", lhnav); else lhnav();
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", function () { init(); });
else init();
})();
8 changes: 4 additions & 4 deletions web/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@
<!-- Shared Anomalon header -->
<header class="an-header">
<div class="an-header__in">
<a class="an-brand" href="https://www.anomalon.com/"><svg viewBox="0 0 22 22" aria-hidden="true"><rect x="1" y="1" width="20" height="20" rx="4" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M6 15.5 11 6l5 9.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><circle cx="11" cy="12.6" r="1.7" fill="var(--an-accent)"/></svg>Anomalon <span class="an-brand__tool">/ Simplex-NF Studio</span></a>
<a class="an-brand" href="https://anomalon.com/"><svg viewBox="0 0 22 22" aria-hidden="true"><rect x="1" y="1" width="20" height="20" rx="4" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M6 15.5 11 6l5 9.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><circle cx="11" cy="12.6" r="1.7" fill="var(--an-accent)"/></svg>Anomalon <span class="an-brand__tool">/ Simplex-NF Studio</span></a>
<button class="an-btn an-btn--ghost an-nav__toggle" aria-expanded="false" aria-controls="an-nav">Menu</button>
<nav class="an-nav" id="an-nav" aria-label="Site"><a href="#quickstart" onclick="switchTab('quickstart')">Quickstart</a><a href="https://github.com/dbccpage/simplex-normal-forms">Source</a><a href="https://www.anomalon.com/">All tools</a></nav>
<nav class="an-nav" id="an-nav" aria-label="Site"><a href="#quickstart" onclick="switchTab('quickstart')">Quickstart</a><a href="https://github.com/dbccpage/simplex-normal-forms">Source</a><a href="https://anomalon.com/">All tools</a></nav>
</div>
</header>

Expand Down Expand Up @@ -684,8 +684,8 @@ <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">4. Ver
<span>Anomalon · Simplex-NF Studio v0.1.0</span>
<span class="font-mono text-[11px]">AuthorityEffect: None · certified_implies_authorized: false</span>
<a href="https://github.com/dbccpage/simplex-normal-forms">Source</a>
<a href="https://www.anomalon.com/">About</a>
<a href="mailto:ooutwire@pm.me">Contact</a>
<a href="https://anomalon.com/about/">About</a>
<a href="https://anomalon.com/contact/">Contact</a>
</div>
</footer>

Expand Down
Loading