jekyll-theme-modootoday 1.0.0

data/_layouts/reference.html

@@ -0,0 +1,24 @@
+---
+layout: default
+mt_bundle: docs-extra
+mt_main: mt-dx mt-dx-reference
+---
+{%- comment -%}reference: an API or option reference. members: [{name, signature, text, since, deprecated, id}] become a contents
+list and one section each (h2 with the name in code, the signature, the text, since / deprecated notes); the body comes first.{%- endcomment -%}
+<article aria-labelledby="mt-dx-title">
+{%- include modootoday/docs-extra/head.html %}
+{%- if page.members.size > 1 %}
+<nav class="mt-dx-toc" aria-label="{{ mt_t_layouts_contents }}"><ul>{% for m in page.members %}<li><a href="#{{ m.id | default: m.name | slugify }}"><code>{{ m.name }}</code></a></li>{% endfor %}</ul></nav>
+{%- endif %}
+<div class="mt-dx-body">
+{{ content }}
+</div>
+{%- for m in page.members %}{% assign _id = m.id | default: m.name | slugify %}
+<section class="mt-dx-member" id="{{ _id }}" aria-labelledby="{{ _id }}-h">
+<h2 id="{{ _id }}-h"><code>{{ m.name }}</code></h2>
+{%- if m.signature %}<pre class="mt-dx-sig"><code>{{ m.signature }}</code></pre>{% endif %}
+{%- if m.text %}{{ m.text | markdownify }}{% endif %}
+{%- if m.since or m.deprecated %}<p class="mt-dx-meta">{% if m.since %}{{ mt_t_layouts_version }} {{ m.since }}{% endif %}{% if m.deprecated %}{% if m.since %} · {% endif %}<strong class="mt-dx-warn">{{ m.deprecated }}</strong>{% endif %}</p>{% endif %}
+</section>
+{%- endfor %}
+</article>

data/_layouts/resume.html

@@ -0,0 +1,50 @@
+---
+layout: default
+mt_bundle: resume
+mt_main: mt-cv
+---
+{%- include modootoday/i18n.html -%}
+{%- comment -%}resume: a print-first CV. name (or title), headline, email, phone, location, links: [{label, url}], then the body
+(summary), experience: [{role, org, start, end, text, highlights}], education: [{degree, school, start, end}],
+skills: [{group, items}]. Structured data: ProfilePage whose Person has jobTitle, worksFor, alumniOf, knowsAbout, sameAs.{%- endcomment -%}
+{%- assign _yf = "%Y.%m" -%}
+<article aria-labelledby="mt-cv-name" class="h-card">
+<header class="mt-cv-head">
+<h1 id="mt-cv-name" class="p-name">{{ page.name | default: page.title }}</h1>
+{%- if page.headline %}<p class="mt-cv-headline p-job-title">{{ page.headline }}</p>{% endif %}
+<ul class="mt-cv-contact" role="list">
+{%- if page.email %}<li><a class="u-email" href="mailto:{{ page.email }}">{{ page.email }}</a></li>{% endif %}
+{%- if page.phone %}<li><a class="p-tel" href="tel:{{ page.phone | remove: ' ' }}">{{ page.phone }}</a></li>{% endif %}
+{%- if page.location %}<li class="p-locality">{{ page.location }}</li>{% endif %}
+{%- for l in page.links %}<li><a class="u-url" href="{% include modootoday/link.html url=l.url %}"{% include modootoday/links/attrs.html on=l.new_window target=l.target url=l.url %}>{{ l.label }}</a></li>{% endfor %}
+</ul>
+</header>
+<div class="mt-cv-summary p-note">
+{{ content }}
+</div>
+{%- if page.experience %}
+<section aria-labelledby="mt-cv-exp"><h2 id="mt-cv-exp">{{ mt_t_layouts_experience }}</h2>
+{%- for e in page.experience %}
+<div class="mt-cv-item"><h3>{{ e.role }}<span class="mt-cv-org">{{ e.org }}</span></h3>
+<p class="mt-cv-when">{% if e.start %}<time datetime="{{ e.start | date: '%Y-%m' }}">{{ e.start | date: _yf }}</time> – {% if e.end %}<time datetime="{{ e.end | date: '%Y-%m' }}">{{ e.end | date: _yf }}</time>{% else %}{{ mt_t_layouts_present }}{% endif %}{% endif %}</p>
+{%- if e.text %}<p>{{ e.text }}</p>{% endif %}
+{%- if e.highlights %}<ul>{% for h in e.highlights %}<li>{{ h }}</li>{% endfor %}</ul>{% endif %}
+</div>
+{%- endfor %}
+</section>
+{%- endif %}
+{%- if page.education %}
+<section aria-labelledby="mt-cv-edu"><h2 id="mt-cv-edu">{{ mt_t_layouts_education }}</h2>
+{%- for e in page.education %}
+<div class="mt-cv-item"><h3>{{ e.degree }}<span class="mt-cv-org">{{ e.school }}</span></h3>
+{%- if e.start or e.end %}<p class="mt-cv-when">{% if e.start %}{{ e.start | date: _yf }} – {% endif %}{% if e.end %}{{ e.end | date: _yf }}{% else %}{{ mt_t_layouts_present }}{% endif %}</p>{% endif %}
+</div>
+{%- endfor %}
+</section>
+{%- endif %}
+{%- if page.skills %}
+<section aria-labelledby="mt-cv-skills"><h2 id="mt-cv-skills">{{ mt_t_layouts_skills }}</h2>
+<dl class="mt-cv-skills">{% for s in page.skills %}<dt>{{ s.group }}</dt><dd>{{ s.items | join: ", " }}</dd>{% endfor %}</dl>
+</section>
+{%- endif %}
+</article>

