New Commit: Modularize library and reader assets Replaces the monolithic `library` and `reader` CSS/JS bundles with structured module files under `assets/css` and `assets/js`, then wires `library/index.php` and `library/read/reader_template.php` to the new entrypoints. This removes the old legacy asset files and makes the frontend code easier to maintain, extend, and load by feature area.
Repository: Hestenb62/_legacy_backup
Author: Hesten Berger
Commit Message: Modularize library and reader assets Replaces the monolithic and CSS/JS bundles with structured module files under and , then wires and to the new entrypoints. This removes the old legacy asset files and makes the frontend code easier to maintain, extend, and load by feature area.
URL: https://github.com/Hestenb62/_legacy_backup/commit/5f23728e3015d7dc55da885a9f2cdddf148daf75
Code Changes:
diff --git a/assets/css/library.css b/assets/css/library.css
new file mode 100644
index 0000000..bb6d514
--- /dev/null
+++ b/assets/css/library.css
@@ -0,0 +1,10 @@
+@import url('./library/lib-librarylibrary-css-digital-lib.css');
+@import url('./library/lib-base-variables.css');
+@import url('./library/lib-hero-section.css');
+@import url('./library/lib-continue-reading-shelf.css');
+@import url('./library/lib-library-catalog-container.css');
+@import url('./library/lib-book-card-styling.css');
+@import url('./library/lib-subject-desks-sidebar-navigati.css');
+@import url('./library/lib-subject-research-workspace-pan.css');
+@import url('./library/lib-modals.css');
+@import url('./library/lib-responsive-breakpoints.css');
\ No newline at end of file
diff --git a/assets/css/library/lib-base-variables.css b/assets/css/library/lib-base-variables.css
new file mode 100644
index 0000000..761d22f
--- /dev/null
+++ b/assets/css/library/lib-base-variables.css
@@ -0,0 +1,145 @@
+/* ==========================================================================
+ 1. Base Variables, Theme Tokens & Page Layout
+ ========================================================================== */
+
+:root {
+ --lib-primary: var(--color-primary, #4f46e5);
+ --lib-primary-hover: var(--color-primary-hover, #4338ca);
+ --lib-secondary: var(--color-secondary, #ec4899);
+ --lib-accent: var(--color-accent, #06b6d4);
+ --lib-bg-surface: var(--color-content-bg, #ffffff);
+ --lib-bg-base: var(--color-base-bg, #f8fafc);
+ --lib-border: var(--color-border, rgba(0, 0, 0, 0.08));
+ --lib-text-main: var(--color-text-default, #0f172a);
+ --lib-text-muted: var(--color-text-secondary, #64748b);
+ --lib-radius-sm: 0.5rem;
+ --lib-radius-md: 0.75rem;
+ --lib-radius-lg: 1.25rem;
+ --lib-radius-xl: 1.75rem;
+ --lib-radius-full: 9999px;
+ --lib-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
+ --lib-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
+ --lib-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
+ --lib-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.12);
+}
+
+[data-theme="dark"],
+body.dark {
+ --lib-bg-surface: var(--color-content-bg, #1e293b);
+ --lib-bg-base: var(--color-base-bg, #0f172a);
+ --lib-border: var(--color-border, rgba(255, 255, 255, 0.1));
+ --lib-text-main: var(--color-text-default, #f8fafc);
+ --lib-text-muted: var(--color-text-secondary, #94a3b8);
+ --lib-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
+ --lib-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
+}
+
+/* Utility classes */
+.hidden {
+ display: none !important;
+}
+
+/* Main Container Layout */
+.library-main {
+ max-width: 1440px;
+ margin: 0 auto;
+ padding: 2rem 1.5rem 6rem 1.5rem;
+ font-family: var(--site-font-family, 'Outfit', 'Inter', -apple-system, sans-serif);
+ color: var(--lib-text-main);
+ position: relative;
+ z-index: 1;
+ display: flex;
+ gap: 2rem;
+}
+
+.library-workspace {
+ flex-grow: 1;
+ min-width: 0;
+ position: relative;
+}
+
+/* Workspace Panels */
+.workspace-panel {
+ display: block;
+ width: 100%;
+ transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
+}
+
+.workspace-panel.hidden {
+ display: none !important;
+ opacity: 0;
+}
+
+/* Aurora Mesh Background */
+.library-aurora-bg {
+ position: fixed;
+ inset: 0;
+ overflow: hidden;
+ pointer-events: none;
+ z-index: -10;
+ transition: background-color 0.5s ease;
+}
+
+.library-aurora-blob {
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(90px);
+ opacity: 0.18;
+ will-change: transform;
+ mix-blend-mode: multiply;
+ animation: float-aurora-blob 22s infinite ease-in-out;
+}
+
+[data-theme="dark"] .library-aurora-blob,
+body.dark .library-aurora-blob {
+ mix-blend-mode: screen;
+ opacity: 0.12;
+}
+
+.blob-1 {
+ top: -10%;
+ left: -5%;
+ width: 60vw;
+ height: 60vw;
+ background-color: var(--lib-primary);
+}
+
+.blob-2 {
+ top: 25%;
+ right: -5%;
+ width: 50vw;
+ height: 50vw;
+ background-color: var(--lib-secondary);
+ animation-delay: -5s;
+ animation-duration: 25s;
+}
+
+.blob-3 {
+ bottom: -10%;
+ left: 20%;
+ width: 45vw;
+ height: 45vw;
+ background-color: var(--lib-accent);
+ animation-delay: -10s;
+ animation-duration: 20s;
+}
+
+@keyframes float-aurora-blob {
+ 0%, 100% { transform: translate(0, 0) scale(1); }
+ 33% { transform: translate(3vw, -5vh) scale(1.06); }
+ 66% { transform: translate(-3vw, 4vh) scale(0.94); }
+}
+
+/* Animations */
+.library-animate-reveal {
+ animation: libRevealUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+ opacity: 0;
+ transform: translateY(20px);
+}
+
+@keyframes libRevealUp {
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
diff --git a/assets/css/library/lib-book-card-styling.css b/assets/css/library/lib-book-card-styling.css
new file mode 100644
index 0000000..478315d
--- /dev/null
+++ b/assets/css/library/lib-book-card-styling.css
@@ -0,0 +1,228 @@
+/* ==========================================================================
+ 5. Book Card Styling
+ ========================================================================== */
+
+.library-book-card {
+ position: relative;
+ cursor: pointer;
+ transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+ outline: none;
+ text-align: left;
+}
+
+.library-book-card:focus-visible {
+ box-shadow: 0 0 0 3px var(--lib-primary);
+ border-radius: var(--lib-radius-lg);
+}
+
+.library-book-cover-wrap {
+ position: relative;
+ width: 100%;
+ aspect-ratio: 2 / 3;
+ border-radius: var(--lib-radius-lg);
+ overflow: hidden;
+ background-color: #0f172a;
+ box-shadow: var(--lib-shadow-md);
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+ margin-bottom: 0.85rem;
+}
+
+.library-book-card:hover .library-book-cover-wrap {
+ transform: translateY(-6px) scale(1.02);
+ box-shadow: var(--lib-shadow-xl);
+}
+
+.library-book-cover-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ transition: transform 0.4s ease;
+}
+
+.library-book-card:hover .library-book-cover-img {
+ transform: scale(1.05);
+}
+
+/* Badges */
+.library-book-badge-grade {
+ position: absolute;
+ top: 0.75rem;
+ left: 0.75rem;
+ background: rgba(15, 23, 42, 0.85);
+ backdrop-filter: blur(8px);
+ color: #ffffff;
+ font-size: 0.7rem;
+ font-weight: 800;
+ padding: 0.25rem 0.6rem;
+ border-radius: var(--lib-radius-full);
+ z-index: 5;
+ border: 1px solid rgba(255, 255, 255, 0.15);
+ display: flex;
+ align-items: center;
+ gap: 0.35rem;
+}
+
+.library-book-badge-collection {
+ position: absolute;
+ bottom: 0.75rem;
+ left: 0.75rem;
+ background: linear-gradient(135deg, var(--lib-primary), var(--lib-secondary));
+ color: #ffffff;
+ font-size: 0.68rem;
+ font-weight: 800;
+ padding: 0.25rem 0.65rem;
+ border-radius: var(--lib-radius-full);
+ z-index: 5;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+ display: flex;
+ align-items: center;
+ gap: 0.35rem;
+}
+
+/* Bookmark Favorite Button */
+.library-book-bookmark-btn {
+ position: absolute;
+ top: 0.75rem;
+ right: 0.75rem;
+ width: 2.1rem;
+ height: 2.1rem;
+ border-radius: 50%;
+ background: rgba(15, 23, 42, 0.8);
+ backdrop-filter: blur(8px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ color: #f8fafc;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.85rem;
+ z-index: 10;
+ transition: all 0.2s ease;
+}
+
+.library-book-bookmark-btn:hover {
+ background: #f59e0b;
+ color: #ffffff;
+ border-color: #f59e0b;
+ transform: scale(1.15);
+}
+
+.library-book-bookmark-btn.bookmarked {
+ background: #f59e0b;
+ color: #ffffff;
+ border-color: #f59e0b;
+}
+
+/* Reading Progress Bar Overlay */
+.book-progress-track {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 4px;
+ background-color: rgba(0, 0, 0, 0.4);
+ z-index: 8;
+}