feat: redesign quarto.org and the gallery

.githooks/check-freeze.sh

@@ -39,6 +39,19 @@ while IFS= read -r qmd; do
     [ -n "$qmd" ] || continue
     freeze_rel="_freeze/${qmd%.qmd}/execute-results/html.json"
 
+    # Skip when the freeze file is intentionally removed in this change: the
+    # page no longer executes code (e.g. converted to the markdown engine), so
+    # its freeze entry is vestigial and correctly deleted, not stale.
+    if [ "$MODE" = "commit" ]; then
+        if git diff --cached --diff-filter=D --name-only 2>/dev/null | grep -Fxq "$freeze_rel"; then
+            continue
+        fi
+    else
+        if git diff "${REMOTE}..HEAD" --diff-filter=D --name-only 2>/dev/null | grep -Fxq "$freeze_rel"; then
+            continue
+        fi
+    fi
+
     # Read freeze JSON from git objects, not working tree, to avoid false passes
     # when the freeze file is updated on disk but not yet staged.
     if [ "$MODE" = "commit" ]; then

.github/workflows/preview.yml

@@ -227,9 +227,14 @@ jobs:
                 'docs/extensions/listings/custom-formats.yml': 'docs/extensions/index.html',
                 'docs/extensions/listings/revealjs-formats.yml': 'docs/extensions/index.html',
                 'docs/extensions/listings/revealjs.yml': 'docs/extensions/index.html',
-                // Gallery data files → gallery index
-                'docs/gallery/carousel.yml': 'docs/gallery/index.html',
-                'docs/gallery/gallery.yml': 'docs/gallery/index.html',
+                // Gallery data files → gallery pages
+                'docs/gallery/data/featured.yml': 'docs/gallery/index.html',
+                'docs/gallery/data/reports-analytics.yml': 'docs/gallery/reports-analytics.html',
+                'docs/gallery/data/dashboards-monitoring.yml': 'docs/gallery/dashboards-monitoring.html',
+                'docs/gallery/data/research-scholarship.yml': 'docs/gallery/research-scholarship.html',
+                'docs/gallery/data/teaching-learning.yml': 'docs/gallery/teaching-learning.html',
+                'docs/gallery/data/software-documentation.yml': 'docs/gallery/software-documentation.html',
+                'docs/gallery/data/personal-community.yml': 'docs/gallery/personal-community.html',
                 // Guide listing → guide index
                 'docs/guide/guide.yml': 'docs/guide/index.html',
                 // Download data → download index

_axe-baseline.json

@@ -692,7 +692,7 @@
       "note": "third-party: leaflet, no upstream issue. leaflet.js gives each marker icon <img> alt=\"\" and also tabindex=\"0\", so it is presentational and focusable at the same time. axe adds the random htmlwidget ID because this page has three maps; update the ID when the page is refrozen."
     },
     {
-      "signature": "color-contrast :: #f8f8f8 on #dddddd",
+      "signature": "color-contrast :: #e8eef4 on #dddddd",
       "pages": ["docs/interactive/index.html", "docs/interactive/widgets/jupyter.html"],
       "impact": "serious",
       "note": "third-party: leaflet, no upstream issue. The text color of the leaflet attribution control does not change in the Quarto dark theme, because leaflet.css has no dark theme."
@@ -710,7 +710,7 @@
       "note": "third-party: leaflet, no upstream issue. The ESDIS link in the leaflet tile attribution is #0078a8 on the #343a40 page text, 2.32:1. Scoped to these leaflet pages because the signature also matches other low-contrast links."
     },
     {
-      "signature": "color-contrast :: #000000 on #151515",
+      "signature": "color-contrast :: #000000 on #161f28",
       "pages": ["docs/interactive/widgets/htmlwidgets.html"],
       "impact": "serious",
       "note": "third-party: dygraphs, rstudio/dygraphs#241. dygraph.js 1.1.1 sets the axis-label color in an inline style, so CSS cannot change it. Clears when the R dygraphs package bundles dygraph.js 2.0 or later. Scoped to this page because the same signature on penguins-preview.html is a Quarto defect."
@@ -758,7 +758,7 @@
       "note": "third-party: knitr, yihui/knitr#1747. kable() leaves the corner cell above the row names as an empty <th> on purpose. yihui/knitr#2500 added scope to the other header cells but kept this cell empty."
     },
     {
-      "signature": "color-contrast :: #f8f8f8 on #ffffff",
+      "signature": "color-contrast :: #e8eef4 on #ffffff",
       "pages": ["docs/interactive/ojs/examples/arquero.html", "docs/interactive/ojs/libraries.html"],
       "impact": "serious",
       "note": "third-party: Arquero, no upstream issue. The Arquero table viewer sets background: #fff on its sticky header in an inline style, so in dark mode the header text gets the light theme text color. Scoped to the two pages with the viewer."

_extensions/quartoorg/_extension.yml

@@ -7,8 +7,8 @@ contributes:
     html:
       toc: true
       theme:
-        light: [cosmo, scss/quartoorg.scss]
-        dark: [cosmo, scss/quartoorg-dark.scss]
+        light: [cosmo, scss/quartoorg.scss, scss/quartoorg-palette.scss]
+        dark: [cosmo, scss/quartoorg-dark.scss, scss/quartoorg-palette.scss]
       code-copy: true
       code-overflow: wrap
       include-in-header:

_extensions/quartoorg/scss/partials/_announcement.scss

@@ -2,10 +2,10 @@
   padding: 1em;
   font-size: 1em;
   font-weight: bold;
-  color: $white;
-  background-color: #447099;
+  color: var(--qorg-on-brand);
+  background-color: var(--qorg-brand);
 }
 
 #quarto-announcement a {
