feat(site): unify website features with the X-Mech catalogue

404.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Page not found — TraitMech</title>
+<link rel="stylesheet" href="/TraitMech/pages/assets/style.css">
+</head>
+<body>
+<a class="skip-link" href="#main-content">Skip to main content</a>
+<header class="site-header">
+  <div class="wrap">
+    <a class="brand" href="/TraitMech/pages/index.html">TraitMech</a>
+    <nav>
+      <a href="/TraitMech/pages/index.html">Home</a>
+      <a href="/TraitMech/pages/browse.html">Browse</a>
+      <a href="/TraitMech/pages/map.html">Text map</a>
+      <a href="/TraitMech/pages/sequence-map.html">Sequence map (pLM)</a>
+      <a href="/TraitMech/pages/umap.html">Embedding space</a>
+      <a href="/TraitMech/pages/graph.html">Graph layout</a>
+      <a href="/TraitMech/pages/data/traits.json">Data JSON</a>
+      <a href="/TraitMech/pages/schema.html">Schema</a>
+      <a href="https://github.com/CultureBotAI/TraitMech">GitHub</a>
+      <a href="https://w3id.org/metpo">METPO</a>
+    </nav>
+  </div>
+</header>
+<main class="wrap" id="main-content" tabindex="-1">
+
+<header>
+  <p class="breadcrumb"><a href="/TraitMech/pages/index.html">TraitMech</a> <span>›</span> Page not found</p>
+  <h1>Page not found</h1>
+  <p class="tagline">Nothing is published at this address. It may be mistyped, or the page may
+    have moved: a trait page is addressed by its category and record file name, so a record
+    that changes category gets a new address.</p>
+</header>
+<form class="page-search not-found-search" action="/TraitMech/pages/browse.html" method="get" role="search">
+  <label for="not-found-query">Search all traits</label>
+  <input id="not-found-query" type="search" name="q" placeholder="Search by label, CURIE, synonym or definition…">
+  <button type="submit">Search</button>
+</form>
+<ul class="not-found-links">
+  <li><a href="/TraitMech/pages/index.html">TraitMech home</a></li>
+  <li><a href="/TraitMech/pages/browse.html">Browse every trait record</a></li>
+  <li><a href="/TraitMech/pages/schema.html">Schema reference</a></li>
+  <li><a href="https://culturebotai.github.io/mechs/">All Mech projects</a></li>
+</ul>
+
+</main>
+<footer class="site-footer">
+  <div class="wrap">
+    <div class="fam"><strong>KG-Microbe Mechs:</strong>
+      <a href="https://culturebotai.github.io/CultureMech/">CultureMech</a> ·
+      <a href="https://culturebotai.github.io/MediaIngredientMech/">MediaIngredientMech</a> ·
+      <a href="https://culturebotai.github.io/CommunityMech/">CommunityMech</a> ·
+      <span>TraitMech</span> ·
+      <a href="https://culturebotai.github.io/proteintraitsmech/">ProteinTraitsMech</a>
+    </div>
+    <div class="fam">
+      <a href="https://github.com/Knowledge-Graph-Hub/kg-microbe">kg-microbe</a> ·
+      <a href="https://bioportal.bioontology.org/ontologies/METPO">METPO</a> ·
+      <a href="/TraitMech/pages/data/traits.json">traits.json</a> ·
+      <a href="/TraitMech/pages/schema.html">LinkML schema</a>
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">YAML</a>)
+    </div>
+    <div class="fam license">
+      Project data: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-DATA">CC BY 4.0</a>.
+      Code: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-CODE">BSD-3-Clause</a>.
+      Third-party source material keeps its own terms
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE">licence scope</a>).
+    </div>
+
+  </div>
+  <p class="fam"><a href="https://culturebotai.github.io/mechs/">All Mech projects</a></p>
+</footer>
+<script src="/TraitMech/pages/theme-toggle.js"></script>
+</body>
+</html>

app/discussions/index.html

@@ -181,5 +181,8 @@ <h1 id="title">Knowledge gaps &amp; discussions</h1>
   } catch (error) { loadError(); }
 })();
 </script>
