@howssatoshi/quantumcss 1.10.1 → 1.11.0

package/examples/blog.css

@@ -0,0 +1,297 @@
+/* Global Styles & Reset */
+:root {
+    --starlight-deep: #020617;
+    --primary: #f8fafc;
+    --secondary: #94a3b8;
+    --accent: #00d4ff;
+    --highlight: rgba(0, 212, 255, 0.1);
+    --accent-glow: rgba(0, 212, 255, 0.35);
+}
+
+.container {
+    max-width: 1280px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.nav-header {
+    padding: 0;
+    gap: 0;
+}
+
+body {
+    background-color: var(--starlight-deep) !important;
+    color: var(--primary);
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    min-height: 100-vh;
+    margin: 0;
+    overflow-x: hidden;
+}
+
+/* Main Content Layout */
+main {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 6rem 1.5rem;
+}
+
+main > div {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 4rem;
+}
+
+@media (min-width: 1024px) {
+    main > div {
+        grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+    
+    article {
+        grid-column: span 8 / span 8;
+    }
+    
+    aside {
+        grid-column: span 4 / span 4;
+    }
+}
+
+/* Article Styles */
+article {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem; /* Standard content gap (40px) */
+}
+
+/* Major section transitions (Header and Featured Image) */
+article > header, 
+article > div:nth-child(2) {
+    margin-bottom: 1.5rem; /* Adds to the 2.5rem gap to create a 4rem (64px) gap */
+}
+
+/* Article Tags section transition */
+article > div:last-of-type {
+    margin-top: 1.5rem; /* Creates the larger 4rem gap before tags */
+}
+
+article > header {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+article > header > div:first-child {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    font-size: 0.875rem;
+    color: var(--secondary);
+}
+
+article > header > div:last-child {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding-top: 1rem;
+}
+
+article > header > div:last-child p:first-child {
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    margin: 0;
+}
+
+article > header > div:last-child p:last-child {
+    font-size: 0.75rem;
+    color: var(--secondary);
+    font-weight: 500;
+    margin: 0;
+}
+
+/* Featured Image */
+article > div:nth-child(2) {
+    border-radius: 1rem;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(8px);
+    padding: 0.25rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+article > div:nth-child(2) > div {
+    aspect-ratio: 16 / 9;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 0.75rem;
+    position: relative;
+    overflow: hidden;
+}
+
+article > div:nth-child(2) img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Content Body */
+article > p:first-of-type {
+    font-size: 1.5rem;
+    font-weight: 500;
+    color: var(--primary);
+}
+
+article p {
+    font-size: 1.125rem;
+    line-height: 1.75;
+    color: #cbd5e1;
+    margin-bottom: 0;
+}
+
+h2 {
+    font-size: 1.875rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+/* Tags */
+article > div:last-of-type {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding-top: 2rem;
+    margin-top: 3rem;
+}
+
+article > div:last-of-type span {
+    font-size: 0.875rem;
+    color: #64748b;
+    margin-right: 0.5rem;
+}
+
+aside {
+    gap: 2rem;
+}
+
+aside > div:last-child h3 {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #64748b;
+}
+
+aside > div:last-child a {
+    display: block;
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(8px);
+    padding: 1rem;
+    border-radius: 0.75rem;
+    text-decoration: none;
+    margin-bottom: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    transition: background 0.3s;
+}
+
+aside > div:last-child a:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+aside > div:last-child h4 {
+    font-weight: 700;
+    color: var(--primary);
+    margin: 0;
+}
+
+aside > div:last-child a p {
+    font-size: 0.75rem;
+    color: #64748b;
+    margin: 0.25rem 0 0;
+}
+
+/* Theme Toggle (Re-used from original) */
+.theme-toggle {
+    cursor: pointer;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: background 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.theme-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+html[data-theme="light"] .theme-toggle:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+html[data-theme="light"] {
+    background-color: #f8fafc;
+    color: #1e293b;
+}
+
+html[data-theme="light"] body {
+    background-color: #f8fafc !important;
+    color: #1e293b;
+}
+
+html[data-theme="light"] .nav-header {
+    background: rgba(248, 250, 252, 0.9);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="light"] h1,
+html[data-theme="light"] h2,
+html[data-theme="light"] h3,
+html[data-theme="light"] h4 {
+    color: #0f172a !important;
+}
+
+html[data-theme="light"] article p,
+html[data-theme="light"] .card p,
+html[data-theme="light"] .glass p,
+html[data-theme="light"] .blue-card {
+    color: #1e293b !important;
+}
+
+html[data-theme="light"] .glass {
+    background: rgba(255, 255, 255, 0.8) !important;
+    border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+html[data-theme="light"] .card {
+    background: white;
+    border-color: #e2e8f0;
+}
+
+html[data-theme="light"] aside > div:last-child a {
+    background: rgba(0, 0, 0, 0.02);
+    border-color: rgba(0, 0, 0, 0.05);
+}
+
+html[data-theme="light"] aside > div:last-child a:hover {
+    background: rgba(0, 0, 0, 0.04);
+}
+
+html[data-theme="light"] .code-window {
+    background: #f1f5f9;
+    border-color: #e2e8f0;
+}
+
+html[data-theme="light"] .code-window pre {
+    color: #1e293b;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: .5; }
+}

package/examples/blog.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Starlight Blog Template</title>
+  <link rel="stylesheet" href="../dist/quantum.min.css">
+  <link rel="stylesheet" href="blog.css">
+  <script src="../src/starlight.js"></script>
+</head>
+<body>
+
+  <!-- ── Starfield ── -->
+  <div class="stars-bg" id="stars"></div>
+  
+  <!-- Navigation -->
+  <input type="checkbox" id="nav-toggle" class="nav-toggle" />
+  <header class="nav-header">
+    <div class="container">
+      <label class="nav-hamburger" for="nav-toggle">
+        <span class="nav-hamburger-icon">
+          <span></span>
+          <span></span>
+          <span></span>
+        </span>
+      </label>
+      <a href="#" class="nav-logo">
+        <i class="q-icon-starlight"></i>
+        <span class="text-gradient font-bold">StarlightBlog</span>
+      </a>
+      <nav class="nav-links">
+        <a href="#">Home</a>
+        <a href="#">Articles</a>
+        <a href="#">About</a>
+      </nav>
+      <div class="theme-toggle" title="Toggle Theme" onclick="toggleTheme()">
+        <i class="q-icon-display"></i>
+        <i class="q-icon-sun sun-icon"></i>
+        <i class="q-icon-moon moon-icon"></i>
+      </div>
+    </div>
+  </header>
+
+  <!-- Mobile Drawer -->
+  <div class="nav-drawer">
+    <div class="nav-drawer-inner">
+      <a href="#">Home</a>
+      <a href="#">Articles</a>
+      <a href="#">About</a>
+    </div>
+  </div>
+
+  <!-- Main Content -->
+  <main>
+    <div>
+      
+      <!-- Article Column -->
+      <article>
+        
+        <!-- Header -->
+        <header>
+          <div>
+            <span class="badge-primary">Technology</span>
+            <span>•</span>
+            <time datetime="2026-02-01">February 1, 2026</time>
+            <span>•</span>
+            <span>5 min read</span>
+          </div>
+          
+          <h1>
+            The Future of <span class="text-gradient">UI Design</span>
+          </h1>
+
+          <div>
+            <img src="images/eric.png" class="avatar" alt="Eric Yang">
+            <div>
+              <p>Eric Yang</p>
+              <p>Frontend Architect</p>
+            </div>
+          </div>
+        </header>
+
+        <!-- Featured Image -->
+        <div>
+          <div>
+            <img src="images/starlight.jpg" alt="Starlight Aesthetics" class="w-full h-full object-cover">
+          </div>
+        </div>
+
+        <!-- Content -->
+        <p>
+          Glassmorphism, neon glows, and deep gradients are making a comeback. Powered by modern CSS, they create an immersive experience.
+        </p>
+          
+        <h2>
+          <span class="accent-bar"></span>
+          The Starlight Paradigm
+        </h2>
+        <p>
+          The "Starlight" aesthetic combines the ethereal beauty of space with the precision of modern interface design.
+        </p>
+
+        <div class="blue-card">
+          "Design is not just what it looks like and feels like. Design is how it works... in zero gravity."
+        </div>
+
+        <div>
+          <h2>Code Interface</h2>
+          <div class="code-window">
+            <div class="code-window-header">
+              <div class="code-window-controls">
+                <div class="code-window-dot bg-red-500"></div>
+                <div class="code-window-dot bg-yellow-500"></div>
+                <div class="code-window-dot bg-green-500"></div>
+              </div>
+              <span class="code-window-title">quantum.config.json</span>
+            </div>
+            <pre>
+              <code>
+{
+  "theme": {
+    "extend": {
+      "colors": {
+        "starlight": "#00d4ff"
+      }
+    }
+  }
+}
+              </code>
+            </pre>
+          </div>
+        </div>
+
+        <!-- Tags -->
+        <div>
+          <span>Tags:</span>
+          <a href="#" class="badge-secondary">CSS</a>
+          <a href="#" class="badge-secondary">Design</a>
+          <a href="#" class="badge-secondary">QuantumCSS</a>
+        </div>
+
+      </article>
+
+      <!-- Sidebar -->
+      <aside>
+        
+        <!-- Author Card -->
+        <div class="card">
+          <h3>About the Author</h3>
+          <p>
+            Eric is a frontend wizard obsessed with making the web feel more organic and alive.
+          </p>
+          <button>Follow</button>
+        </div>
+
+        <!-- Newsletter -->
+        <div class="glass">
+          <h3>Join the Newsletter</h3>
+          <p>Get the latest design trends delivered to your inbox.</p>
+          <form>
+            <input type="email" placeholder="your@email.com">
+            <button>Subscribe</button>
+          </form>
+        </div>
+
+        <!-- Recommended -->
+        <div class="card">
+          <h3>Recommended</h3>
+          
+          <a href="#">
+            <h4>Glassmorphism in 2026</h4>
+            <p>Feb 1 • 4 min read</p>
+          </a>
+          
+          <a href="#">
+            <h4>Modern CSS Variables</h4>
+            <p>Jan 28 • 8 min read</p>
+          </a>
+        </div>
+
+      </aside>
+
+    </div>
+  </main>
+
+  <!-- Footer -->
+  <footer>
+    <div>
+      <div class="left">
+        © 2026 StarlightBlog. Powered by QuantumCSS.
+      </div>
+      <div class="right">
+        <a href="#">Privacy</a>
+        <a href="#">Terms</a>
+      </div>
+    </div>
+  </footer>
+
+  <script>
+    /* ── Stars ── */
+    const starsEl = document.getElementById("stars");
+    for (let i = 0; i < 120; i++) {
+        const s = document.createElement("div");
+        s.className = "star";
+        const size = Math.random() * 2.5 + 0.5;
+        s.style.cssText = `
+      width:${size}px; height:${size}px;
+      left:${Math.random() * 100}%; top:${Math.random() * 100}%;
+      --d:${2 + Math.random() * 5}s;
+      animation-delay:${Math.random() * 5}s;
+    `;
+        starsEl.appendChild(s);
+    }
+  </script>
+</body>
+</html>

package/examples/chat-messaging.html

@@ -67,9 +67,6 @@
         .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; }
-        .sun-icon { display: none; }
-        html[data-theme="light"] .sun-icon { display: inline; }
-        html[data-theme="light"] .moon-icon { 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; }
@@ -91,10 +88,8 @@
                     </div>
                 </div>
                 <div class="px-4 py-4 border-b border-white_5">
-                    <div class="starlight-search has-icon">
-                        <svg class="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                        </svg>
+                    <div class="search has-icon">
+                        <i class="q-icon-search"></i>
                         <input type="text" class="search-input bg-transparent border-none w-full h-full pl-12 outline-none text-sm text-white" placeholder="Search conversations...">
                     </div>
                 </div>
@@ -154,8 +149,9 @@
             </div>
             <div class="theme-toggle-wrapper">
                 <button class="theme-btn" onclick="toggleTheme()">
-                    <svg class="sun-icon w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
-                    <svg class="moon-icon w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
+                    <i class="q-icon-display"></i>
+                    <i class="q-icon-sun sun-icon"></i>
+                    <i class="q-icon-moon moon-icon"></i>
                     <span class="theme-label">Toggle Theme</span>
                 </button>
             </div>
@@ -174,19 +170,13 @@
                 </div>
                 <div style="display: flex; gap: 0.5rem;">
                     <button class="icon-btn icon-btn-circle">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
-                        </svg>
+                        <i class="q-icon-phone"></i>
                     </button>
                     <button class="icon-btn icon-btn-circle">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
-                        </svg>
+                        <i class="q-icon-video"></i>
                     </button>
                     <button class="icon-btn icon-btn-circle">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
-                        </svg>
+                        <i class="q-icon-more-vertical"></i>
                     </button>
                 </div>
             </div>
@@ -224,20 +214,14 @@
             <div class="chat-input-container">
                 <div class="chat-input-wrapper">
                     <button class="icon-btn icon-btn-circle">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
+                        <i class="q-icon-smile"></i>
                     </button>
                     <input type="text" class="chat-input" placeholder="Type a message...">
                     <button class="icon-btn icon-btn-circle">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
-                        </svg>
+                        <i class="q-icon-paperclip"></i>
                     </button>
                     <button class="send-btn">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
-                        </svg>
+                        <i class="q-icon-send"></i>
                     </button>
                 </div>
             </div>