data/_layouts/roadmap.html

@@ -0,0 +1,22 @@
+---
+layout: default
+mt_bundle: docs-extra
+mt_main: mt-dx mt-dx-roadmap
+---
+{%- comment -%}roadmap: items: [{title, status (now | next | later), text, url}] in three columns (Now, Next, Later), each a
+section with an h2 and a list; the body follows. Items in another status are left out (modootoday-check reports them).{%- endcomment -%}
+<article aria-labelledby="mt-dx-title">
+{%- include modootoday/docs-extra/head.html %}
+<div class="mt-dx-cols">
+{%- assign _st = "now next later" | split: " " -%}
+{%- for s in _st %}{% assign _it = page.items | where: "status", s %}{% assign _l = "layouts." | append: s %}
+<section class="mt-dx-col mt-dx-col-{{ s }}" aria-labelledby="mt-dx-{{ s }}">
+<h2 id="mt-dx-{{ s }}">{% include modootoday/t.html key=_l %} <span class="mt-dx-count">{{ _it.size }}</span></h2>
+<ul role="list">{% for i in _it %}<li><h3>{% if i.url %}<a href="{% include modootoday/link.html url=i.url %}"{% include modootoday/links/attrs.html on=i.new_window target=i.target url=i.url %}>{{ i.title }}</a>{% else %}{{ i.title }}{% endif %}</h3>{% if i.text %}<p>{{ i.text }}</p>{% endif %}</li>{% endfor %}</ul>
+</section>
+{%- endfor %}
+</div>
+<div class="mt-dx-body">
+{{ content }}
+</div>
+</article>

data/_layouts/search.html

@@ -0,0 +1,8 @@
+---
+layout: wide
+mt_main: mt-shell-wide mt-search-page
+---
+{%- comment -%}search: a full search page. The header search (search.js, already loaded) gives instant results;
+  the form below works without JavaScript through an external engine limited to this site (modootoday.search.fallback).{%- endcomment -%}
+{{ content }}
+{%- include modootoday/pages/search-form.html -%}

data/_layouts/sponsors.html

@@ -0,0 +1,7 @@
+---
+layout: directory
+mt_preset: sponsors
+mt_filter: tier
+---
+{%- comment -%}sponsors: directory preset (see directory.html).{%- endcomment -%}
+{{ content }}

data/_layouts/team.html

@@ -0,0 +1,7 @@
+---
+layout: directory
+mt_preset: team
+mt_filter: group
+---
+{%- comment -%}team: directory preset (see directory.html).{%- endcomment -%}
+{{ content }}

data/_layouts/twin.html

@@ -0,0 +1,2 @@
+{%- comment -%}md-components v1 twin: outputs the source body of page.twin_of byte-for-byte.{%- endcomment -%}
+{%- include modootoday/markdown/raw-body.html file=page.twin_of -%}

data/_layouts/wide.html

@@ -0,0 +1,7 @@
+---
+layout: default
+mt_bundle: pages
+mt_main: mt-shell-wide
+---
+{%- comment -%}wide: full chrome, no reading-width cap (dashboards of cards, tables, galleries).{%- endcomment -%}
+{{ content }}

data/_sass/modootoday/_access.scss

@@ -0,0 +1,12 @@
+// Touch targets (44px on coarse pointers, 16px inputs so iOS does not zoom) and forced colors (Windows
+// high contrast: visible borders on icon buttons and the search box). Imported after the components so these overrides win at equal specificity and in @layer mode.
+@include mt-layer(components) {
+  @media (pointer: coarse) {
+    .mt-site-title, .mt-lang a, .mt-nav a, .mt-nav summary, .mt-menu a, .mt-menu summary, [role="tab"], .mt-code-copy, .mt-pagination a, .mt-accordion-trigger { min-height: 2.75rem; }
+    .mt-theme-toggle, .mt-lang > summary { width: 2.75rem; height: 2.75rem; }
+    .mt-code pre, pre.mt-code { padding-top: 3.6rem; }
+  }
+  @media (forced-colors: active) {
+    .mt-theme-toggle, .mt-lang > summary, .mt-code-copy { border: 1px solid ButtonText; }
+  }
+}

data/_sass/modootoday/_core.scss

@@ -0,0 +1,18 @@
+// Core: settings → tools → tokens → base → layout. Components are imported separately
+// (assets/css/modootoday.scss picks them from modootoday.components; _sass/modootoday.scss imports all).
+@import "settings";
+@import "tools/functions";
+@import "tools/mixins";
+@import "tokens/primitive";
+@import "tokens/semantic";
+@if $mt-css-layers { @layer mt.tokens, mt.base, mt.layout, mt.components; }
+@import "tokens/emit";
+@import "base/reset";
+@import "base/prose";
+@import "base/code";
+@import "base/table";
+@import "base/bidi";
+@import "base/interaction";
+@import "layout/shell";
+@import "layout/safe-area";
+@import "layout/page-meta";

data/_sass/modootoday/_settings.scss

@@ -0,0 +1,5 @@
+// Settings (all !default). Sass syntax limited to the Ruby Sass 3.7 ∩ Dart Sass subset:
+// @import, maps, map-get/map-merge, @each, @mixin/@include, @function, !default, #{} — never @use/@forward.
+$mt-css-layers: false !default;      // true: wrap output in @layer mt.* (site CSS outside layers always wins)
+$mt-overrides: () !default;          // partial semantic overrides, light: (primary: #c2410c)
+$mt-overrides-dark: () !default;     // partial semantic overrides, dark

