@howssatoshi/quantumcss 1.11.2 → 1.11.4

package/examples/admin-panel.html

@@ -71,6 +71,24 @@
                 display: none;
             }
             
+            .top-nav-actions {
+                gap: 0.5rem;
+                flex-wrap: wrap;
+                justify-content: flex-end;
+            }
+            
+            .top-nav {
+                flex-wrap: wrap;
+                gap: 0.5rem;
+            }
+            .top-nav > div:first-child {
+                flex: 1 1 100%;
+                min-width: 0;
+            }
+            .breadcrumb {
+                flex-wrap: wrap;
+            }
+            
             .app-layout {
                 grid-template-columns: 1fr;
             }
@@ -82,12 +100,6 @@
             table {
                 min-width: 800px;
             }
-            
-            .page-header {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 1rem;
-            }
         }
 
         /* Animations */

package/examples/analytics-dashboard.html

@@ -324,9 +324,15 @@
             }
             
             .page-header {
-                flex-direction: row;
-                align-items: center;
-                gap: 1.5rem;
+                flex-wrap: wrap;
+                align-items: flex-start;
+                gap: 1rem;
+            }
+            .page-header > div:first-child {
+                flex: 1 1 100%;
+            }
+            .page-actions {
+                justify-content: flex-start;
             }
         }
 
@@ -401,17 +407,17 @@
             </nav>
 
             <div class="aside-nav-footer">
-                <div class="aside-nav-user" onclick="toggleTheme()" style="cursor: pointer;" title="Click to Toggle Theme">
+                <div class="aside-nav-user">
                     <div class="aside-nav-user-avatar">JD</div>
                     <div class="aside-nav-user-info">
                         <strong>John Doe</strong>
                         <span>Admin Profile</span>
                     </div>
-                    <div class="ml-auto aside-nav-user-action">
-                        <i class="q-icon-display opacity-50"></i>
-                        <i class="q-icon-sun sun-icon hidden opacity-50"></i>
-                        <i class="q-icon-moon moon-icon hidden opacity-50"></i>
-                    </div>
+                </div>
+                <div class="aside-nav-user-action" onclick="toggleTheme()" style="cursor: pointer;" title="Click to Toggle Theme">
+                    <i class="q-icon-display opacity-50"></i>
+                    <i class="q-icon-sun sun-icon hidden opacity-50"></i>
+                    <i class="q-icon-moon moon-icon hidden opacity-50"></i>
                 </div>
             </div>
         </aside>

package/examples/chat-messaging.html

