From de0d0ab55fb9d2ddda604a2e4ec0e0d5df129346 Mon Sep 17 00:00:00 2001
From: dilgenfritz <drewilgenfritz@gmail.com>
Date: Tue, 11 Nov 2025 21:00:10 -0600
Subject: [PATCH]  Add stacked layout for Library theme - organized columns
 with proper spacing and styling

---
 index.html            |  5 +++++
 src/styles/styles.css | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/index.html b/index.html
index cea11e1..7814f60 100644
--- a/index.html
+++ b/index.html
@@ -1314,6 +1314,9 @@
             console.log('Applying theme:', theme);
             const characterSides = document.querySelectorAll('.character-side');
             
+            // Remove any existing theme classes
+            document.body.classList.remove('library-theme');
+            
             if (theme === 'none') {
                 characterSides.forEach(element => {
                     element.style.display = 'none';
@@ -1323,6 +1326,8 @@
             }
             
             if (theme === 'library') {
+                // Add library theme class for CSS targeting
+                document.body.classList.add('library-theme');
                 // Use random images from user's library
                 await applyLibraryTheme(characterSides);
                 localStorage.setItem('selectedTheme', theme);
diff --git a/src/styles/styles.css b/src/styles/styles.css
index dacc8b2..8921df4 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -6628,6 +6628,40 @@ button#start-mirror-btn:disabled {
     height: 300px;
 }
 
+/* Library Theme - Stacked Layout */
+.library-theme .character-side {
+    width: 120px !important;
+    height: 160px !important;
+    background-size: cover !important;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.library-theme .character-side.left {
+    left: 10px !important;
+    transform: none !important;
+}
+
+.library-theme .character-side.right {
+    right: 10px !important;
+    transform: none !important;
+}
+
+/* Stack left column from top */
+.library-theme .character-side.left:nth-of-type(1) { top: 20px !important; }
+.library-theme .character-side.left:nth-of-type(3) { top: 190px !important; }
+.library-theme .character-side.left:nth-of-type(5) { top: 360px !important; }
+.library-theme .character-side.left:nth-of-type(7) { top: 530px !important; }
+.library-theme .character-side.left:nth-of-type(9) { top: 700px !important; }
+
+/* Stack right column from top */
+.library-theme .character-side.right:nth-of-type(2) { top: 20px !important; }
+.library-theme .character-side.right:nth-of-type(4) { top: 190px !important; }
+.library-theme .character-side.right:nth-of-type(6) { top: 360px !important; }
+.library-theme .character-side.right:nth-of-type(8) { top: 530px !important; }
+.library-theme .character-side.right:nth-of-type(10) { top: 700px !important; }
+
 /* Background Characters */
 .character-background {
     position: absolute;