data/_sass/modootoday/_sheet.scss

@@ -0,0 +1,6 @@
+// Head of every optional sheet (assets/css/modootoday/**): settings and tools only, no output
+// except the layer order, so a sheet adds just its component rules on top of the core sheet.
+@import "settings";
+@import "tools/functions";
+@import "tools/mixins";
+@if $mt-css-layers { @layer mt.tokens, mt.base, mt.layout, mt.components; }

data/_sass/modootoday/base/_bidi.scss

@@ -0,0 +1,8 @@
+// Right-to-left: components use logical properties (inline-start/end), so dir="rtl" mirrors them.
+// Code and key combinations stay left-to-right inside RTL text (the copy button stays on the right of
+// the code); inline code is isolated so punctuation does not jump.
+@include mt-layer(base) {
+  pre, .highlight { direction: ltr; text-align: left; }
+  :not(pre) > code, kbd { unicode-bidi: isolate; }
+  .mt-kbd, div.highlighter-rouge, figure.highlight { direction: ltr; }
+}

data/_sass/modootoday/base/_code.scss

@@ -0,0 +1,18 @@
+@include mt-layer(base) {
+  code, pre, kbd { font-family: mt(font-mono); }
+  :not(pre) > code { font-size: .875em; background: mt(muted); border: 1px solid mt(border); padding: .1em .35em; border-radius: var(--mt-p-radius-sm); }
+  pre { font-size: .875rem; line-height: 1.6; background: mt(muted); border: 1px solid mt(border); border-radius: mt(radius-lg);
+    padding: 1rem 1.25rem; margin: 0 0 1.25rem; overflow-x: auto; tab-size: 2; }
+  pre code { font-size: inherit; }
+  div.highlighter-rouge, figure.highlight { margin: 0 0 1.25rem; }
+  div.highlighter-rouge pre, figure.highlight pre { margin: 0; }
+  // Rouge token colors (kramdown syntax_highlighter: rouge), from --mt-code-* tokens.
+  // :is() keeps each token list short; same specificity as .highlight .x.
+  .highlight :is(.c, .c1, .cm, .cs, .cp, .cd) { color: mt(code-comment); font-style: italic; }
+  .highlight :is(.k, .kd, .kn, .kp, .kr, .kt, .kc, .ow, .nt) { color: mt(code-keyword); }
+  .highlight :is(.s, .s1, .s2, .sb, .sc, .sd, .se, .sh, .si, .sx, .sr, .ss), .highlight .na + .s { color: mt(code-string); }
+  .highlight :is(.m, .mi, .mf, .mh, .mo, .il, .no, .bp, .vc, .vg, .vi, .na, .py) { color: mt(code-constant); }
+  .highlight :is(.nf, .fm, .nc, .nn, .nb, .nd, .ne) { color: mt(code-function); }
+  .highlight :is(.gd, .err) { color: mt(caution); }
+  .highlight .gi { color: mt(tip); }
+}

data/_sass/modootoday/base/_interaction.scss

@@ -0,0 +1,6 @@
+// Keyboard and touch basics: the focused <main> after the skip link, rings inside scroll regions.
+// Overrides of component sizes (touch targets, forced colors) live in modootoday/_access.scss.
+@include mt-layer(base) {
+  .mt-main:focus { outline: none; }
+  [tabindex="0"]:focus-visible { outline-offset: -2px; } // tabs, panels, scroll regions: ring inside the box
+}

data/_sass/modootoday/base/_prose.scss

