From ddcb471eac5b65ca193cdac858a45d5b701acf2a Mon Sep 17 00:00:00 2001 From: Mark Eaton Date: Sat, 7 Feb 2026 22:34:36 -0500 Subject: [PATCH 01/53] add randomized background images --- groups/home/bootstrap5/home1.css | 6 ------ groups/home/bootstrap5/home1.js | 16 ++++++++++++++++ 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/groups/home/bootstrap5/home1.css b/groups/home/bootstrap5/home1.css index 0e1e405..8893973 100644 --- a/groups/home/bootstrap5/home1.css +++ b/groups/home/bootstrap5/home1.css @@ -204,12 +204,6 @@ /* style background image */ .kbcc-background-image { - background: linear-gradient( - to bottom, - rgba(255, 255, 255, 0.6) 0%, - rgba(255, 255, 255, 0.6) 100% - ), - url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg"); background-position: 50% 71%; padding: 20px 0; border-radius: 5px; diff --git a/groups/home/bootstrap5/home1.js b/groups/home/bootstrap5/home1.js index 4d2edcb..2aa3fd7 100644 --- a/groups/home/bootstrap5/home1.js +++ b/groups/home/bootstrap5/home1.js @@ -436,3 +436,19 @@ const app2 = createApp({ }); app2.mount("#app2"); +// Randomly set the background image for .kbcc-background-image +(function () { + const images = [ + "https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg", + "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/copy_for_it.jpg", + "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Library_Website_Background_Images_005.jpg", + "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Library_Website_Background_Images_002.jpg", + ]; + var picked = images[Math.floor(Math.random() * images.length)]; + var el = document.querySelector(".kbcc-background-image"); + if (el) { + el.style.backgroundImage = + "linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url('" + picked + "')"; + } +})(); + -- 2.40.1 From 5a2bc3b4cb98a515999c434ff9b8453da20554c5 Mon Sep 17 00:00:00 2001 From: Mark Eaton Date: Sat, 7 Feb 2026 23:22:21 -0500 Subject: [PATCH 02/53] move ES6 feature detection from home1.css to home1.js Combine the two inline script blocks into a single try/catch using new Function() so old browsers fail gracefully. Co-Authored-By: Claude Opus 4.6 --- groups/home/bootstrap5/home1.css | 37 -------------------------------- groups/home/bootstrap5/home1.js | 35 ++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 37 deletions(-) diff --git a/groups/home/bootstrap5/home1.css b/groups/home/bootstrap5/home1.css index 8893973..a216bc2 100644 --- a/groups/home/bootstrap5/home1.css +++ b/groups/home/bootstrap5/home1.css @@ -608,43 +608,6 @@ }); - - - - - - - - - - - - - - - - diff --git a/groups/home/bootstrap3/Vue3-v.6.html b/groups/home/bootstrap3/Vue3-v.6.html deleted file mode 100644 index 8aa4b45..0000000 --- a/groups/home/bootstrap3/Vue3-v.6.html +++ /dev/null @@ -1,356 +0,0 @@ - - - - - -
-
-
- -
-
-
- - - -
Login
-
- - - {{content_box_33471502}} -
- -
- -
-
- -
- -
- -
- -
-
-
-
-
- -
-
-
-
- - -
-

Databases

-
- - -
-

Research Guides

-
- - -
-

FAQ

-
- -
-
-
-
-
-
-
- -

Library Links

- -
-
-
-
- -
-
- -
-
-
-
-
-
-
-
- -

Featured in the Library

- -
-
{{content_box_25912431}}
-
-
-
-
-
-
- -
- - -
-
-
- -
-
-
-
- title - -
-
- Loading... - -
-
- - - - -
- - - - - - - - - -- 2.40.1 From a978df4af9453563b4bb1fd0c7793a0ff5222cc9 Mon Sep 17 00:00:00 2001 From: Mark Eaton Date: Sat, 21 Feb 2026 23:27:53 -0500 Subject: [PATCH 05/53] add dark/light mode toggle with OS preference detection Uses Bootstrap 5.3 data-bs-theme attribute for automatic component theming. Adds CSS custom properties for dark mode, a toggle button in the header, localStorage persistence, and a flash-prevention script. Background image overlay adjusts per theme. Co-Authored-By: Claude Opus 4.6 --- groups/home/bootstrap5/home1.css | 76 +++++++++++++++++++++++++++---- groups/home/bootstrap5/home1.html | 19 ++++++++ groups/home/bootstrap5/home1.js | 57 ++++++++++++++++++++++- 3 files changed, 142 insertions(+), 10 deletions(-) diff --git a/groups/home/bootstrap5/home1.css b/groups/home/bootstrap5/home1.css index 5f7a6ce..dd9aa35 100644 --- a/groups/home/bootstrap5/home1.css +++ b/groups/home/bootstrap5/home1.css @@ -3,11 +3,27 @@ --kbccblue: #003466; --kbccorange: #ff4e00; --text: #111; + --bg: #fff; + --bg-surface: #fff; + --hover-dark: #444; + --focus-outline: #0056b3; + --link-color: black; + } + + [data-bs-theme="dark"] { + --text: #e0e0e0; + --bg: #1a1a2e; + --bg-surface: #25253e; + --hover-dark: #555; + --focus-outline: #6ea8fe; + --link-color: #ccc; } body { color: var(--text); + background-color: var(--bg); overflow-x: hidden; + transition: background-color 0.3s ease, color 0.3s ease; } a, @@ -53,14 +69,14 @@ #hamburger:active { border: none; outline: none; - background-color: #fff; + background-color: var(--bg-surface); color: var(--kbccblue); } #hamburger::after { display: none; } #hamburger-ul > li > .searchmenu { - background-color: #fff; + background-color: var(--bg-surface); } #hamburger-ul { padding: 25px 0; @@ -133,7 +149,7 @@ /* Navigation dropdown toggles */ .dropdown-toggle:focus, .dropdown-toggle:focus-visible { - outline: 3px solid #0056b3; /* high-contrast blue */ + outline: 3px solid var(--focus-outline); /* high-contrast blue */ outline-offset: 2px; } @@ -153,8 +169,8 @@ /* style navbar */ nav.navbar-light.main-nav-container { - background-color: white !important; - background: white !important; + background-color: var(--bg-surface) !important; + background: var(--bg-surface) !important; border: none; font-size: 1.4em; color: var(--text); @@ -167,7 +183,7 @@ .nav .show > a, .nav .show > a:focus, .nav .show > a:hover { - background-color: #fff; + background-color: var(--bg-surface); } .nav > li > a:hover { outline: none; @@ -252,7 +268,7 @@ margin-top: 10px; } #advanced > strong > a { - color: black; + color: var(--link-color); } /* add flex so that blue box-shadows line up */ #flex-search-form { @@ -310,7 +326,7 @@ margin-top: 4px; } .nav-divs-by-jumbotron:hover { - background-color: #444; + background-color: var(--hover-dark); } #eq_32886 { background-color: var(--kbccblue); @@ -318,7 +334,7 @@ } .nav-divs-by-jumbotron:hover > h2 > #eq_32886, #eq_32886:hover { - background-color: #444; + background-color: var(--hover-dark); } #bookastudyroom { cursor: pointer; @@ -473,6 +489,48 @@ max-width: 150px; } + /* dark mode toggle button */ + #theme-toggle { + float: right; + background: none; + border: 2px solid var(--kbccblue); + color: var(--kbccblue); + border-radius: 50%; + width: 40px; + height: 40px; + font-size: 1.2em; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; + margin-top: 5px; + } + #theme-toggle:hover { + background-color: var(--kbccblue); + color: #fff; + } + [data-bs-theme="dark"] #theme-toggle { + border-color: #ffc107; + color: #ffc107; + } + [data-bs-theme="dark"] #theme-toggle:hover { + background-color: #ffc107; + color: #1a1a2e; + } + + /* card body dark mode background */ + .card-body { + background-color: var(--bg-surface); + transition: background-color 0.3s ease; + } + + /* dropdown menu dark mode background */ + .dropdown-menu { + background-color: var(--bg-surface); + transition: background-color 0.3s ease; + } + /* media queries */ @media only screen and (min-width: 1px) { diff --git a/groups/home/bootstrap5/home1.html b/groups/home/bootstrap5/home1.html index 522bf90..320e8a7 100644 --- a/groups/home/bootstrap5/home1.html +++ b/groups/home/bootstrap5/home1.html @@ -1,4 +1,15 @@ +