feat(styles): match lecture content typography to the existing builds

CHANGELOG.md

@@ -20,7 +20,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+- The site footer part (`site.parts.footer`) and the back-to-top button are
+  styled to match the Sphinx lecture builds, with every value measured off
+  python-programming.quantecon.org: 14.4px footer text at 70% opacity with an
+  inline licence badge and 36px clearance above the rule and below the last
+  line, and a `↑ Top` pill in QuantEcon blue (with `aria-label="Back to top"`
+  kept for screen readers). The footer content column now matches the width of
+  its own rule, and footer links get a readable colour in dark mode ([#155](https://github.com/QuantEcon/quantecon-theme.mystmd/pull/155)).
+
+### Changed
+- Lecture content typography now follows the Sphinx builds, via a dedicated
+  `styles/quantecon.css` imported after `@myst-theme/styles` so nothing upstream
+  is forked: paragraph, list and figure rhythm in `em`, inline literals in the
+  Sphinx colour (`--qe-literal-color`, with the Sphinx dark-mode value under
+  `.dark`) at a root-relative size and in the monospace stack, and the `.auto`
+  and `.terminal` figure-sizing classes lecture sources already use. The file's
+  header documents how each rule outranks the typography plugin without
+  `!important` ([#155](https://github.com/QuantEcon/quantecon-theme.mystmd/pull/155)).
+- A metric-matched `Source Sans 3 Fallback` face (local Helvetica/Arial with
+  `size-adjust` and ascent/descent overrides) is declared in the critical CSS
+  and appended to the `sans` stack, so the swap to the self-hosted webfont no
+  longer reflows the page: measured text width moves from about 8% off target
+  to under 0.5% while the woff2 is still loading ([#155](https://github.com/QuantEcon/quantecon-theme.mystmd/pull/155)).
+
 ### Fixed
+- Inline code no longer renders wrapped in literal backticks.
+  `tailwind.config.js` spread `themeExtensions.typography` into an object, but
+  upstream exports it as a function, so the spread yielded `{}` and silently
+  dropped every upstream typography setting, including the rule that removes
+  the plugin's `::before`/`::after` backticks. The key is gone and the project
+  values it carried live in `styles/quantecon.css` ([#155](https://github.com/QuantEcon/quantecon-theme.mystmd/pull/155)).
 - The remaining absolute asset URLs in the built stylesheets are now relative
   too. [#139](https://github.com/QuantEcon/quantecon-theme.mystmd/pull/139)
   rewrote the stylesheets in `_assets/`, but Remix also emits route and

app/components/Outline.tsx

@@ -11,14 +11,21 @@ export function BackToTop() {
       <div className="relative col-margin">
         <p
           className={classNames(
-            'absolute bottom-0 font-semibold text-md z-[1000] transition-opacity ease-in-out duration-300',
+            'qe-back-to-top absolute bottom-0 font-semibold text-md z-[1000] transition-opacity ease-in-out duration-300',
             {
               'opacity-100': isScrolled,
               'opacity-0': !isScrolled,
             }
           )}
         >
-          <Link to="#top">Back to top</Link>
+          {/* Label matches the Sphinx build's back-to-top button exactly:
+              U+2191 + space + "Top". `aria-label` is deliberately kept -- the
+              Sphinx original leans on `title` alone, which screen readers
+              announce inconsistently, so the visible label can shorten without
+              the accessible name going with it. */}
+          <Link to="#top" title="Back to top" aria-label="Back to top">
+            ↑ Top
+          </Link>
         </p>
       </div>
     </div>

app/components/SiteFooter.tsx

@@ -8,12 +8,15 @@ export function SiteFooter({ content, className }: { content: GenericParent; cla
   return (
     <div
       className={classNames(
-        'col-screen text-qetext-light text-opacity-80 dark:text-qetext-dark-muted subgrid-gap',
+        'qe-site-footer col-screen text-qetext-light text-opacity-80 dark:text-qetext-dark-muted subgrid-gap',
         grid
       )}
     >
       <div className="border-t-[5px] border-t-qeborder-blue col-body mb-5" />
-      <MyST ast={content} className="col-screen" />
+      {/* col-body, not col-screen: the Sphinx footer is content-column width, and
+          the 5px rule above is already col-body -- col-screen here left the text
+          running wider than its own rule. */}
+      <MyST ast={content} className="col-body" />
     </div>
   );
 }

app/root.tsx

@@ -68,7 +68,15 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
  *                    and are NOT available at this first paint. The
  *                    `sans-serif` tail is what renders here and the webfont
  *                    swaps in once that stylesheet lands — as it did with the
- *                    Google Fonts @import this replaced.
+ *                    Google Fonts @import this replaced. The metric-matched
+ *                    "Source Sans 3 Fallback" face sits just before that tail;
+ *                    it is declared below rather than in styles/app.css so it
+ *                    is available at this first paint too. Being `local()`-only
+ *                    it costs no request.
+ *   - content size:  styles/quantecon.css -> `.article` font-size (1.125rem).
+ *                    Without it the article paints at the UA default 16px and
+ *                    jumps to 18px when the Tailwind bundle lands, reflowing
+ *                    the whole page on every cold load.
  *   - grid columns:  tailwind.config.js  -> theme.extend.gridTemplateColumns
  *                    (`simple-sm` / `simple-xl`), applied by `.simple-center-grid`
  *   - dark bg:       matches the page <body>, which @myst-theme/site renders as
@@ -88,7 +96,9 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
  * the panel does not push the article down while it waits.
  */
 const CRITICAL_CSS = `
-:where(html){font-family:"Source Sans 3 Variable","Source Sans 3",sans-serif}
+@font-face{font-family:"Source Sans 3 Fallback";src:local("Helvetica"),local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:92.25%;ascent-override:111%;descent-override:43.36%;line-gap-override:0%}
+:where(html){font-family:"Source Sans 3 Variable","Source Sans 3","Source Sans 3 Fallback",sans-serif}
+:where(.article){font-size:1.125rem}
 :where(body){margin:0;background-color:#fff}
 :where(.dark body){background-color:#1c1917}
 :where([hidden],.hidden){display:none}

styles/app.css

@@ -4,6 +4,9 @@
 @import '@myst-theme/styles';
 @import './lists.css';
 @import './mpl-widget.css';
+/* QuantEcon content styles. Last, so it has the final say among the
+   imports -- see the file's header for the specificity rules. */
+@import './quantecon.css';
 
 @layer base {
   .grid-gap {