@chassis-ui/docs 0.1.10 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 > Shared Astro layouts, components, and utilities for Chassis documentation sites.
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Version: 0.1.10](https://img.shields.io/badge/Version-0.1.10-blue.svg)](https://www.npmjs.com/package/@chassis-ui/docs) [![npm](https://img.shields.io/npm/v/@chassis-ui/docs.svg)](https://www.npmjs.com/package/@chassis-ui/docs)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Version: 0.2.0](https://img.shields.io/badge/Version-0.2.0-blue.svg)](https://www.npmjs.com/package/@chassis-ui/docs) [![npm](https://img.shields.io/npm/v/@chassis-ui/docs.svg)](https://www.npmjs.com/package/@chassis-ui/docs)
 
 ## Overview
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chassis-ui/docs",
   "description": "Shared Astro components and layouts for Chassis documentation sites.",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/FeatureCard.astro

@@ -26,7 +26,7 @@ const hasContent = Astro.slots.has('default')
 // Build class strings
 const cardClasses = [
   'feature-item bg-even d-flex flex-column rounded-large',
-  'p-medium p-large-xlarge gap-medium gap-medium-xlarge',
+  'p-medium large:p-xlarge gap-medium medium:gap-xlarge',
   horizontal ? '' : 'h-100',
   classes
 ]
@@ -35,8 +35,8 @@ const cardClasses = [
 
 const headerClasses = [
   'feature-header d-flex',
-  'gap-medium gap-medium-xlarge',
-  horizontal ? 'flex-column flex-medium-row' : 'flex-column'
+  'gap-medium medium:gap-xlarge',
+  horizontal ? 'flex-column medium:flex-row' : 'flex-column'
 ].join(' ')
 ---
 
@@ -45,17 +45,17 @@ const headerClasses = [
     {
       icon && (
         <div class="feature-thumb">
-          <svg class="icon feature-icon icon-3xlarge icon-medium-4xlarge" aria-hidden="true">
+          <svg class="icon feature-icon icon-3xlarge medium:icon-4xlarge" aria-hidden="true">
             <use href={`#${icon}`} />
           </svg>
         </div>
       )
     }
     <div>
-      <h3 class="feature-title font-large font-medium-xlarge mb-3xsmall mb-medium-2xsmall">
+      <h3 class="feature-title font-large medium:font-xlarge mb-3xsmall medium:mb-2xsmall">
         <slot name="title" />
       </h3>
-      <p class="feature-body font-medium-large mb-0">
+      <p class="feature-body medium:font-large mb-0">
         <slot name="body" />
       </p>
     </div>

package/src/components/NavLink.astro

@@ -21,7 +21,7 @@ interface Props {
 const { active, class: className, ...props } = Astro.props
 ---
 
-<li class="nav-item col-6 col-large-auto">
+<li class="nav-item col-6 large:col-auto">
   <a
     aria-current={active ? true : undefined}
     class:list={['nav-link', className, { active }]}

package/src/components/ThemeToggler.astro

@@ -26,7 +26,7 @@ const { layout } = Astro.props
 >
   <svg class="icon theme-icon-active" aria-hidden="true"><use href="#circle-half-solid"></use></svg>
   <span
-    class=`${layout === 'examples' ? 'visually-hidden' : 'd-large-none ms-xsmall'}`
+    class=`${layout === 'examples' ? 'visually-hidden' : 'large:d-none ms-xsmall'}`
     id="cxd-theme-text">Toggle theme</span
   >
 </button>

package/src/components/shortcodes/Blockquote.astro

@@ -0,0 +1,31 @@
+---
+/**
+ * Blockquote
+ *
+ * Render a blockquote with optional attribution.
+ */
+
+interface Props {
+  /** Attribution text or HTML for the quote */
+  attr?: String
+}
+
+const { attr } = Astro.props
+---
+
+{
+  attr ? (
+    <figure>
+      <blockquote class="blockquote">
+        <slot />
+      </blockquote>
+      <figcaption class="attribution">
+        <Fragment set:html={attr} />
+      </figcaption>
+    </figure>
+  ) : (
+    <blockquote class="blockquote">
+      <slot />
+    </blockquote>
+  )
+}

package/src/components/shortcodes/CSSOnly.astro

@@ -0,0 +1,18 @@
+---
+/*
+ * Outputs badge to identify features that are only available in CSS and not in Figma
+ */
+
+interface Props {
+  tooltip?: string
+}
+
+const { tooltip = 'This feature is only available in CSS and not in Figma components.' } =
+  Astro.props
+---
+
+<span
+  class="badge large info smooth mb-medium rounded-medium"
+  data-cx-toggle="tooltip"
+  title={tooltip}>CSS Only</span
+>

package/src/components/shortcodes/DeprecatedIn.astro

@@ -0,0 +1,15 @@
+---
+/*
+ * Outputs badge to identify the version something was deprecated
+ */
+
+interface Props {
+  version: string
+}
+
+const { version } = Astro.props
+---
+
+<span class="badge large warning smooth mb-medium rounded-medium">
+  Deprecated in v{version}
+</span>

package/src/components/shortcodes/InFigma.astro

@@ -0,0 +1,21 @@
+---
+/*
+ * Outputs badge to identify features that are only available in CSS and not in Figma
+ */
+
+interface Props {
+  tooltip?: string
+  plural?: boolean
+}
+
+const { tooltip, plural } = Astro.props
+const tooltipText =
+  tooltip ??
+  `This variant${plural ? 's' : ''} exist${plural ? '' : 's'} in the Figma component library with bound design tokens.`
+---
+
+<span
+  class="badge large primary smooth mb-medium rounded-medium"
+  data-cx-toggle="tooltip"
+  title={tooltipText}>In Figma</span
+>

package/src/layouts/DocsLayout.astro

@@ -42,10 +42,10 @@ if (frontmatter.toc) {
 ---
 
 <BaseLayout {...Astro.props} layout="docs" overrides={{ body: bodyProps }}>
-  <div slot="main" class="container-fluid cxd-gutter cxd-layout">
+  <div slot="main" class="container fluid cxd-gutter cxd-layout">
     <aside class="cxd-sidebar">
       <div
-        class="offcanvas-large offcanvas-start"
+        class="large:offcanvas offcanvas-start"
         role="dialog"
         tabindex="-1"
         id="cxdSidebar"
@@ -73,9 +73,9 @@ if (frontmatter.toc) {
       <div class="cxd-intro">
         <slot name="intro">
           <div
-            class="d-medium-flex flex-medium-row-reverse justify-content-between align-items-start"
+            class="medium:d-flex medium:flex-row-reverse justify-content-between align-items-start"
           >
-            <div class="mb-medium mb-medium-0 d-flex text-nowrap">
+            <div class="mb-medium medium:mb-0 d-flex text-nowrap">
               {
                 // This is needed because we want to show the badge if show_badge isn't present or is set to false
                 frontmatter.added &&
@@ -113,7 +113,7 @@ if (frontmatter.toc) {
         frontmatter.toc && headings && (
           <div class="cxd-toc">
             <button
-              class="button default mb-large text-decoration-none cxd-toc-toggle d-medium-none"
+              class="button default mb-large text-decoration-none cxd-toc-toggle medium:d-none"
               type="button"
               data-cx-toggle="collapse"
               data-cx-target="#tocContents"
@@ -125,8 +125,8 @@ if (frontmatter.toc) {
                 <use xlink:href="#chevron-sort-solid" />
               </svg>
             </button>
-            <strong class="d-none d-medium-block h6 my-xsmall">On this page</strong>
-            <hr class="d-none d-medium-block my-xsmall" />
+            <strong class="d-none medium:d-block h6 my-xsmall">On this page</strong>
+            <hr class="d-none medium:d-block my-xsmall" />
             <div class="collapse cxd-toc-collapse" id="tocContents">
               <nav id="TableOfContents">
                 <slot name="toc">
@@ -143,7 +143,7 @@ if (frontmatter.toc) {
           frontmatter.sections && (
             <div class="row g-xlarge">
               {frontmatter.sections.map((section: DocSection) => (
-                <div class="col-medium-6">
+                <div class="medium:col-6">
                   <a
                     class="d-block text-decoration-none"
                     href={getChassisDocsPath(

package/src/layouts/SingleLayout.astro

@@ -22,10 +22,10 @@ mainProps['class'] = 'min-vh-100'
 ---
 
 <BaseLayout {...Astro.props} layout="single" overrides={{ main: mainProps }}>
-  <header class="py-xlarge py-medium-3xlarge border-bottom border-subtle">
-    <div class="container-2xlarge">
+  <header class="py-xlarge medium:py-3xlarge border-bottom border-subtle">
+    <div class="container 2xlarge">
       <div class="row">
-        <div class="col col-large-10 col-2xlarge-8">
+        <div class="col large:col-10 2xlarge:col-8">
           <h1 class="mt-0">{title}</h1>
           <p class="font-lead">{description}</p>
           <slot name="header-content" />

package/src/layouts/footer/Footer.astro

@@ -7,9 +7,9 @@
 ---
 
 <footer class="cxd-footer py-6xlarge">
-  <div class="container-2xlarge fg-subtle">
+  <div class="container 2xlarge fg-subtle">
     <div class="row">
-      <div class="col-medium-10 col-large-5 mb-medium">
+      <div class="medium:col-10 large:col-5 mb-medium">
         <a
           class="d-inline-flex align-items-center mb-xsmall text-body-emphasis text-decoration-none"
           href="/"
@@ -22,7 +22,7 @@
           and distribution of the software.
         </p>
       </div>
-      <div class="col-small-4 col-large-2 offset-large-1 mb-medium">
+      <div class="small:col-4 large:col-2 large:offset-1 mb-medium">
         <p class="h6 mb-xsmall">Docs</p>
         <ul class="nav">
           <li><a href="/tokens">Design Tokens</a></li>
@@ -32,7 +32,7 @@
           <li><a href="/icons">Icon Generator</a></li>
         </ul>
       </div>
-      <div class="col-small-4 col-large-2 mb-medium">
+      <div class="small:col-4 large:col-2 mb-medium">
         <p class="h6 mb-xsmall">Github</p>
         <ul class="nav">
           <li><a href="https://github.com/chassis-ui/tokens">Chassis Tokens</a></li>
@@ -42,7 +42,7 @@
           <li><a href="https://github.com/chassis-ui/icons">Chassis Icons</a></li>
         </ul>
       </div>
-      <div class="col-small-4 col-large-2 mb-medium">
+      <div class="small:col-4 large:col-2 mb-medium">
         <p class="h6 mb-xsmall">Project</p>
         <ul class="nav">
           <li><a href="/about">About</a></li>

package/src/layouts/footer/Scripts.astro

@@ -17,11 +17,13 @@ const { layout } = Astro.props
 ---
 
 <script is:inline {...getChassisJsProps()}></script>
-
 <script src="../../js/search.js"></script>
-
+<script>
+  const tooltipTriggerList = document.querySelectorAll('[data-cx-toggle="tooltip"]')
+  const tooltipList = [...tooltipTriggerList].map(
+    (tooltipTriggerEl) => new chassis.Tooltip(tooltipTriggerEl)
+  )
+</script>
 {layout === 'docs' && <script src="../../js/sidebar.js" />}
-
 <script src="../../js/icon-loader.js"></script>
-
 <slot name="scripts" />

package/src/layouts/header/Navigation.astro

@@ -31,8 +31,8 @@ const isActive = (path: string) => {
 }
 ---
 
-<header class="navbar navbar-expand-large cxd-navbar sticky-top">
-  <nav class="container-2xlarge" aria-label="Main navigation">
+<header class="navbar large:navbar-expand cxd-navbar sticky-top">
+  <nav class="container 2xlarge" aria-label="Main navigation">
     {
       layout === 'docs' && (
         <div class="cxd-navbar-toggle">
@@ -47,14 +47,14 @@ const isActive = (path: string) => {
             <svg class="icon icon-large" aria-hidden="true">
               <use href="#bars-solid" />
             </svg>
-            <span class="d-none fs-6 pe-2xsmall">Browse</span>
+            <span class="d-none large:d-inline fs-6 pe-2xsmall">Browse</span>
           </button>
         </div>
       )
     }
-    {layout !== 'docs' && <div class="d-large-none" style="width: 4.25rem;" />}
+    {layout !== 'docs' && <div class="large:d-none" style="width: 4.25rem;" />}
 
-    <a class="navbar-brand me-large-medium" href="/" aria-label="Chassis">
+    <a class="navbar-brand large:me-medium" href="/" aria-label="Chassis">
       <img src="/static/images/site-logo.svg" alt="Chassis UI" width="123" height="32" />
     </a>
 
@@ -62,7 +62,7 @@ const isActive = (path: string) => {
       <div class="cxd-search" id="docsearch"></div>
 
       <button
-        class="navbar-toggler d-flex d-large-none order-3 p-xsmall"
+        class="navbar-toggler d-flex large:d-none order-3 p-xsmall"
         type="button"
         data-cx-toggle="offcanvas"
         data-cx-target="#cxdNavbar"
@@ -74,7 +74,7 @@ const isActive = (path: string) => {
     </div>
 
     <div
-      class="offcanvas-large offcanvas-end flex-grow-1"
+      class="offcanvas large:offcanvas offcanvas-end flex-grow-1"
       role="dialog"
       tabindex="-1"
       id="cxdNavbar"
@@ -90,45 +90,45 @@ const isActive = (path: string) => {
           data-cx-target="#cxdNavbar"></button>
       </div>
 
-      <div class="offcanvas-body p-large pt-0 p-large-0">
-        <hr class="d-large-none" />
-        <ul class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 mx-large-medium">
+      <div class="offcanvas-body p-large pt-0 large:p-0">
+        <hr class="large:d-none" />
+        <ul class="navbar-nav flex-row flex-wrap cxd-navbar-nav mx-0 large:mx-medium">
           <NavLink active={isActive('/tokens')} href="/tokens">Tokens</NavLink>
           <NavLink active={isActive('/figma')} href="/figma">Figma</NavLink>
           <NavLink active={isActive('/css')} href="/css">CSS</NavLink>
           <NavLink active={isActive('/assets')} href="/assets">Assets</NavLink>
           <NavLink active={isActive('/icons')} href="/icons">Icons</NavLink>
-          <li class="nav-item col-12 col-large-auto d-large-flex">
-            <div class="vr d-none d-large-flex my-auto mx-large-2"></div>
-            <hr class="d-large-none" />
+          <li class="nav-item col-12 large:col-auto large:d-flex">
+            <div class="vr d-none large:d-flex my-auto large:mx-2"></div>
+            <hr class="large:d-none" />
           </li>
           <NavLink active={isActive('/examples')} href="/examples">Examples</NavLink>
         </ul>
 
-        <hr class="d-large-none" />
+        <hr class="large:d-none" />
 
-        <ul class="navbar-nav flex-row flex-wrap ms-medium-auto align-items-center">
+        <ul class="navbar-nav flex-row flex-wrap medium:ms-auto align-items-center">
           <NavLink
-            class="nav-link px-0 px-large-2"
+            class="nav-link px-0 large:px-2"
             href={getConfig().github_org}
             target="_blank"
             rel="noopener"
           >
             <svg class="icon"><title>GitHub</title><use href="#github-brand"></use></svg>
-            <small class="d-large-none ms-xsmall">GitHub</small>
+            <small class="large:d-none ms-xsmall">GitHub</small>
           </NavLink>
           <NavLink
-            class="nav-link px-0 px-large-2"
+            class="nav-link px-0 large:px-2"
             href={`https://x.com/${getConfig().x}`}
             target="_blank"
             rel="noopener"
           >
             <svg class="icon"><title>X</title><use href="#x-twitter-brand"></use></svg>
-            <small class="d-large-none ms-xsmall">X</small>
+            <small class="large:d-none ms-xsmall">X</small>
           </NavLink>
-          <li class="nav-item col-12 col-large-auto">
-            <div class="vr d-none d-large-flex h-100 mx-large-2"></div>
-            <hr class="d-large-none" />
+          <li class="nav-item col-12 large:col-auto">
+            <div class="vr d-none large:d-flex h-100 large:mx-2"></div>
+            <hr class="large:d-none" />
           </li>
 
           <li class="nav-item dropdown">

package/src/layouts/header/Skippy.astro

@@ -16,7 +16,7 @@ const { layout } = Astro.props
 ---
 
 <div class="skippy visually-hidden-focusable overflow-hidden">
-  <div class="container-xlarge">
+  <div class="container xlarge">
     <a class="d-inline-flex p-xsmall m-xsmall" href="#content">Skip to main content</a>
     {
       layout === 'docs' && (

package/src/scss/_callouts.scss

@@ -3,7 +3,7 @@
 //
 
 .cxd-callout {
-  --#{$prefix}link-main-color-rgb: var(--cxd-callout-link);
+  --#{$prefix}link-main-color: var(--cxd-callout-link);
   --#{$prefix}code-color: var(--cxd-callout-code-color);
 
   padding: 1.25rem;

package/src/scss/_layout.scss

@@ -23,6 +23,7 @@
 
 .cxd-intro {
   grid-area: intro;
+  width: 100%;
   max-width: 960px;
   margin: 2rem auto 0;
 }
@@ -61,9 +62,10 @@
 
 .cxd-content {
   grid-area: content;
+  justify-self: center;
+  width: 100%;
   min-width: 1px; // Fix width when cxd-content contains a `<pre>` https://github.com/chassis-ui/css/issues/25410
   max-width: 960px;
-  margin: 0 auto;
 }
 
 // .cxd-content,

package/src/scss/_navbar.scss

@@ -2,7 +2,7 @@
   // box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
   padding: 0;
   // padding: .75rem 0;
-  background-color: rgba(var(--cx-bg-main-rgb), var(--cx-opacity-dim-main));
+  background-color: to-opacity(var(--cx-bg-main), var(--cx-opacity-dim-main));
   backdrop-filter: blur(24px);
   border-bottom: var(--cx-border-width-medium) solid var(--cx-border-subtle);
 
@@ -16,7 +16,6 @@
     z-index: -1;
     display: block;
     content: "";
-    // background-image: linear-gradient(rgba(var(--cxd-subtle-rgb), 1), rgba(var(--cxd-subtle-rgb), .95));
   }
 
   .cxd-navbar-toggle {
@@ -81,7 +80,7 @@
     vertical-align: -.125rem;
   }
 
-  .offcanvas-large {
+  .#{large\:}offcanvas {
     background-color: var(--cxd-subtle-bg);
     border-left: 0;
 
@@ -101,8 +100,6 @@
     --cx-dropdown-min-width: 12rem;
     --cx-dropdown-padding-x: .25rem;
     --cx-dropdown-padding-y: .25rem;
-    --cx-dropdown-link-hover-bg: rgba(var(--cxd-subtle-rgb), .1);
-    --cx-dropdown-link-active-bg: rgba(var(--cxd-subtle-rgb), 1);
     @include rfs(.875rem, --cx-dropdown-font-size);
     @include font-size(.875rem);
     @include border-radius(.5rem);

package/src/scss/_sidebar.scss

@@ -22,7 +22,7 @@
   }
 
   @include media-breakpoint-down(large) {
-    .offcanvas-large {
+    .#{large\:}offcanvas {
       border-right-color: var(--cx-border-color);
       box-shadow: var(--cx-box-shadow-large);
     }

package/src/scss/_toc.scss

@@ -96,7 +96,7 @@
 
     &:focus,
     &[aria-expanded="true"] {
-      box-shadow: 0 0 0 3px rgba(var(--cxd-subtle-rgb), .25);
+      box-shadow: 0 0 0 3px #{to-opacity(var(--cxd-subtle), .25)};
     }
   }
 }

package/src/scss/_variables.scss

@@ -2,9 +2,8 @@
 // $cxd-main:        $primary-base-color;
 // $cxd-subtle:        lighten(saturate($cxd-main, 5%), 15%); // stylelint-disable-line function-disallowed-list
 // $cxd-main-light:  lighten(saturate($cxd-main, 5%), 45%); // stylelint-disable-line function-disallowed-list
-// $cxd-accent:        $secondary-base-color;
 $cxd-main:        var(--cx-primary-base-color);
-$cxd-subtle:      var(--cx-primary-bg-evident);
+$cxd-subtle:      var(--cx-primary-40);
 $cxd-main-light:  var(--cx-primary-fg-main);
 $cxd-accent:      var(--cx-primary-base-color);
 
@@ -15,30 +14,26 @@ $cxd-callout-variants: info, warning, danger, default !default;
 [data-cx-theme="light"] {
   --cxd-main: #{$cxd-main};
   --cxd-subtle: #{$cxd-subtle};
-  --cxd-accent: #{$cxd-accent};
-  --cxd-main-rgb: var(--cx-primary-base-color-rgb);
-  --cxd-subtle-rgb: var(--cx-primary-40-rgb);
-  --cxd-accent-rgb: var(--cx-secondary-base-color-rgb);
   --cxd-pink-rgb: #{to-rgb($pink-500)};
   --cxd-teal-rgb: #{to-rgb($teal-500)};
   --cxd-main-bg: var(--cxd-main);
   --cxd-subtle-bg: var(--cxd-subtle);
   --cxd-toc-color: var(--cxd-main);
   --cxd-sidebar-link-bg: var(--cx-bg-highlight);
-  --cxd-callout-link: #{to-rgb($blue-600)};
-  --cxd-callout-code-color: #{$pink-600};
+  --cxd-callout-link: #{to-color($blue-600)};
+  --cxd-callout-code-color: #{to-color($pink-600)};
   // --cxd-pre-bg: var(--cx-bg-even);
 }
 
 @if $enable-dark-mode {
   @include color-mode(dark, true) {
     color-scheme: dark;
-    --cxd-subtle: var(--cx-primary-60-rgb);
+    --cxd-subtle: var(--cx-primary-60);
     --cxd-subtle-bg: #{$cxd-subtle};
     // --cxd-toc-color: var(--#{$prefix}fg-subtle);
     --cxd-sidebar-link-bg: var(--cx-primary-40);
-    --cxd-callout-link: #{to-rgb($blue-300)};
-    --cxd-callout-code-color: #{$pink-300};
+    --cxd-callout-link: #{to-color($blue-300)};
+    --cxd-callout-code-color: #{to-color($pink-300)};
     //--cxd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
     --cxd-pre-bg: var(--cx-bg-evident);
   }

package/src/scss/main.scss

@@ -5,7 +5,6 @@
 @import "fonts";
 
 @import "navbar";
-// @import "masthead";
 @import "content";
 @import "skippy";
 @import "sidebar";
@@ -42,7 +41,7 @@
 
 .docs-body .navbar,
 .docs-body .cxd-footer {
-  .container-2xlarge {
+  .container.#{\32 xlarge} {
     max-width: 100%;
   }
   .cxd-search {

package/src/scss/_masthead.scss

@@ -1,124 +0,0 @@
-.cxd-masthead {
-  --cxd-pink-rgb: #{to-rgb($pink)};
-  padding: 3rem 0;
-  // stylelint-disable
-  background-image: linear-gradient(180deg, rgba(var(--cx-bg-main-rgb), .01), rgba(var(--cx-bg-main-rgb), 1) 85%),
-                    radial-gradient(ellipse at top left, rgba(var(--cx-primary-rgb), .25), transparent 50%),
-                    radial-gradient(ellipse at top right, rgba(var(--cx-secondary-rgb), .25), transparent 50%),
-                    radial-gradient(ellipse at center right, rgba(var(--cx-secondary-rgb), .25), transparent 50%),
-                    radial-gradient(ellipse at center left, rgba(var(--cx-secondary-rgb), .25), transparent 50%);
-  // stylelint-enable
-
-  h1 {
-    --cx-heading-color: var(--cx-fg-color);
-    @include font-size(4rem);
-    line-height: 1.25em;
-  }
-
-  .lead {
-    @include font-size(1rem);
-    font-family: var(--cx-font-family-display);
-    font-weight: 400;
-    line-height: 1.5em;
-    color: var(--cx-fg-subtle);
-  }
-
-  .cxd-code-snippet {
-    width: 24rem;
-    margin: 0;
-    text-align: left;
-    border-color: var(--cx-border-subtle);
-    border-width: 1px;
-    @include border-radius(.5rem);
-  }
-
-  // .highlight {
-  //   width: 100%;
-  //   padding: .5rem 1rem;
-  //   overflow: hidden;
-  //   text-overflow: ellipsis;
-  //   white-space: nowrap;
-  //   background-color: rgba(var(--cx-fg-color-rgb), .075);
-  //   @include border-radius(calc(.5rem - 1px));
-
-  //   @include media-breakpoint-up(large) {
-  //     padding-right: 4rem;
-  //   }
-
-  //   pre {
-  //     padding: 0;
-  //     margin: .625rem 0;
-  //     overflow: hidden;
-  //   }
-  // }
-  // .button-clipboard {
-  //   position: absolute;
-  //   top: -.625rem;
-  //   right: 0;
-  //   background-color: transparent;
-  // }
-
-  #carbonads { // stylelint-disable-line selector-max-id
-    margin-inline: auto;
-  }
-
-  @include media-breakpoint-up(medium) {
-    .lead {
-      @include font-size(1.5rem);
-    }
-  }
-}
-
-.masthead-followup {
-  h2,
-  h3,
-  h4 {
-    --cx-heading-color: var(--cx-fg-color);
-  }
-
-  .lead {
-    @include font-size(1rem);
-  }
-
-  @include media-breakpoint-up(medium) {
-    .lead {
-      @include font-size(1.25rem);
-    }
-  }
-}
-
-.masthead-followup-icon {
-  padding: 1rem;
-  color: rgba(var(--bg-rgb), 1);
-  background-color: rgba(var(--bg-rgb), .1);
-  background-blend-mode: multiple;
-  @include border-radius(1rem);
-  mix-blend-mode: darken;
-
-  svg {
-    filter: drop-shadow(0 1px 1px var(--cx-bg-color));
-  }
-}
-
-.masthead-notice {
-  background-color: var(--cxd-accent);
-  box-shadow: inset 0 -1px 1px rgba(var(--cx-fg-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--cx-bg-color-rgb), .75);
-}
-
-.animate-image {
-  > img {
-    @include transition(transform .2s ease-in-out);
-  }
-
-  &:hover > img {
-    transform: scale(1.1);
-  }
-}
-
-@if $enable-dark-mode {
-  [data-cx-theme="dark"] {
-    .masthead-followup-icon {
-      mix-blend-mode: lighten;
-    }
-  }
-}