Improve CSS contrast, responsive layout, and reduced motion support

NEWS.md

@@ -1,5 +1,8 @@
 # gitdevr 0.0.0.9000
 
-- Code blocks now use the GitHub palette in light mode and One Dark in dark mode, matching the Chulapa highlighters.
+- Code blocks now use the GitHub palette in light mode and One Dark in dark mode, with small adjustments to comments and One Dark names for accessible contrast.
+- Navigation hover and focus states have improved contrast, and linked code tokens retain their underline.
+- Mobile code blocks scroll within their containers.
+- Page transitions and callout icon animations respect reduced motion preferences.
 - The package is in active development.
 - `test()` now returns `NULL` invisibly, as documented.

data-raw/compress_css.R

@@ -1,9 +1,25 @@
 # Compress CSS with `sass`.
 library(sass)
 
-lns <- readLines("inst/pkgdown/assets/BS5/gitdevr.css")
+source_path <- "inst/pkgdown/assets/BS5/gitdevr.css"
+lns <- paste(readLines(source_path), collapse = "\n")
+palette <- yaml::read_yaml("inst/brand_yml/_brand.yml")$color$palette
+names(palette) <- gsub("-", "_", names(palette), fixed = TRUE)
 
-# writeLines(lns, "inst/pkgdown/assets/BS5/gitdevr.min.css")
+# Keep Bootstrap's RGB utilities in sync with the same brand colors.
+pattern <- "--bs-[a-z0-9-]+: var\\(--brand-[a-z0-9_]+\\);"
+declarations <- regmatches(lns, gregexpr(pattern, lns))[[1]]
+for (declaration in declarations) {
+  property <- sub(":.*", "", declaration)
+  color <- sub(".*--brand-([a-z0-9_]+)\\);", "\\1", declaration)
+  channels <- paste(grDevices::col2rgb(palette[[color]])[, 1], collapse = ", ")
+  lns <- gsub(
+    paste0(property, "-rgb: [^;]+;"),
+    paste0(property, "-rgb: ", channels, ";"),
+    lns
+  )
+}
+writeLines(lns, source_path)
 
 sass(
   lns,

inst/brand_yml/_brand.yml

@@ -33,6 +33,7 @@ color:
     footer-text: "#8b949e"
     footer-link: "#58a6ff"
     dk-dark: "#343a40"
+    dk-body: "#24292f"
     dk-black: "#373e47"
     dk-border: "#6a788a"
     dk-gray: "#a8b3c1"

inst/pkgdown/_pkgdown.yml

@@ -30,6 +30,7 @@ template:
           footer-text: "#8b949e"
           footer-link: "#58a6ff"
           dk-dark: "#343a40"
+          dk-body: "#24292f"
           dk-black: "#373e47"
           dk-border: "#6a788a"
           dk-gray: "#a8b3c1"