@howssatoshi/quantumcss 1.8.0 → 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>