@@ -13,6 +13,7 @@
             height: 100vh;
             background: var(--q-color-bg, #08081a);
             overflow: hidden;
+            position: relative;
         }
         .chat-sidebar {
             background: linear-gradient(180deg, color-mix(in srgb, var(--q-color-bg), white 2%) 0%, var(--q-color-bg) 100%);
@@ -67,13 +68,49 @@
         .theme-btn { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--q-color-surface); border: 1px solid var(--q-color-border); border-radius: 0.75rem; color: var(--q-text-primary, #f1f5f9); cursor: pointer; transition: all 0.2s ease; }
         .theme-btn:hover { background: var(--q-highlight-bg); }
         .theme-label { font-size: 0.875rem; font-weight: 500; }
+        .chat-sidebar-toggle { display: none; }
         html[data-theme="light"] { --bg-primary: var(--q-light-bg); --text-primary: var(--q-light-text); --text-secondary: var(--q-light-text-muted); --text-muted: var(--q-light-text-muted); }
         html[data-theme="light"] .message.received .message-bubble { background: #fff; border: 1px solid #e2e8f0; color: #0f172a; }
         html[data-theme="light"] .message.sent .message-bubble { background: var(--q-color-primary); color: #fff; }
-        @media (max-width: 768px) { .chat-app { grid-template-columns: 1fr; } .chat-sidebar { display: none; } .message { max-width: 85%; } }
+        @media (max-width: 768px) { 
+            .chat-app { grid-template-columns: 1fr; } 
+            .chat-sidebar {
+                position: fixed;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                width: 300px;
+                transform: translateX(-100%);
+                z-index: 200;
+                transition: transform 0.3s ease;
+            }
+            .chat-sidebar-toggle {
+                display: flex;
+                cursor: pointer;
+                padding: 0.5rem;
+                z-index: 10;
+            }
+            .sidebar-header { 
+                padding: 1.25rem; 
+                border-bottom: 1px solid var(--q-color-border);
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+            }
+            .sidebar-header-top {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            #chat-sidebar-toggle:checked ~ .chat-app .chat-sidebar {
+                transform: translateX(0);
+            }
+            .message { max-width: 85%; } 
+        }
     </style>
 </head>
 <body>
+    <input type="checkbox" id="chat-sidebar-toggle" class="hidden">
     <div class="chat-app">
         <aside class="chat-sidebar">
             <div class="sidebar-header">
@@ -175,9 +212,9 @@
                     <button class="icon-btn icon-btn-circle">
                         <i class="q-icon-video"></i>
                     </button>
-                    <button class="icon-btn icon-btn-circle">
+                    <label for="chat-sidebar-toggle" class="icon-btn icon-btn-circle" style="cursor: pointer;">
                         <i class="q-icon-more-vertical"></i>
-                    </button>
+                    </label>
                 </div>
             </div>
             <div class="messages-container">

package/examples/email-client.css

@@ -335,23 +335,36 @@ email-header {
     align-items: center;
     padding: 0 var(--side-padding);
     flex-shrink: 0;
+    gap: 1rem;
 }
 html[data-theme="light"] email-header {
     background: #f8fafc;
 }
 email-header .spacer {
-    flex: 1;
+    flex: 0;
 }
 email-header .email-subject {
     font-size: 1.25rem;
     font-weight: 700;
     color: #f1f5f9;
     margin: 0;
+    flex: 1;
+    min-width: 0;
+    align-self: center;
+    line-height: 1.2;
 }
 html[data-theme="light"] email-header .email-subject {
     color: #0f172a;
 }
 
+email-header actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-shrink: 0;
+    margin-left: auto;
+}
+
 email-view {
     flex: 1;
     overflow-y: auto;
@@ -567,6 +580,8 @@ html[data-theme="light"] .nav-toggle i {
         transform: translateX(100%);
         transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         width: 100vw;
+        display: flex;
+        flex-direction: column;
     }
 
     html[data-theme="light"] email-content {
@@ -579,4 +594,50 @@ html[data-theme="light"] .nav-toggle i {
     content-top-bar .mobile-back {
         display: flex;
     }
+    
+    content-top-bar {
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        min-height: 60px;
+        max-height: none;
+        height: auto;
+    }
+    content-top-bar .mobile-back {
+        width: 100%;
+        flex-basis: 100%;
+        margin-bottom: 0.25rem;
+    }
+    content-top-bar user-cell {
+        flex: 1 1 calc(100% - 80px);
+        min-width: 150px;
+    }
+    content-top-bar email-time-full {
+        flex: 0 0 auto;
+        font-size: 0.75rem;
+    }
+    
+    email-header {
+        flex-wrap: wrap;
+        padding: 0.5rem 0.75rem;
+        min-height: 44px;
+        height: auto;
+        gap: 0.5rem;
+    }
+    email-header .email-subject {
+        font-size: 1rem;
+        order: 1;
+        flex: 1 1 100%;
+        width: 100%;
+        align-self: center;
+    }
+    email-header .spacer {
+        display: none;
+    }
+    email-header actions {
+        order: 2;
+        display: flex;
+        gap: 0.25rem;
+        margin-left: auto;
+    }
 }

package/examples/index.html

@@ -12,6 +12,22 @@
                 background: transparent !important;
             }
 
+            @media (max-width: 640px) {
+                .hero .flex {
+                    flex-direction: column;
+                    gap: 0.75rem !important;
+                    align-items: stretch;
+                }
+                .hero .flex button,
+                .hero .flex a {
+                    width: 100%;
+                    justify-content: center;
+                }
+                header.hero .pt-8 { padding-top: 2rem; }
+                header.hero h1 { font-size: 2.5rem; }
+                header.hero .pb-12 { padding-bottom: 2rem; }
+            }
+
             /* Theme Toggle specific local style */
             .theme-toggle {
                 position: fixed;
@@ -169,7 +185,7 @@
             <div class="pt-8 pb-12 text-center">
                 <span
                     class="text-[10px] font-black tracking-[0.3em] text-accent uppercase mb-6 block"
-                    >QuantumCSS v1.11.2</span
+                    >QuantumCSS v1.11.4</span
                 >
                 <h1
                     class="text-7xl md:text-8xl text-gradient font-black uppercase italic tracking-tighter mb-8"

package/examples/kitchen-sink.html

@@ -45,6 +45,8 @@
             display: flex; justify-content: space-between; align-items: center; 
             margin-bottom: 1.5rem; cursor: pointer;
         }
+        .designer-header i { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
+        .designer-panel.minimized .designer-header i { transform: rotate(180deg); }
         .designer-title { font-weight: 900; font-size: 0.75rem; text-transform: uppercase; tracking-widest; opacity: 0.8; }
         .control-group { margin-bottom: 1.25rem; }
         .control-label { display: flex; justify-content: space-between; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; margin-bottom: 0.5rem; opacity: 0.6; }
@@ -1067,7 +1069,11 @@
                 <!-- Vertical Navigation -->
                 <div class="starlight-card p-0">
                     <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Vertical Sidebar (.aside-nav)</div>
-                    <div class="flex h-[400px] overflow-hidden">
+                    <div class="flex h-[400px] overflow-hidden relative">
+                        <input type="checkbox" id="sidebar-toggle-mobile" class="hidden">
+                        <label for="sidebar-toggle-mobile" class="aside-nav-trigger">
+                            <span class="aside-nav-trigger-icon"><span></span><span></span><span></span></span>
+                        </label>
                         <aside class="aside-nav" aria-label="Sidebar navigation">
                             <div class="aside-nav-header">
                                 <a href="/" class="nav-logo" aria-label="Starlight OS">
@@ -1382,7 +1388,7 @@
                     <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Tab Interface (.tab-list)</div>
                     <div class="p-8">
                         <div class="max-w-2xl mx-auto">
-                            <div class="tab-list mb-4">
+                            <div class="tab-list mb-4 touch-slide">
                                 <button class="tab-button active" data-tab="tab-overview">Overview</button>
                                 <button class="tab-button" data-tab="tab-specs">Specifications</button>
                                 <button class="tab-button" data-tab="tab-logs">System Logs</button>

package/examples/music-streaming.html

@@ -26,6 +26,60 @@
             display: flex;
             flex-direction: column;
             overflow-y: auto;
+            position: relative;
+        }
+
+        .sidebar-overlay {
+            display: none;
+        }
+
+        @media (max-width: 768px) {
+            .music-sidebar {
+                position: fixed;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                width: 260px;
+                transform: translateX(-100%);
+                z-index: 200;
+                transition: transform 0.3s ease;
+            }
+            #music-sidebar-toggle:checked ~ .music-app .music-sidebar {
+                transform: translateX(0);
+            }
+            .sidebar-overlay {
+                display: block;
+                position: fixed;
+                inset: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 199;
+                opacity: 0;
+                pointer-events: none;
+                transition: opacity 0.3s ease;
+            }
+            #music-sidebar-toggle:checked ~ .music-app .sidebar-overlay {
+                opacity: 1;
+                pointer-events: auto;
+            }
+            .sidebar-toggle {
+                display: flex;
+            }
+            
+            .music-sidebar .music-logo span,
+            .music-sidebar .nav-title,
+            .music-sidebar .nav-item span,
+            .music-sidebar .create-playlist-btn span {
+                display: inline;
+            }
+            
+            .music-sidebar .nav-item {
+                justify-content: flex-start !important;
+                padding: 0.75rem 1rem;
+            }
+            
+            .music-sidebar .music-logo {
+                justify-content: flex-start;
+            }
         }
 
         .music-logo {
@@ -470,6 +524,9 @@
             font-weight: 600;
             color: var(--text-primary, #f1f5f9);
             margin-bottom: 0.25rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         .now-playing-artist {
@@ -730,6 +787,12 @@
             .player-bar {
                 grid-template-columns: 200px 1fr 200px;
             }
+            
+            .now-playing-title {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
         }
 
         @media (max-width: 768px) {
@@ -738,10 +801,6 @@
                 grid-template-rows: 1fr auto 80px;
             }
             
-            .music-sidebar {
-                display: none;
-            }
-            
             .main-content {
                 padding: 1rem;
             }
@@ -800,7 +859,9 @@
     </style>
 </head>
 <body>
+    <input type="checkbox" id="music-sidebar-toggle" class="hidden">
     <div class="music-app">
+        <label for="music-sidebar-toggle" class="sidebar-overlay"></label>
         <!-- Sidebar -->
         <aside class="music-sidebar">
             <div class="music-logo">
@@ -917,9 +978,9 @@
                 <button class="action-icon liked">
                     <i class="q-icon-heart-fill w-8 h-8"></i>
                 </button>
-                <button class="action-icon">
+                <label for="music-sidebar-toggle" class="action-icon sidebar-toggle" style="cursor: pointer;">
                     <i class="q-icon-more-horizontal-fill w-7 h-7"></i>
-                </button>
+                </label>
             </div>
 
             <!-- Track List -->

package/examples/news.html

@@ -66,23 +66,49 @@
         @media (min-width: 768px) {
             .nav-header .btn-secondary { display: block; }
         }
+
+        /* Responsive Nav Tweak for Medium Screens */
+        @media (min-width: 640px) and (max-width: 1024px) {
+            .nav-header .nav-links a {
+                font-size: 0.75rem;
+                padding: 0.4rem 0.3rem;
+                letter-spacing: -0.02em;
+            }
+            .nav-header .nav-links {
+                gap: 0;
+            }
+            .nav-header .text-2xl, .nav-header .sm\:text-4xl {
+                font-size: 1.5rem !important; /* Scale logo down for md range */
+            }
+            .nav-header .px-6 {
+                padding-left: 1rem !important;
+                padding-right: 1rem !important;
+            }
+            .nav-header .gap-4 {
+                gap: 0.5rem !important;
+            }
+            .nav-header .btn-secondary {
+                padding-left: 1rem !important;
+                padding-right: 1rem !important;
+            }
+        }
     </style>
 </head>
 <body class="bg-surface">
     <!-- Navigation -->
     <input type="checkbox" id="nav-toggle" class="nav-toggle" />
     <header class="nav-header">
-        <div class="container mx-auto px-6 flex items-center justify-between w-full h-full">
+        <div class="mx-auto px-6 flex items-center justify-between w-full h-full">
             <div class="text-2xl sm:text-4xl font-bold tracking-tighter uppercase italic text-primary shrink-0">QUANTUM<span class="text-blue-600">NEWS</span></div>
             
-            <nav class="nav-links space-x-12 text-xs font-black uppercase tracking-widest flex-1 justify-center">
+            <nav class="nav-links flex-1 justify-center">
                 <a href="#" class="transition-colors">Neural Mesh</a>
                 <a href="#" class="transition-colors">Bio-Tech</a>
                 <a href="#" class="transition-colors">Space-X</a>
                 <a href="#" class="transition-colors">Quantum Compute</a>
             </nav>
 
-            <div class="flex items-center gap-6 shrink-0">
+            <div class="flex items-center gap-4">
                 <div id="theme-btn" class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
                     <i class="q-icon-display"></i>
                     <i class="q-icon-sun sun-icon"></i>

package/examples/nova-shop.css

@@ -977,6 +977,7 @@ html[data-theme="light"] .search-bar-input {
 
 /* ── Responsive ── */
 @media (max-width: 768px) {
+  .hero h1 { font-size: 2rem; }
   .hero-stats { gap: 1.5rem; flex-wrap: wrap; }
   .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
   .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

package/examples/portfolio.html

@@ -146,6 +146,22 @@
             <h2 class="text-5xl font-black uppercase italic mb-12">Release History</h2>
             
             <div class="starlight-timeline">
+                <div class="timeline-item">
+                    <div class="timeline-dot"></div>
+                    <div class="timeline-content">
+                        <span class="timeline-date">March 2026</span>
+                        <h3 class="text-xl font-bold mb-2">v1.11.4: Navigation & UI Refinement</h3>
+                        <p class="opacity-70 text-sm">Polished nav-header scaling for medium displays, fixed flex-1 overflow in travel/news templates, improved icon visibility in light mode, and refined icon-only sidebar layouts.</p>
+                    </div>
+                </div>
+                <div class="timeline-item">
+                    <div class="timeline-dot"></div>
+                    <div class="timeline-content">
+                        <span class="timeline-date">March 2026</span>
+                        <h3 class="text-xl font-bold mb-2">v1.11.3: Touch Slide Navigation</h3>
+                        <p class="opacity-70 text-sm">Added touch-slide class for mobile horizontal swipe navigation in shopping template navbar actions and kitchen-sink.html tab-list.</p>
+                    </div>
+                </div>
                 <div class="timeline-item">
                     <div class="timeline-dot"></div>
                     <div class="timeline-content">

package/examples/shopping.html

@@ -38,7 +38,7 @@
                     </ul>
 
                     <!-- Actions -->
-                    <div class="flex items-center gap-3">
+                    <div class="flex items-center gap-3 nav-actions touch-slide">
                         <div class="search-bar-wrap">
                             <span class="search-icon-pos">
                                 <i class="q-icon-search w-3.5 h-3.5"></i>

package/examples/travel.html

@@ -40,6 +40,12 @@
                 z-index: -1;
                 transition: opacity 0.5s ease;
             }
+            @media (max-width: 768px) {
+                .hero-glow {
+                    width: 100%;
+                    right: -50%;
+                }
+            }
             html[data-theme="light"] .hero-glow { opacity: 0; }
 
             /* Theme Toggle Styling */
@@ -84,6 +90,22 @@
             @media (min-width: 768px) {
                 .nav-header .btn-starlight { display: block; }
             }
+            
+            @media (max-width: 900px) {
+                .nav-header .nav-links {
+                    gap: 0.75rem !important;
+                }
+            }
+            
+            @media (max-width: 768px) {
+                .starlight-hero h1 { font-size: 2.5rem; }
+                .starlight-hero p { font-size: 1rem; padding: 0 1rem; }
+                .starlight-hero form { padding: 1.5rem; }
+                .starlight-hero form input { font-size: 1rem !important; }
+                .starlight-hero form button { width: 100%; }
+                .container { padding-left: 1rem; padding-right: 1rem; }
+                .starlight-footer .container > div { grid-template-columns: 1fr; }
+            }
             html[data-theme="light"] .nav-header a { color: var(--q-light-text-muted) !important; }
             html[data-theme="light"] .nav-header a:hover { color: var(--q-color-primary) !important; }
             html[data-theme="light"] .text-gradient {
@@ -192,6 +214,11 @@
                 background: var(--q-color-primary);
                 color: white;
             }
+            html[data-theme="light"] .date-picker-input,
+            html[data-theme="light"] input[placeholder="Where to?"] {
+                background: white;
+                color: #1e293b;
+            }
         </style>
     </head>
     <body class="text-primary">
@@ -203,7 +230,7 @@
             <div class="container mx-auto px-6 flex items-center justify-between w-full">
                 <h1 class="text-3xl font-black tracking-tighter text-gradient uppercase">NEBULA</h1>
                 
-                <nav class="nav-links space-x-12 text-[11px] font-black uppercase tracking-[0.2em] flex-1 justify-center">
+                <nav class="nav-links flex-1 uppercase justify-center">
                     <a href="#" class="hover:text-starlight-blue transition-colors">Destinations</a>
                     <a href="#" class="hover:text-starlight-blue transition-colors">Cruises</a>
                     <a href="#" class="hover:text-starlight-blue transition-colors">Excursions</a>
@@ -216,7 +243,7 @@
                         <i class="q-icon-sun sun-icon"></i>
                         <i class="q-icon-moon moon-icon"></i>
                     </button>
-                    <button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest">Book Now</button>
+                    <button class="btn-starlight px-8 h-12 text-[10px] font-black uppercase tracking-widest" style="white-space: nowrap;">Book Now</button>
                     <label for="nav-toggle" class="nav-hamburger" aria-label="Toggle menu">
                         <span class="nav-hamburger-icon"><span></span><span></span><span></span></span>
                     </label>