-  color: $white;
+  color: inherit;
 }

_extensions/quartoorg/scss/partials/_buttons.scss

@@ -1,16 +1,34 @@
-.btn-action-primary {
-  color: white;
-  background-color: #447099;
+// Action buttons (home hero, downloads). They set Bootstrap's --bs-btn-*
+// variables, so .btn applies the colours in every state and the focus ring
+// comes from _focus.scss. 44px minimum height for the target size.
+.btn.btn-action {
+  min-width: 165px;
+  min-height: 44px;
+  border-width: 2px;
+  border-radius: 30px;
 }
 
-.btn-action-primary:hover {
-  background-color: #305775;
-  color: white;
+.btn.btn-action-primary {
+  --bs-btn-color: var(--qorg-on-brand);
+  --bs-btn-bg: var(--qorg-brand);
+  --bs-btn-border-color: var(--qorg-brand);
+  --bs-btn-hover-color: var(--qorg-on-brand);
+  --bs-btn-hover-bg: var(--qorg-brand-hover);
+  --bs-btn-hover-border-color: var(--qorg-brand-hover);
+  --bs-btn-active-color: var(--qorg-on-brand);
+  --bs-btn-active-bg: var(--qorg-brand-hover);
+  --bs-btn-active-border-color: var(--qorg-brand-hover);
 }
 
-.btn-action {
-  min-width: 165px;
-  border-radius: 30px;
-  border: none;
+// Outline button next to the primary one: strong line border (3:1).
+.btn.btn-action.btn-secondary {
+  --bs-btn-color: var(--qorg-ink);
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: var(--qorg-line-strong);
+  --bs-btn-hover-color: var(--qorg-link);
+  --bs-btn-hover-bg: transparent;
+  --bs-btn-hover-border-color: var(--qorg-link);
+  --bs-btn-active-color: var(--qorg-link);
+  --bs-btn-active-bg: transparent;
+  --bs-btn-active-border-color: var(--qorg-link);
 }
-

_extensions/quartoorg/scss/partials/_cards.scss

@@ -1,105 +1,60 @@
-
-@media (max-width: 575px) {
-
-.link-cards .card {
-  margin-bottom: 20px;
-  margin-right: 35px;
-}
-
-}
-
-@media (min-width: 576px) { 
+// Link cards from assets/ejs/links.ejs (Guide and Reference listings):
+// card shell with the section bar, a glyph box, and the h2 title kept for
+// heading order.
 .link-cards {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1rem;
 }
 
 .link-cards .card {
-  width: 190px;
-  margin: 0 20px 12px 0;
+  @include qorg-card-shell;
 }
 
-
+.link-cards .card-body {
+  padding: 1rem 1rem 0.9rem;
 }
 
+.link-cards .card-body > p {
+  margin-bottom: 0.45rem;
+}
 
-.link-cards .card {
-  border: none;
-  padding: 0;
+.link-cards .card-glyph {
+  @include qorg-glyph-box;
 }
 
-/* Card titles are h2 for heading order; keep the old h4 look */
 .link-cards .card-title h2 {
-  font-size: 1.25rem;
-  font-weight: 400;
-  line-height: 1.2;
-  opacity: 0.9;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
+  margin: 0 0 0.1rem;
   padding-bottom: 0;
   border-bottom: none;
-}
-
-.link-cards .card-title p {
-  margin-bottom: 0;
-}
-
-.link-cards .card-subtitle p {
+  font-size: 1.1rem;
+  font-weight: 700;
   line-height: 1.2;
-  opacity: 0.9;
-  margin-bottom: 0.5rem;
 }
 
 .link-cards .card-subtitle {
-  margin-bottom: 0.7rem;
+  margin-bottom: 0.6rem;
+  font-size: 0.88rem;
+  line-height: 1.35;
 }
 
-.link-cards .card-body {
-  padding: 0.5rem;
-  padding-left: 0.1rem;
+.link-cards .card-subtitle p {
+  margin-bottom: 0;
 }
 
 .link-cards .card-body ul {
   margin-bottom: 0;
   padding-left: 0;
   list-style-type: none;
+  font-size: 0.95rem;
 }
 
 .link-cards .card-body ul a {
+  display: inline-block;
+  min-height: 24px;
   text-decoration: none;
-}
-
-.link-cards .card-body ul li {
-  padding-bottom: 0.2rem;
-}
 
-
-.card .source-code {
-  margin-top: 3px;
-}
-
-.carousel.card {
-  font-size: 16px;
-  padding-top: 2em;
+  &:hover {
+    text-decoration: underline;
+  }
 }
-
-.carousel.card a {
-  text-decoration: none;
-}
-
-.carousel img {
-  width: 70%;
-  margin-bottom: 110px;
-}
-
-.carousel .carousel-control-prev-icon, 
-.carousel .carousel-control-next-icon {
-  margin-bottom: 110px;
-}
-
-
-.gallery-category {
-  column-gap: 10px;
-}
-