Browse Source

refactor: offcanvas nav → native CSS :target (drop Bootstrap offcanvas)

Replace Bootstrap's offcanvas component + its JS data-api with a self-contained
CSS-only drawer. The brand link is already <a href=#offcanvasNav>, so :target
drives the open state; a backdrop <a> and a × link close it.

- parts/header.html: strip data-bs-toggle/target; .offcanvas → .dw-offcanvas;
  add close × + click-to-close backdrop. (classic header.php delegates here.)
- css/styles.scss: drop @import bootstrap/scss/offcanvas + dead $offcanvas-*
  vars; add self-contained .dw-offcanvas styles (:target slide, backdrop,
  reduced-motion guard).

Offcanvas component fully gone from the bundle (backdrop/start/end/title = 0);
6 dead .offcanvas-body rules remain from _navbar.scss (removable only by
dropping the navbar import). Bootstrap JS still loads for the carousel.
Tradeoffs vs BS JS: no ESC-close, focus-trap, or scroll-lock.
windhamdavid 5 days ago
parent
commit
f2e484af3a
3 changed files with 54 additions and 7 deletions
  1. 50 5
      css/styles.scss
  2. 4 2
      parts/header.html
  3. 0 0
      v4-style.min.css

+ 50 - 5
css/styles.scss

@@ -51,8 +51,6 @@ $utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text"
 $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
 
 $enable-negative-margins: true;
-$offcanvas-horizontal-width: 200px !important;
-$offcanvas-vertical-height: 100px !important;
 
 
 /***********************************************************
@@ -60,8 +58,9 @@ $offcanvas-vertical-height: 100px !important;
    Dropped (unused in the theme): dropdown, button-group,
    accordion, breadcrumb, pagination, badge, alert, progress,
    toasts, modal, tooltip, popover, spinners, placeholders.
-   Kept: grid + offcanvas + carousel + nav/navbar + forms/
-   buttons + tables + list-group + card + the utilities API.
+   Kept: grid + carousel + nav/navbar + forms/buttons + tables
+   + list-group + card + the utilities API. (offcanvas nav is now
+   self-contained CSS via :target — see .dw-offcanvas in Overrides.)
    (Was the full ~200 KB framework.)
 ************************************************************/
 
@@ -84,7 +83,6 @@ $offcanvas-vertical-height: 100px !important;
 @import '../node_modules/bootstrap/scss/list-group';
 @import '../node_modules/bootstrap/scss/close';
 @import '../node_modules/bootstrap/scss/carousel';
-@import '../node_modules/bootstrap/scss/offcanvas';
 @import '../node_modules/bootstrap/scss/helpers';
 @import '../node_modules/bootstrap/scss/utilities/api';
 
@@ -116,3 +114,50 @@ $offcanvas-vertical-height: 100px !important;
   height: 2em;
   vertical-align: middle;
 }
+
+// Offcanvas top-nav — self-contained, CSS-only (replaces Bootstrap's offcanvas
+// component + JS). The brand link is <a href="#offcanvasNav">, so :target drives
+// the open state; a backdrop <a href="#"> and the × link close it. Tradeoffs vs
+// the BS JS version: no ESC-to-close, no focus-trap, no body-scroll-lock.
+.dw-offcanvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1045; // above .navbar.fixed-top (1030)
+  display: flex;
+  flex-direction: column;
+  height: 100px;
+  visibility: hidden;
+  transform: translateY(-100%);
+  transition: transform 0.3s ease-in-out, visibility 0.3s;
+  overflow-y: auto;
+}
+.dw-offcanvas:target {
+  visibility: visible;
+  transform: none;
+}
+.dw-offcanvas-close {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.75rem;
+  font-size: 1.75rem;
+  line-height: 1;
+  color: inherit;
+  text-decoration: none;
+}
+.dw-offcanvas-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1040; // below .dw-offcanvas
+  background: rgba(0, 0, 0, 0.4);
+}
+.dw-offcanvas:target ~ .dw-offcanvas-backdrop {
+  display: block;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dw-offcanvas {
+    transition: none;
+  }
+}

+ 4 - 2
parts/header.html

@@ -3,12 +3,13 @@
 	<div class="navbar fixed-top">
 		<div class="container">
 			<div class="site-title">
-        <a href="#offcanvasNav" class="navbar-brand navbar-right light"  data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav" aria-controls="offcanvasNav" title="David A. Windham" rel="home">David A. Windham</a>
+        <a href="#offcanvasNav" class="navbar-brand navbar-right light" aria-controls="offcanvasNav" title="David A. Windham" rel="home">David A. Windham</a>
 			</div>
 		</div>
 	</div>
 </header>
-<div class="offcanvas offcanvas-top text-bg-blue" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
+<div class="dw-offcanvas text-bg-blue" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
+  <a href="#" class="dw-offcanvas-close" aria-label="Close menu">&times;</a>
   <nav class="d-flex justify-content-center" role="navigation">
     <ul class="nav list-group list-group-horizontal pt-3 fs-5">
       <li class="list-group-item list-group-flush"><a href="/" aria-label="Home"><svg class="bi" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" style="vertical-align:-.125em" aria-hidden="true"><path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/></svg></a></li>
@@ -22,4 +23,5 @@
     </ul>
   </nav>
 </div>
+<a href="#" class="dw-offcanvas-backdrop" tabindex="-1" aria-hidden="true"></a>
 <!-- /wp:html -->

File diff suppressed because it is too large
+ 0 - 0
v4-style.min.css


Some files were not shown because too many files changed in this diff