+<!-- TraitMech shell -->
+<footer class="shell-footer">Project data: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-DATA">CC BY 4.0</a>. Code: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-CODE">BSD-3-Clause</a>. Third-party source material keeps its own terms (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE">licence scope</a>).</footer>
+<!-- /TraitMech shell -->
 </body>
 </html>

app/discussions/style.css

@@ -15,3 +15,5 @@
 .badge { background:var(--badge); color:var(--badge-fg); }
 .badge.gap { background:var(--gap); color:var(--gap-fg); }
 a:focus-visible, button:focus-visible, input:focus-visible { outline-color:var(--accent); }
+.shell-footer { max-width:1200px; margin:1.5rem auto 2rem; padding:1rem 1.25rem;
+  border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }

pages/assets/style.css

@@ -361,7 +361,8 @@ table.trait-list tr:hover { background: var(--accent-soft); }
 .protein-example-table-wrap,
 .detail-table-scroll { max-width: 100%; overflow-x: auto; overflow-wrap: normal; }
 .protein-example-table-wrap:focus-visible,
-.detail-table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
+.detail-table-scroll:focus-visible,
+.data-table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
 .protein-example-table {
   border-collapse: collapse;
   font-size: 0.8rem;
@@ -610,6 +611,11 @@ label.facet-opt .cnt {
   padding: 1rem;
   margin: 0;
 }
+/* Stacked above the content on a narrow screen, a sticky sidebar stayed pinned
+   over the catalogue table or map plot it filters while the reader scrolled. */
+@media (max-width: 860px) {
+  .facet-sidebar { position: static; max-height: none; }
+}
 .facet-sidebar h2, .facet-sidebar h3 {
   font-size: 0.78rem;
   text-transform: uppercase;
@@ -685,3 +691,35 @@ label.facet-opt .cnt {
 /* Category names and provenance remain readable on narrow screens. */
 h1 { overflow-wrap: anywhere; }
 .pathograph-status { padding: .75rem; color: var(--muted); }
+
+/* Generated schema reference (pages/schema.html). Built from existing tokens so
+   both themes are inherited; the slot tables keep their columns and scroll
+   inside their own region on a narrow screen. */
+.schema-contents, .schema-class, .schema-enum { margin: 1rem 0; overflow-wrap: anywhere; }
+.schema-class h3, .schema-enum h3 { margin: 0 0 0.4rem; }
+.schema-table { min-width: 720px; }
+.schema-table td:last-child { min-width: 20rem; }
+.schema-table caption { text-align: left; padding: 0 0 0.4rem; }
+/* Slot names are case-sensitive identifiers: undo the uppercase column-header
+   treatment table.trait-list gives every th. */
+.schema-table th[scope="row"] { font-weight: 400; white-space: nowrap; text-transform: none;
+  letter-spacing: normal; background: none; color: var(--fg); font-size: inherit; }
+.schema-table th[scope="row"], .schema-table td { vertical-align: top; }
+.schema-values dt { margin-top: 0.5rem; }
+.schema-values dd { margin-left: 1rem; color: var(--muted); }
+
+/* Skip link: the first tab stop on every page, shown only while focused. */
+.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 2100; padding: 0.5rem 0.75rem;
+  background: var(--card-bg); color: var(--accent); border: 2px solid var(--accent); border-radius: 4px; }
+.skip-link:focus { top: 0.5rem; }
+main:focus { outline: none; }
+
+/* Curation status explained beside the status on record pages. */
+.status-meaning { margin-top: 0.35rem; }
+.status-meaning summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; }
+.status-meaning p { margin: 0.35rem 0 0; }
+
+/* Not-found page (404.html at the publishing root). */
+.not-found-search { margin: 1.25rem 0; flex-wrap: wrap; }
+.not-found-search label { flex-basis: 100%; font-weight: 600; }
+.not-found-links { line-height: 1.9; }

pages/browse.html

@@ -7,6 +7,7 @@
 <link rel="stylesheet" href="assets/style.css">
 </head>
 <body>
+<a class="skip-link" href="#main-content">Skip to main content</a>
 <header class="site-header">
   <div class="wrap">
     <a class="brand" href="index.html">TraitMech</a>
@@ -18,13 +19,13 @@
       <a href="umap.html">Embedding space</a>
       <a href="graph.html">Graph layout</a>
       <a href="data/traits.json">Data JSON</a>
-      <a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">Schema</a>
+      <a href="schema.html">Schema</a>
       <a href="https://github.com/CultureBotAI/TraitMech">GitHub</a>
       <a href="https://w3id.org/metpo">METPO</a>
     </nav>
   </div>
 </header>
-<main class="wrap">
+<main class="wrap" id="main-content" tabindex="-1">
 
 <header>
   <p class="breadcrumb"><a href="index.html">TraitMech</a> <span>›</span> Record browser</p>
@@ -2452,12 +2453,14 @@ <h3>QUANTITATIVE_PROPERTY</h3>
       <a href="https://github.com/Knowledge-Graph-Hub/kg-microbe">kg-microbe</a> ·
       <a href="https://bioportal.bioontology.org/ontologies/METPO">METPO</a> ·
       <a href="data/traits.json">traits.json</a> ·
-      <a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">LinkML schema</a>
+      <a href="schema.html">LinkML schema</a>
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">YAML</a>)
     </div>
-    <div class="fam">
-      Project data: <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> ·
-      code: <a href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause</a> ·
-      third-party source terms apply
+    <div class="fam license">
+      Project data: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-DATA">CC BY 4.0</a>.
+      Code: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-CODE">BSD-3-Clause</a>.
+      Third-party source material keeps its own terms
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE">licence scope</a>).
     </div>
     <div>
       Corpus as of 2026-10-25 21:40 UTC

pages/category/ecology.html

@@ -7,6 +7,7 @@
 <link rel="stylesheet" href="../assets/style.css">
 </head>
 <body>
+<a class="skip-link" href="#main-content">Skip to main content</a>
 <header class="site-header">
   <div class="wrap">
     <a class="brand" href="../index.html">TraitMech</a>
@@ -18,13 +19,13 @@
       <a href="../umap.html">Embedding space</a>
       <a href="../graph.html">Graph layout</a>
       <a href="../data/traits.json">Data JSON</a>
-      <a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">Schema</a>
+      <a href="../schema.html">Schema</a>
       <a href="https://github.com/CultureBotAI/TraitMech">GitHub</a>
       <a href="https://w3id.org/metpo">METPO</a>
     </nav>
   </div>
 </header>
-<main class="wrap">
+<main class="wrap" id="main-content" tabindex="-1">
 
 <header>
   <p class="breadcrumb"><a href="../index.html">TraitMech</a> <span>›</span> Ecology</p>
@@ -173,12 +174,14 @@ <h2>Filter records</h2>
       <a href="https://github.com/Knowledge-Graph-Hub/kg-microbe">kg-microbe</a> ·
       <a href="https://bioportal.bioontology.org/ontologies/METPO">METPO</a> ·
       <a href="../data/traits.json">traits.json</a> ·
-      <a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">LinkML schema</a>
+      <a href="../schema.html">LinkML schema</a>
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">YAML</a>)
     </div>
-    <div class="fam">
-      Project data: <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> ·
-      code: <a href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause</a> ·
-      third-party source terms apply
+    <div class="fam license">
+      Project data: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-DATA">CC BY 4.0</a>.
+      Code: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-CODE">BSD-3-Clause</a>.
+      Third-party source material keeps its own terms
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE">licence scope</a>).
     </div>
     <div>
       Corpus as of 2026-10-25 21:40 UTC

pages/category/environment.html

@@ -7,6 +7,7 @@
 <link rel="stylesheet" href="../assets/style.css">
 </head>
 <body>
+<a class="skip-link" href="#main-content">Skip to main content</a>
 <header class="site-header">
   <div class="wrap">
     <a class="brand" href="../index.html">TraitMech</a>
@@ -18,13 +19,13 @@
       <a href="../umap.html">Embedding space</a>
       <a href="../graph.html">Graph layout</a>
       <a href="../data/traits.json">Data JSON</a>
-      <a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">Schema</a>
+      <a href="../schema.html">Schema</a>
       <a href="https://github.com/CultureBotAI/TraitMech">GitHub</a>
       <a href="https://w3id.org/metpo">METPO</a>
     </nav>
   </div>
 </header>
-<main class="wrap">
+<main class="wrap" id="main-content" tabindex="-1">
 
 <header>
   <p class="breadcrumb"><a href="../index.html">TraitMech</a> <span>›</span> Environment</p>
@@ -337,12 +338,14 @@ <h2>Filter records</h2>
       <a href="https://github.com/Knowledge-Graph-Hub/kg-microbe">kg-microbe</a> ·
       <a href="https://bioportal.bioontology.org/ontologies/METPO">METPO</a> ·
       <a href="../data/traits.json">traits.json</a> ·
-      <a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">LinkML schema</a>
+      <a href="../schema.html">LinkML schema</a>
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">YAML</a>)
     </div>
-    <div class="fam">
-      Project data: <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> ·
-      code: <a href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause</a> ·
-      third-party source terms apply
+    <div class="fam license">
+      Project data: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-DATA">CC BY 4.0</a>.
+      Code: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-CODE">BSD-3-Clause</a>.
+      Third-party source material keeps its own terms
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE">licence scope</a>).
     </div>
     <div>
       Corpus as of 2026-10-25 21:40 UTC

pages/category/genomics.html

@@ -7,6 +7,7 @@
 <link rel="stylesheet" href="../assets/style.css">
 </head>
 <body>
+<a class="skip-link" href="#main-content">Skip to main content</a>
 <header class="site-header">
   <div class="wrap">
     <a class="brand" href="../index.html">TraitMech</a>
@@ -18,13 +19,13 @@
       <a href="../umap.html">Embedding space</a>
       <a href="../graph.html">Graph layout</a>
       <a href="../data/traits.json">Data JSON</a>
-      <a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">Schema</a>
+      <a href="../schema.html">Schema</a>
       <a href="https://github.com/CultureBotAI/TraitMech">GitHub</a>
       <a href="https://w3id.org/metpo">METPO</a>
     </nav>
   </div>
 </header>
-<main class="wrap">
+<main class="wrap" id="main-content" tabindex="-1">
 
 <header>
   <p class="breadcrumb"><a href="../index.html">TraitMech</a> <span>›</span> Genomics</p>
@@ -867,12 +868,14 @@ <h2>Filter records</h2>
       <a href="https://github.com/Knowledge-Graph-Hub/kg-microbe">kg-microbe</a> ·
       <a href="https://bioportal.bioontology.org/ontologies/METPO">METPO</a> ·
       <a href="../data/traits.json">traits.json</a> ·
-      <a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">LinkML schema</a>
+      <a href="../schema.html">LinkML schema</a>
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">YAML</a>)
     </div>
-    <div class="fam">
-      Project data: <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> ·
-      code: <a href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause</a> ·
-      third-party source terms apply
+    <div class="fam license">
+      Project data: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-DATA">CC BY 4.0</a>.
+      Code: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-CODE">BSD-3-Clause</a>.
+      Third-party source material keeps its own terms
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE">licence scope</a>).
     </div>
     <div>
       Corpus as of 2026-10-25 21:40 UTC

pages/category/metabolism.html

@@ -7,6 +7,7 @@
 <link rel="stylesheet" href="../assets/style.css">
 </head>
 <body>
+<a class="skip-link" href="#main-content">Skip to main content</a>
 <header class="site-header">
   <div class="wrap">
     <a class="brand" href="../index.html">TraitMech</a>
@@ -18,13 +19,13 @@
       <a href="../umap.html">Embedding space</a>
       <a href="../graph.html">Graph layout</a>
       <a href="../data/traits.json">Data JSON</a>
-      <a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">Schema</a>
+      <a href="../schema.html">Schema</a>
       <a href="https://github.com/CultureBotAI/TraitMech">GitHub</a>
       <a href="https://w3id.org/metpo">METPO</a>
     </nav>
   </div>
 </header>
-<main class="wrap">
+<main class="wrap" id="main-content" tabindex="-1">
 
 <header>
   <p class="breadcrumb"><a href="../index.html">TraitMech</a> <span>›</span> Metabolism</p>
@@ -457,12 +458,14 @@ <h2>Filter records</h2>
       <a href="https://github.com/Knowledge-Graph-Hub/kg-microbe">kg-microbe</a> ·
       <a href="https://bioportal.bioontology.org/ontologies/METPO">METPO</a> ·
       <a href="../data/traits.json">traits.json</a> ·
-      <a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">LinkML schema</a>
+      <a href="../schema.html">LinkML schema</a>
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/src/traitmech/schema/traitmech.yaml">YAML</a>)
     </div>
-    <div class="fam">
-      Project data: <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> ·
-      code: <a href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause</a> ·
-      third-party source terms apply
+    <div class="fam license">
+      Project data: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-DATA">CC BY 4.0</a>.
+      Code: <a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE-CODE">BSD-3-Clause</a>.
+      Third-party source material keeps its own terms
+      (<a href="https://github.com/CultureBotAI/TraitMech/blob/main/LICENSE">licence scope</a>).
     </div>
     <div>
       Corpus as of 2026-10-25 21:40 UTC