/*********************************************************** ############################################################ . . . . . . . . ...-..-| |-. .-. .-.-..-| .-.. ...-| ` ` '' '`-'-' '-`-`-' ' '`-'-`-`-` '`-'- url - https://davidawindham.com git - https://github.com/windhamdavid/daw need to test ############################################################ ************************************************************/ /*********************************************************** ################### Bootstrap Functions #################### ************************************************************/ @import '../node_modules/bootstrap/scss/functions'; @import '../node_modules/bootstrap/scss/variables'; @import '../node_modules/bootstrap/scss/variables-dark'; @import '../node_modules/bootstrap/scss/maps'; @import '../node_modules/bootstrap/scss/mixins'; /*********************************************************** ####################### Custom ############################ ************************************************************/ $body-bg: #d3d3d3; $body-color: #232323; $link-color: #67000a; $theme-colors: ( "dark": #535763, ); $custom-colors: ( 'dw-blue-dark': #484C57, 'dw-blue':#535763, 'dw-light':#e2e2e2, 'dw-bright':#e3e3e3, ); $theme-colors: map-merge($theme-colors, $custom-colors); $theme-colors: map-remove($theme-colors, 'primary','secondary','success','warning', 'info'); $colors: map-remove($colors, 'white','black','gray','gray-dark','dark','blue','indigo','purple','pink', 'orange', 'yellow', 'green', 'teal', 'cyan'); $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value"); $utilities-colors: map-merge($utilities-colors, $theme-colors-rgb); $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; /*********************************************************** ########## Bootstrap 5 — subset to used parts ############# Dropped (unused in the theme): dropdown, button-group, accordion, breadcrumb, pagination, badge, alert, progress, toasts, modal, tooltip, popover, spinners, placeholders. 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.) ************************************************************/ @import '../node_modules/bootstrap/scss/utilities'; @import '../node_modules/bootstrap/scss/root'; @import '../node_modules/bootstrap/scss/reboot'; @import '../node_modules/bootstrap/scss/type'; @import '../node_modules/bootstrap/scss/images'; @import '../node_modules/bootstrap/scss/containers'; @import '../node_modules/bootstrap/scss/grid'; @import '../node_modules/bootstrap/scss/tables'; @import '../node_modules/bootstrap/scss/forms'; @import '../node_modules/bootstrap/scss/buttons'; @import '../node_modules/bootstrap/scss/transitions'; @import '../node_modules/bootstrap/scss/nav'; @import '../node_modules/bootstrap/scss/navbar'; @import '../node_modules/bootstrap/scss/card'; @import '../node_modules/bootstrap/scss/pagination'; @import '../node_modules/bootstrap/scss/alert'; @import '../node_modules/bootstrap/scss/list-group'; @import '../node_modules/bootstrap/scss/close'; @import '../node_modules/bootstrap/scss/carousel'; @import '../node_modules/bootstrap/scss/helpers'; @import '../node_modules/bootstrap/scss/utilities/api'; /* Bootstrap Icons font dropped (2026-06-19): the header's 8 nav icons are now inline SVG in parts/header.html, so the full icon font + its ~2000 CSS rules are no longer imported. */ /*********************************************************** ##################### Overrides ############################ ************************************************************/ // Bootstrap 5.3 changed .table to default --bs-table-bg to --bs-body-bg // (it was transparent in 5.2). Keep the About icon grid transparent. .table.icons { --bs-table-bg: transparent; } // Sprite icons (dw_icon() / , from the FA Pro kit → icons.svg). // Sized like a font icon: 1em square, inherits text color. .dw-icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; } // Social icons (was fa-2x). Baseline-aligned since they stand alone. .dw-icon-2x { width: 2em; height: 2em; vertical-align: middle; } // Offcanvas top-nav — self-contained, CSS-only (replaces Bootstrap's offcanvas // component + JS). The brand link is , so :target drives // the open state; a backdrop 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; } } // Gallery carousel — CSS scroll-snap (replaces the Bootstrap carousel on the // art page). Swipe / trackpad / scrollbar natively; prev-next + arrow keys via // a tiny vanilla script (js/art.js). No autoplay (was 5s) by design. .dw-carousel { position: relative; } .dw-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; // Firefox &::-webkit-scrollbar { display: none; // WebKit } } .dw-carousel-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; justify-content: center; } .dw-carousel-prev, .dw-carousel-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; } .dw-carousel-prev { left: 1rem; } .dw-carousel-next { right: 1rem; } @media (prefers-reduced-motion: reduce) { .dw-carousel-track { scroll-behavior: auto; } }