@@ -0,0 +1,32 @@
+@include mt-layer(base) {
+  a { color: mt(primary); text-decoration-thickness: 1px; text-underline-offset: .2em; }
+  a:hover { text-decoration-thickness: 2px; }
+  h1, h2, h3, h4 { line-height: 1.25; margin: 2.2em 0 .6em; font-weight: 650; letter-spacing: -.015em; scroll-margin-top: calc(#{mt(header-height)} + 1rem); }
+  h1 { font-size: 2.25rem; line-height: 1.15; letter-spacing: -.025em; margin-top: 0; }
+  h2 { font-size: 1.5rem; letter-spacing: -.02em; }
+  h3 { font-size: 1.15rem; }
+  h4 { font-size: 1rem; }
+  p, ul, ol, dl { margin: 0 0 1em; }
+  :where(:not([class])) > li + li { margin-top: .3em; } // flow lists only: classed grid/flex lists keep item 1 aligned
+  li > ul, li > ol { margin: .3em 0 0; }
+  blockquote { margin: 1.25rem 0; padding: .25rem 1rem; color: mt(muted-foreground); border-inline-start: 3px solid mt(border); }
+  blockquote > :last-child { margin-bottom: 0; }
+  :lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
+  hr { border: 0; border-top: 1px solid mt(border); margin: 2.5rem 0; }
+  strong { font-weight: 650; }
+  // Section rhythm in documents: a hairline above each h2 (except the first) separates dense pages like the kitchen sink.
+  .mt-doc h2 { margin-top: 3.25rem; padding-top: 2rem; border-top: 1px solid mt(border); }
+  .mt-doc > h1 + h2, .mt-doc > h2:first-child, .mt-hero + h2 { margin-top: 2.5rem; padding-top: 0; border-top: 0; }
+  .mt-doc .mt-section > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
+  .mt-doc .mt-section + .mt-section:not(.mt-cta) { margin-top: 3.25rem; padding-top: 2rem; border-top: 1px solid mt(border); }
+  .mt-doc h3 { margin-top: 2em; }
+  li.task-list-item { list-style: none; }
+  li.task-list-item > input { margin: 0 .5em 0 -1.4em; vertical-align: -.1em; accent-color: mt(primary); }
+  @media (max-width: 40rem) { h1 { font-size: 1.85rem; } h2 { font-size: 1.3rem; } }
+}
+@include mt-layer(base) {
+  // Footnotes (kramdown div.footnotes): small, start-aligned, set off by a hairline; modootoday/markdown/sections.html moves them after the last section.
+  .footnotes { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid mt(border); font-size: .875rem; color: mt(muted-foreground); text-align: start; }
+  .footnotes ol { margin: 0; padding-inline-start: 1.25rem; }
+  .mt-endnotes .footnotes { margin-top: 3rem; }
+}

data/_sass/modootoday/base/_reset.scss

@@ -0,0 +1,14 @@
+@include mt-layer(base) {
+  *, *::before, *::after { box-sizing: border-box; }
+  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(#{mt(header-height)} + var(--mt-safe-top) + 1rem); }
+  body.mt-body {
+    margin: 0; background: mt(background); color: mt(foreground);
+    font-family: mt(font-sans); font-size: mt(font-size); line-height: mt(line-height);
+    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
+    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
+  }
+  img { max-width: 100%; height: auto; }
+  ::selection { background: color-mix(in srgb, #{mt(primary)} 22%, transparent); }
+  :focus-visible { outline: 2px solid mt(ring); outline-offset: 2px; border-radius: 2px; }
+  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
+}

data/_sass/modootoday/base/_table.scss

@@ -0,0 +1,8 @@
+// Tables scroll horizontally (scroll area) instead of overflowing the measure.
+@include mt-layer(base) {
+  table { display: block; max-width: 100%; width: max-content; overflow-x: auto; margin: 0 0 1.25rem; font-size: .9375rem;
+    border-collapse: separate; border-spacing: 0; border: 1px solid mt(border); border-radius: mt(radius-lg); }
+  th, td { padding: .6rem .9rem; border-bottom: 1px solid mt(border); vertical-align: top; }
+  tr:last-child > td { border-bottom: 0; }
+  th { white-space: nowrap; background: mt(muted); text-align: start; font-weight: 600; font-size: .875rem; }
+}

data/_sass/modootoday/blog/_article.scss

@@ -0,0 +1,27 @@
+// Post header (deck, byline, cover), series box, share, related posts.
+@include mt-layer(components) {
+  .mt-post-header { margin-block-end: 2rem; }
+  .mt-post-deck { margin: 0 0 1rem; font-size: 1.1875rem; line-height: 1.55; color: mt(muted-foreground); }
+  .mt-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; font-size: .875rem; color: mt(muted-foreground); }
+  .mt-byline p { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0; }
+  .mt-byline a { color: mt(foreground); font-weight: 600; }
+  .mt-dateline { color: mt(foreground); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
+  .mt-post-cover { margin: 1.5rem 0 0; }
+  .mt-post-cover img { display: block; inline-size: 100%; block-size: auto; border-radius: mt(radius-lg); }
+  .mt-post-cover figcaption { margin-block-start: .5rem; font-size: .8125rem; color: mt(muted-foreground); }
+  .mt-post-flags { margin: 0 0 .75rem; }
+  .mt-series { margin-block: 1.5rem; padding: 1rem 1.25rem; border: 1px solid mt(border); border-inline-start: 3px solid mt(primary); border-radius: mt(radius); background: mt(muted); }
+  .mt-series-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin: 0 0 .5rem; }
+  .mt-series-title span { color: mt(muted-foreground); font-size: .875rem; }
+  .mt-series ol { margin: 0; padding-inline-start: 1.25rem; }
+  .mt-series [aria-current] { font-weight: 600; }
+  .mt-share { margin-block: 2rem 0; }
+  .mt-share-button { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; padding: .5rem 1rem; border: 1px solid mt(border); border-radius: 999px;
+    background: mt(background); color: mt(foreground); font: inherit; font-size: .875rem; cursor: pointer; }
+  .mt-share-button:hover { background: mt(accent); }
+  .mt-share-button:focus-visible { outline: 2px solid mt(ring); outline-offset: 2px; }
+  .mt-share-button[data-state="copied"] { border-color: mt(tip); color: mt(tip); }
+  .mt-related { margin-block-start: 3rem; padding-block-start: 1.5rem; border-block-start: 1px solid mt(border); }
+  .mt-related h2 { margin: 0; font-size: 1.25rem; }
+  .mt-post-nav { margin-block-start: 2rem; }
+}

data/_sass/modootoday/blog/_cards.scss

@@ -0,0 +1,36 @@
+// Post cards and lists: list | grid | magazine. Logical properties (RTL-safe); the card is one link target (title).
+@include mt-layer(components) {
+  .mt-blog, .mt-news { max-inline-size: mt(container); margin-inline: auto; }
+  .mt-post-list { display: grid; gap: 1.25rem; margin-block: 1.5rem; }
+  .mt-post-list[data-variant="grid"], .mt-post-list[data-variant="magazine"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
+  .mt-card-post { position: relative; display: flex; flex-direction: column; min-inline-size: 0; border: 1px solid mt(border); border-radius: mt(radius-lg);
+    background: mt(card); color: mt(card-foreground); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
+  .mt-card-post:hover, .mt-card-post:focus-within { border-color: color-mix(in srgb, #{mt(primary)} 40%, #{mt(border)}); box-shadow: mt(shadow); }
+  .mt-card-post-body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.25rem 1.25rem; }
+  .mt-card-post-cover img { display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: mt(muted); }
+  .mt-card-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: 0; font-size: .8125rem; color: mt(muted-foreground); }
+  .mt-card-post-kicker { color: mt(primary); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
+  .mt-card-post-title { margin: 0; font-size: 1.125rem; line-height: 1.35; overflow-wrap: anywhere; }
+  .mt-card-post-title a { color: inherit; text-decoration: none; }
+  .mt-card-post-title a::after { content: ""; position: absolute; inset: 0; }
+  .mt-card-post-title a:focus-visible { outline: none; }
+  .mt-card-post:has(.mt-card-post-title a:focus-visible) { outline: 2px solid mt(ring); outline-offset: 2px; }
+  .mt-card-post-excerpt { margin: 0; color: mt(muted-foreground); font-size: .9375rem; line-height: 1.6; }
+  .mt-post-list[data-variant="list"] .mt-card-post-cover { display: none; }
+  .mt-card-post-featured .mt-card-post-title { font-size: 1.5rem; }
+  @media (min-width: 48rem) {
+    .mt-post-list[data-variant="list"] > .mt-card-post:has(.mt-card-post-cover) { flex-direction: row; }
+    .mt-post-list[data-variant="list"] .mt-card-post-cover { display: block; flex: 0 0 14rem; }
+    .mt-post-list[data-variant="list"] .mt-card-post-cover img { block-size: 100%; aspect-ratio: auto; }
+    .mt-post-list[data-variant="magazine"] > .mt-card-post-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 2fr; }
+    .mt-post-list[data-variant="magazine"] > .mt-card-post-featured .mt-card-post-body { justify-content: center; padding: 1.5rem 2rem; }
+    .mt-card-post-featured .mt-card-post-title { font-size: 1.875rem; }
+  }
+  .mt-badge[data-variant="featured"] { background: mt(primary); color: mt(primary-foreground); }
+  .mt-pager { justify-content: space-between; align-items: center; }
+  .mt-pager-count { color: mt(muted-foreground); font-size: .875rem; }
+  .mt-avatar { border-radius: 50%; vertical-align: middle; object-fit: cover; }
+  .mt-author-card { display: flex; gap: 1rem; align-items: center; margin-block: 1rem 2rem; }
+  .mt-author-card h1 { margin: 0; }
+  .mt-author-card p { margin: .25rem 0 0; color: mt(muted-foreground); }
+}

data/_sass/modootoday/blog/_index.scss

@@ -0,0 +1,10 @@
+// Blog and news partials (separate bundle). Uses the core tokens (--mt-*) already on the page; emits no tokens.
+@import "../settings";
+@import "../tools/functions";
+@import "../tools/mixins";
+@import "post";
+@import "cards";
+@import "article";
+@import "news";
+@import "../tools/img-dark";
+@include mt-img-dark('.mt-main img:not([src$=".svg"])');

data/_sass/modootoday/blog/_news.scss

@@ -0,0 +1,26 @@
+// News front page (lead, secondary grid, latest, sections), breaking/live badges, correction, sources.
+@include mt-layer(components) {
+  .mt-news-masthead { margin-block-end: 1.5rem; padding-block-end: 1rem; border-block-end: 3px double mt(border); }
+  .mt-news-top { display: grid; gap: 1.25rem; }
+  .mt-news-top .mt-post-list { margin: 0; }
+  .mt-news-lead .mt-card-post-title { font-size: 1.75rem; }
+  @media (min-width: 64rem) {
+    .mt-news-top { grid-template-columns: 3fr 2fr; align-items: start; }
+    .mt-news-secondary .mt-post-list { grid-template-columns: 1fr 1fr; }
+    .mt-news-lead .mt-card-post-title { font-size: 2.25rem; }
+  }
+  .mt-news-latest, .mt-news-section { margin-block-start: 2.5rem; }
+  .mt-news-latest > h2, .mt-news-section > h2 { margin: 0; padding-block-end: .5rem; border-block-end: 2px solid mt(foreground); font-size: 1.125rem; text-transform: uppercase; letter-spacing: .04em; }
+  .mt-news-latest .mt-post-list { gap: 0; }
+  .mt-news-latest .mt-card-post { border: 0; border-block-end: 1px solid mt(border); border-radius: 0; background: none; }
+  .mt-news-latest .mt-card-post-body { padding-inline: 0; }
+  .mt-news-more { margin: 0; text-align: end; font-weight: 600; }
+  .mt-badge-breaking { background: mt(caution); color: mt(primary-foreground); font-weight: 700; text-transform: uppercase; }
+  .mt-badge-live { display: inline-flex; align-items: center; gap: .375rem; border: 1px solid mt(caution); color: mt(caution); font-weight: 700; text-transform: uppercase; }
+  .mt-live-dot { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: currentColor; animation: mt-live 1.5s ease-in-out infinite; }
+  @keyframes mt-live { 50% { opacity: .3; } }
+  @media (prefers-reduced-motion: reduce) { .mt-live-dot { animation: none; } }
+  .mt-news-sources { margin-block-start: 2rem; font-size: .9375rem; }
+  .mt-news-sources h2 { font-size: 1rem; }
+  .mt-news-credits { color: mt(muted-foreground); font-size: .875rem; }
+}

data/_sass/modootoday/blog/_post.scss

@@ -0,0 +1,9 @@
+// Post meta line, post footer term links and the archive (blog bundle: post, news-article and archive layouts). Logical properties (RTL-safe); term links reuse .mt-badge-tag.
+@include mt-layer(components) {
+  .mt-post-meta, .mt-post-terms p, .mt-archive-index ul { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; align-items: center; }
+  .mt-archive-index li { display: flex; margin: 0; }
+  .mt-post-meta, .mt-post-terms span, .mt-archive-count, .mt-archive-list time { color: mt(muted-foreground); }
+  .mt-post-terms { margin-block-start: 2rem; border-block-start: 1px solid mt(border); }
+  .mt-badge[href] { min-block-size: 24px; }
+  .mt-archive-list { list-style: none; padding: 0; }
+}

data/_sass/modootoday/components/core/chrome/_banner.scss

@@ -0,0 +1,7 @@
+// Announcement banner (modootoday.banner) above the header, and the back-to-top link in the page footer.
+@include mt-layer(components) {
+  .mt-banner { padding: .5rem 1rem; background: mt(primary); color: mt(primary-foreground); text-align: center; font-size: .875rem; }
+  .mt-banner p { margin: 0; }
+  .mt-banner a { color: inherit; font-weight: 600; text-underline-offset: 2px; }
+  .mt-back-to-top { display: inline-flex; align-items: center; min-height: 24px; margin-block: 2rem 0; color: mt(muted-foreground); font-size: .875rem; }
+}

data/_sass/modootoday/components/core/chrome/_breadcrumb.scss

@@ -0,0 +1,10 @@
+// Breadcrumb generated from the page URL (layout only, no Markdown).
+@include mt-layer(components) {
+  .mt-breadcrumb ol { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .8125rem; }
+  .mt-breadcrumb li + li { margin-top: 0; }
+  .mt-breadcrumb li { display: inline-flex; align-items: center; gap: .35rem; }
+  .mt-breadcrumb .mt-icon { color: mt(muted-foreground); }
+  .mt-breadcrumb a { color: mt(muted-foreground); text-decoration: none; }
+  .mt-breadcrumb a:hover { color: mt(foreground); text-decoration: underline; }
+  .mt-breadcrumb [aria-current="page"] { color: mt(foreground); font-weight: 500; }
+}

data/_sass/modootoday/components/core/chrome/_nav.scss

@@ -0,0 +1,39 @@
+// Header navigation from _data/nav/<modootoday.nav>.yml (or _data/nav.yml). Scrolls sideways on small screens.
+// Groups (items with `items:`) open as a <details> menu from 64rem; below that their links are listed inline.
+@include mt-layer(components) {
+  .mt-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
+  // Below 64rem the row scrolls sideways: fade the inline end so cut-off items read as "more".
+  .mt-nav { mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
+  [dir="rtl"] .mt-nav { mask-image: linear-gradient(to left, #000 calc(100% - 2rem), transparent); }
+  .mt-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .125rem; }
+  .mt-nav li + li { margin-top: 0; }
+  .mt-nav a, .mt-nav summary, .mt-menu a, .mt-menu summary { display: flex; align-items: center; min-height: 2rem; padding: .35rem .6rem; border-radius: mt(radius); font-size: .9rem; font-weight: 500;
+    color: mt(muted-foreground); text-decoration: none; white-space: nowrap; transition: color .15s, background-color .15s; }
+  .mt-nav a:hover, .mt-nav summary:hover, .mt-menu a:hover, .mt-menu[open] > summary { color: mt(foreground); background: mt(accent); }
+  .mt-nav a[aria-current="page"], .mt-nav .mt-nav-current, .mt-menu a[aria-current] { color: mt(foreground); background: mt(accent); font-weight: 600; }
+  .mt-nav-group { display: none; position: relative; }
+  .mt-menu summary { cursor: pointer; list-style: none; }
+  .mt-menu summary::-webkit-details-marker { display: none; }
+  .mt-nav summary > .mt-icon { margin-inline-start: .3em; }
+  .mt-nav a > .mt-icon { margin-inline-start: .25em; opacity: .7; }
+  .mt-nav a:focus-visible, .mt-menu a:focus-visible, .mt-menu summary:focus-visible { outline-offset: -2px; } // inside the box: the nav row scrolls
+  .mt-menu > ul { list-style: none; margin: 0; position: absolute; top: calc(100% + .4rem); inset-inline-start: 0; z-index: 30; display: block; min-width: 12rem; padding: .35rem;
+    background: mt(card); border: 1px solid mt(border); border-radius: mt(radius-lg); box-shadow: mt(shadow);
+    max-height: calc(100dvh - #{mt(header-height)} - var(--mt-safe-top) - 1rem); overflow-y: auto; overscroll-behavior: contain; }
+  .mt-menu a { color: mt(card-foreground); }
+  details.mt-lang > ul { inset-inline: auto 0; min-width: 10rem; }
+  @media (min-width: 64rem) {
+    .mt-nav, [dir="rtl"] .mt-nav { overflow: visible; flex: none; mask-image: none; }
+    .mt-nav-group { display: block; }
+    .mt-nav-flat { display: none; }
+  }
+  @media (max-width: 63.99rem) {
+    .mt-header-inner { flex-wrap: wrap; padding-top: .6rem; }
+    .mt-nav { order: 10; flex: 1 0 100%; min-width: 0; padding: 0 0 .4rem; overflow-x: auto; scrollbar-width: none; }
+    .mt-nav::-webkit-scrollbar { display: none; }
+    .mt-nav a { padding: .3rem .6rem; }
+  }
+}
+@include mt-layer(components) {
+  @media (min-width: 64rem) and (max-width: 79.99rem) { .mt-nav a, .mt-nav summary { padding-inline: .45rem; font-size: .875rem; } }
+}

data/_sass/modootoday/components/core/chrome/_pagination.scss

@@ -0,0 +1,10 @@
+// Previous / next links in nav order.
+@include mt-layer(components) {
+  .mt-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid mt(border); }
+  .mt-pagination a { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; padding: .9rem 1.1rem; font-weight: 600;
+    border: 1px solid mt(border); border-radius: mt(radius-lg); transition: border-color .15s, box-shadow .15s; }
+  .mt-pagination a:hover { border-color: mt(primary); box-shadow: mt(shadow-sm); }
+  .mt-pagination [rel="next"] { grid-column: 2; text-align: end; }
+  .mt-pagination [rel="next"] small { justify-content: flex-end; }
+  .mt-pagination small { display: inline-flex; align-items: center; gap: .3rem; color: mt(muted-foreground); font-weight: 500; font-size: .8125rem; }
+}

data/_sass/modootoday/components/core/chrome/_theme-toggle.scss

@@ -0,0 +1,16 @@
+// Light/dark toggle button (assets/js/modootoday/theme-toggle.js). Shown from the first paint when scripting is on
+// (no header jump when the deferred script runs); the icon follows the scheme in CSS, not aria-pressed.
+@include mt-layer(components) {
+  // Icon button: a moon while light, a sun while dark; the name is the aria-label.
+  .mt-theme-toggle { flex: none; display: grid; place-items: center; cursor: pointer; width: 2.25rem; height: 2.25rem; padding: 0;
+    border: 1px solid mt(border); border-radius: mt(radius); background: mt(background); color: mt(foreground); }
+  .mt-theme-toggle .mt-icon-sun, .mt-theme-toggle[hidden] { display: none; }
+  @media (scripting: enabled) { .mt-theme-toggle[hidden] { display: grid; } }
+  :root[data-theme="dark"] .mt-theme-toggle .mt-icon-sun { display: block; }
+  :root[data-theme="dark"] .mt-theme-toggle .mt-icon-moon { display: none; }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .mt-theme-toggle .mt-icon-sun { display: block; }
+    :root:not([data-theme="light"]) .mt-theme-toggle .mt-icon-moon { display: none; }
+  }
+  .mt-theme-toggle:hover { background: mt(accent); }
+}

data/_sass/modootoday/components/core/inline/_badge.scss

@@ -0,0 +1,15 @@
+// Status badge: span.mt-badge.mt-badge-<available|partial|planned>
+$mt-badge-variants: (available: status-available, partial: status-partial, planned: status-planned) !default;
+@include mt-layer(components) {
+  .mt-badge { --mt-badge-color: #{mt(status-planned)}; --mt-badge-radius: var(--mt-p-radius-full);
+    display: inline-flex; gap: .3em; align-items: center; vertical-align: .1em; font-size: .75rem; line-height: 1.5; font-weight: 600; padding: 0 .55em;
+    border: 1px solid color-mix(in srgb, var(--mt-badge-color) 35%, transparent); border-radius: var(--mt-badge-radius); color: color-mix(in srgb, var(--mt-badge-color) 78%, #{mt(foreground)});
+    background: color-mix(in srgb, var(--mt-badge-color) 9%, transparent); white-space: nowrap; }
+  @each $name, $token in $mt-badge-variants {
+    .mt-badge-#{$name} { --mt-badge-color: #{mt($token)}; }
+  }
+}
+// `tag:<word>` badges
+@include mt-layer(components) {
+  .mt-badge-tag { --mt-badge-color: #{mt(primary)}; --mt-badge-radius: #{mt(radius)}; }
+}

data/_sass/modootoday/components/core/inline/_callout.scss

@@ -0,0 +1,14 @@
+// Callout (GitHub alert): blockquote.mt-callout.mt-callout-<type> [data-variant]
+$mt-callout-variants: (note: note, tip: tip, important: important, warning: warning, caution: caution) !default;
+@include mt-layer(components) {
+  .mt-callout { --mt-callout-accent: #{mt(note)}; color: mt(foreground); padding: .85rem 1.1rem; margin: 1.25rem 0;
+    border: 1px solid color-mix(in srgb, var(--mt-callout-accent) 28%, #{mt(border)}); border-inline-start: 4px solid var(--mt-callout-accent);
+    border-radius: mt(radius); background: color-mix(in srgb, var(--mt-callout-accent) 6%, #{mt(background)}); }
+  .mt-callout > p:empty { display: none; }
+  .mt-callout > :last-child { margin-bottom: 0; }
+  .mt-callout-title { display: flex; align-items: center; gap: .4rem; color: var(--mt-callout-accent); font-weight: 650; font-size: .875rem; letter-spacing: .01em; margin: 0 0 .3rem; }
+  .mt-callout pre { background: mt(background); }
+  @each $name, $token in $mt-callout-variants {
+    .mt-callout-#{$name} { --mt-callout-accent: #{mt($token)}; }
+  }
+}

data/_sass/modootoday/components/core/inline/_code-copy.scss

@@ -0,0 +1,11 @@
+// Copy button on code blocks (assets/js/modootoday/code-copy.js).
+@include mt-layer(components) {
+  .mt-code { position: relative; }
+  .mt-code-copy { position: absolute; top: .5rem; inset-inline-end: .5rem; font: inherit; font-size: .75rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; min-height: 1.75rem;
+    padding: .2rem .55rem; border-radius: var(--mt-p-radius-sm); border: 1px solid mt(border);
+    background: mt(background); color: mt(muted-foreground); transition: color .15s; }
+  .mt-code-copy:hover, .mt-code-copy:focus-visible { color: mt(foreground); }
+  // Narrow screens: start the code below the button so it never covers the first line of a scrolling block.
+  // Reserved whenever scripting is on, before code-copy.js adds the button, so nothing moves after load.
+  @media (max-width: 47.99rem) and (scripting: enabled) { .mt-main pre { padding-top: 2.6rem; } }
+}

data/_sass/modootoday/components/core/inline/_code.scss

@@ -0,0 +1,11 @@
+// Code titles and diffs: `file:<name>` alone in a paragraph right before a fenced block becomes the block's title bar;
+// ```diff blocks tint added and removed lines while keeping the +/- signs (colour is never the only cue).
+@include mt-layer(components) {
+  .mt-code { margin: 0 0 1.25rem; }
+  .mt-code-title { margin: 0; padding: .4rem .9rem; border: 1px solid mt(border); border-bottom: 0; border-radius: mt(radius-lg) mt(radius-lg) 0 0;
+    background: mt(background); color: mt(muted-foreground); font: .8125rem/1.5 mt(font-mono); }
+  .mt-code-title + div.highlighter-rouge pre { border-start-start-radius: 0; border-start-end-radius: 0; }
+  .language-diff .gi, .language-diff .gd { display: inline-block; min-width: 100%; }
+  .language-diff .gi { background: color-mix(in srgb, #{mt(tip)} 16%, transparent); color: mt(foreground); }
+  .language-diff .gd { background: color-mix(in srgb, #{mt(caution)} 16%, transparent); color: mt(foreground); }
+}

data/_sass/modootoday/components/core/inline/_cta.scss

@@ -0,0 +1,11 @@
+// CTA buttons: paragraphs that hold only links (p.mt-actions, marked in Liquid) in the hero and in c: cta sections.
+@include mt-layer(components) {
+  .mt-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }
+  .mt-actions > a { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1.25rem; border-radius: mt(radius);
+    border: 1px solid mt(border); background: mt(background); color: mt(foreground); box-shadow: mt(shadow-sm);
+    font-size: .9375rem; font-weight: 600; text-decoration: none; transition: background-color .15s, border-color .15s, transform .15s; }
+  .mt-actions > a:hover { background: mt(accent); }
+  .mt-actions > a:first-child { background: mt(primary); border-color: mt(primary); color: mt(primary-foreground); }
+  .mt-actions > a:first-child:hover { background: color-mix(in srgb, #{mt(primary)} 88%, #{mt(foreground)}); }
+  .mt-actions > a:active { transform: translateY(1px); }
+}

data/_sass/modootoday/components/core/inline/_embed.scss

@@ -0,0 +1,6 @@
+// Responsive embed: `embed:https://...` alone in a paragraph → a titled, lazy 16:9 iframe.
+@include mt-layer(components) {
+  .mt-embed { position: relative; margin: 1.5rem 0; aspect-ratio: 16 / 9; border: 1px solid mt(border); border-radius: mt(radius-lg); overflow: hidden; background: mt(muted); }
+  .mt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
+  .mt-embed iframe:focus { outline: 2px solid mt(ring); outline-offset: -2px; }
+}

data/_sass/modootoday/components/core/inline/_figure.scss

@@ -0,0 +1,9 @@
+// Figure: an image alone in a paragraph followed by a paragraph that is only *emphasis* → figure + figcaption.
+@include mt-layer(components) {
+  .mt-figure { margin: 1.5rem 0; }
+  .mt-figure img { display: block; border-radius: mt(radius-lg); border: 1px solid mt(border); }
+  // Dim images a little in dark mode so a light screenshot does not glare.
+  :root[data-theme="dark"] .mt-figure img { filter: brightness(.85); }
+  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mt-figure img { filter: brightness(.85); } }
+  .mt-figure figcaption { margin-top: .6rem; color: mt(muted-foreground); font-size: .875rem; text-align: center; }
+}

data/_sass/modootoday/components/core/inline/_footnotes.scss

@@ -0,0 +1,6 @@
+// Footnotes (kramdown [^1]): compact reference marks and back-links that stay a 24px target.
+@include mt-layer(components) {
+  sup[role="doc-noteref"] a { padding: 0 .15em; text-decoration: none; font-weight: 600; }
+  .footnotes li:target { background: mt(muted); border-radius: mt(radius); }
+  .reversefootnote { display: inline-block; min-width: 24px; text-align: center; text-decoration: none; }
+}

data/_sass/modootoday/components/core/inline/_hero.scss

@@ -0,0 +1,8 @@
+// Hero: everything before the first ## when sections: is set.
+@include mt-layer(components) {
+  .mt-hero { position: relative; padding: 2rem 0 1rem; }
+  .mt-hero h1 { font-size: unquote("clamp(2.25rem, 1.5rem + 3vw, 3.5rem)"); line-height: 1.08; letter-spacing: -.035em; font-weight: 750; margin-bottom: 1.25rem; }
+  .mt-hero > p:first-of-type { font-size: 1.2rem; line-height: 1.6; color: mt(muted-foreground); max-width: 40rem; }
+  .mt-section { padding: mt(space-section) 0 0; }
+  .mt-section > h2:first-child { margin-top: 0; }
+}

data/_sass/modootoday/components/core/inline/_kbd.scss

@@ -0,0 +1,6 @@
+// Keyboard keys: `kbd:Ctrl+K` -> kbd.mt-kbd > kbd + kbd
+@include mt-layer(components) {
+  .mt-kbd { white-space: nowrap; font: inherit; }
+  .mt-kbd kbd { font-family: mt(font-mono); font-size: .8em; padding: .1em .45em; border: 1px solid mt(border);
+    border-bottom-width: 2px; border-radius: var(--mt-p-radius-sm); background: mt(muted); box-shadow: mt(shadow-sm); color: mt(foreground); }
+}