Improve template accessibility and responsive layouts

NEWS.md

@@ -1,5 +1,7 @@
 # gitdevr 0.0.0.9000
 
+- Inline links remain identifiable without color, keyboard focus is visible and diffviewer text is readable in both modes. Footer backgrounds now span the viewport between the small and medium breakpoints without horizontal overflow (#10).
+- Mobile navigation, sidebars, footers and copy buttons now follow the shared responsive layout. Tab and pill hover styles no longer affect other navigation components, and development badges use the shared red color (#10).
 - Footer and navigation colors now follow the Chulapa GitDev skins, and the standalone dark brand resolves its background and primary colors consistently with gitdev-dark.
 - Quarto callout icons retain their shapes and now follow the site theme and brand colors through CSS masks.
 - 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.

inst/pkgdown/assets/BS5/gitdevr.css

@@ -155,7 +155,7 @@ blockquote,
 
 /* Dev version badge in navbar: fixed vivid red outside brand tokens. */
 .navbar .text-danger {
-	color: #ff4d4f !important;
+	color: #ff6b7b !important;
 }
 
 /* Hovers */
@@ -215,7 +215,9 @@ mark,
 	--bs-nav-link-hover-color: var(--bs-link-hover-color);
 }
 
-.nav-item .nav-link:hover,
+.nav-tabs .nav-link:hover,
+.nav-pills .nav-link:hover,
+.nav-tabs .nav-link:focus-visible,
 .nav-pills .nav-link:focus-visible {
 	background-color: rgba(var(--bs-body-color-rgb), 0.08);
 	color: var(--bs-link-hover-color);
@@ -238,6 +240,17 @@ mark,
 	border-radius: var(--bs-border-radius);
 }
 
+/* Keep the title, version, and menu toggle on one row on narrow phones. */
+@media (max-width: 375px) {
+	.navbar-brand {
+		font-size: 1.125rem;
+	}
+
+	.navbar .nav-text {
+		font-size: 0.65rem;
+	}
+}
+
 /* --- 4. Code blocks and syntax highlighting --- */
 
 .code-with-filename {
@@ -285,6 +298,35 @@ main pre {
 	overflow-x: auto;
 }
 
+@media (max-width: 575.98px) {
+	/* See https://github.com/r-lib/pkgdown/pull/2970 */
+
+  /* Need to override pkgdown */
+  .btn-copy-ex {
+    right: 5px;
+  }
+
+  div > pre {
+    border-radius: 0;
+  }
+
+  :not(li, blockquote) > div > pre {
+    margin-left: calc(var(--bs-gutter-x) * -0.5);
+    margin-right: calc(var(--bs-gutter-x) * -0.5);
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  :not(li, blockquote) > div > .btn-copy-ex {
+    right: calc(var(--bs-gutter-x) * -0.5 + 5px);
+  }
+
+  .code-with-filename {
+    margin-right: calc(var(--bs-gutter-x) * 0.5);
+    margin-left: calc(var(--bs-gutter-x) * 0.5);
+  }
+}
+
 /* --- Syntax highlighting: Chulapa github (light) and one.dark (dark). --- */
 /* Palettes: https://github.com/dieghernan/chulapa/tree/main/_sass/highlight
  * Adapted from Rouge tokens to Pandoc/downlit classes used by pkgdown.
@@ -973,12 +1015,13 @@ div.callout-body-container.callout-body .btn-copy-ex {
 /* --- 8. Footer --- */
 footer {
 	--gitdevr-footer-bg: var(--brand-footer_bg);
-	width: 100vw;
+	width: auto;
 	position: relative;
-	left: 50%;
-	right: 50%;
-	margin-left: -50vw;
-	margin-right: -50vw;
+	margin-left: calc(var(--bs-gutter-x) * -0.5);
+	margin-right: calc(var(--bs-gutter-x) * -0.5);
+	/* Paint the full viewport width without expanding the layout box. */
+	box-shadow: 0 0 0 100vmax var(--gitdevr-footer-bg);
+	clip-path: inset(0 -100vmax);
 	margin-bottom: 0;
 	font-family: "Inter Tight", Roboto;
 	font-weight: 700;
@@ -1060,6 +1103,13 @@ footer .pkgdown-footer-left {
 	}
 }
 
+/* Account for pkgdown's mobile sidebar margins. */
+@media (max-width: 767.98px) {
+	.row > aside {
+		width: calc(100% - 1rem);
+	}
+}
+
 /* --- 9. Accessibility and motion --- */
 
 .screen-reader-only {
@@ -1082,3 +1132,37 @@ footer .pkgdown-footer-left {
 		transition: transform 0.2s linear;
 	}
 }
+
+/* Keep inline links identifiable without relying on color. */
+main a:not(.anchor, .nav-link, .btn),
+footer a,
+#footer a,
+#copyright a {
+	text-decoration: underline;
+	text-underline-offset: 0.15em;
+}
+
+:is(a, button, input, select, textarea, [tabindex]):focus-visible {
+	outline: 2px solid currentColor;
+	outline-offset: 3px;
+}
+
+.navbar-toggler:focus-visible {
+	box-shadow: none;
+}
+
+/* diffviewer supplies its own light surfaces in either site theme. */
+:is(.visual_diff, .diffviewer) .d2h-tag {
+	color: #6b5700;
+}
+
+:is(.visual_diff, .diffviewer) .d2h-code-linenumber,
+:is(.visual_diff, .diffviewer) .d2h-code-side-linenumber,
+:is(.visual_diff, .diffviewer) .d2h-info {
+	color: #595959;
+}
+
+/* Override the inline color emitted by diffviewer. */
+:is(.visual_diff, .diffviewer) .link {
+	color: #595959 !important;
+}