@karaoke-cms/theme-default 0.9.0 → 0.9.3

package/src/styles.css

@@ -30,6 +30,20 @@
   --spacing-xl: 4rem;
 
   --radius-sm: 4px;
+  --radius-lg: 12px;
+
+  /* Landing / marketing palette */
+  --color-accent:       #6366f1;
+  --color-accent-2:     #8b5cf6;
+  --color-bg-alt:       #f8fafc;
+
+  /* Dark-section backgrounds — intentionally always dark */
+  --color-section-dark:   #0f172a;
+  --color-section-dark-2: #1e293b;
+  --color-on-dark:        #e2e8f0;
+  --color-on-dark-2:      #d0dae6;
+
+  --width-landing: 1100px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -41,6 +55,7 @@
     --color-link:         #60a5fa;
     --color-link-hover:   #93c5fd;
     --color-link-visited: #a78bfa;
+    --color-bg-alt:       #1a1a1a;
   }
 }
 
@@ -63,17 +78,23 @@ body {
 /* --- Header --- */
 
 header {
-  border-bottom: 2px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: rgba(15, 23, 42, 0.92);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   margin-bottom: var(--spacing-xl);
 }
 
 .header-inner {
-  max-width: var(--width-site);
+  max-width: var(--width-landing);
   margin: 0 auto;
   padding: 0 var(--spacing-md);
   display: flex;
   align-items: center;
-  height: 3.25rem;
+  justify-content: space-between;
+  height: 3.5rem;
   gap: var(--spacing-md);
 }
 
@@ -81,13 +102,13 @@ header {
   font-weight: 700;
   font-size: 1rem;
   text-decoration: none;
-  color: var(--color-text);
+  color: var(--color-on-dark);
   flex-shrink: 0;
   letter-spacing: -0.01em;
 }
 
 .site-name:hover {
-  color: var(--color-link);
+  color: #fff;
 }
 
 header nav {
@@ -104,18 +125,18 @@ header nav ul {
 
 header nav ul a {
   text-decoration: none;
-  color: var(--color-muted);
+  color: #94a3b8;
   font-size: var(--font-size-sm);
   padding: var(--spacing-xs) 0;
   min-height: 44px;
   display: flex;
   align-items: center;
-  transition: color 0.1s;
+  transition: color 0.15s;
 }
 
 header nav ul a:hover,
 header nav ul a[aria-current="page"] {
-  color: var(--color-text);
+  color: var(--color-on-dark);
 }
 
 /* --- Page body (left + main + right regions) --- */
@@ -194,33 +215,84 @@ main {
 /* --- Footer --- */
 
 footer {
-  border-top: 1px solid var(--color-border);
+  background: var(--color-section-dark);
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
   margin-top: var(--spacing-xl);
 }
 
 .footer-inner {
   max-width: var(--width-site);
   margin: 0 auto;
-  padding: var(--spacing-lg) var(--spacing-md);
+  padding: 0 var(--spacing-md);
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--spacing-lg);
+  padding: var(--spacing-xl) 0 var(--spacing-lg);
+}
+
+.footer-col {
+  min-width: 0;
+}
+
+.footer-brand {
+  font-weight: 700;
+  font-size: var(--font-size-sm);
+  color: var(--color-on-dark);
+  margin: 0 0 var(--spacing-sm);
+}
+
+.footer-tagline {
+  font-size: var(--font-size-sm);
+  color: var(--color-on-dark-2);
+  margin: 0;
+  line-height: var(--line-height-body);
+}
+
+.footer-below {
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  padding: var(--spacing-md) 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-md);
-  color: var(--color-muted);
   font-size: var(--font-size-sm);
+  color: var(--color-on-dark-2);
 }
 
 .footer-attr {
-  margin-left: auto;
+  flex-shrink: 0;
 }
 
 footer a {
-  color: var(--color-muted);
+  color: var(--color-on-dark-2);
   text-decoration: none;
 }
 
 footer a:hover {
-  color: var(--color-link);
+  color: var(--color-on-dark);
+}
+
+/* Footer vertical menu — top-level entry as column heading */
+.footer-col nav.karaoke-menu > ul > li > a {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-on-dark);
+  display: block;
+  padding-bottom: var(--spacing-xs);
+}
+
+.footer-col nav.karaoke-menu > ul > li > ul a {
+  font-size: var(--font-size-sm);
+  color: #94a3b8;
+  display: block;
+  padding: 2px 0;
+}
+
+.footer-col nav.karaoke-menu > ul > li > ul a:hover {
+  color: var(--color-on-dark);
 }
 
 /* --- Typography --- */
@@ -378,14 +450,16 @@ pre code {
     width: 100%;
   }
 
-  .footer-inner {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-sm);
+  .footer-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-md);
+    padding: var(--spacing-lg) 0 var(--spacing-md);
   }
 
-  .footer-attr {
-    margin-left: 0;
+  .footer-below {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
   }
 }
 
@@ -531,3 +605,62 @@ nav.karaoke-menu[data-orientation="vertical"] > ul {
 nav.karaoke-menu[data-orientation="vertical"] li ul {
   padding-left: var(--spacing-md, 1rem);
 }
+
+/* ── Site icon ───────────────────────────────────────────────────────── */
+
+.site-icon {
+  font-size: 1.1em;
+  margin-right: 0.3em;
+  vertical-align: -0.05em;
+}
+
+/* ── Header CTA button ──────────────────────────────────────────────── */
+
+.btn-cta {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: #fff;
+  background: var(--color-accent);
+  padding: 5px 14px;
+  border-radius: 999px;
+  text-decoration: none;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.btn-cta:hover,
+.btn-cta:visited {
+  opacity: 0.85;
+  color: #fff;
+  text-decoration: none;
+}
+
+/* ── Landing layout ─────────────────────────────────────────────────── */
+
+main.landing-main {
+  width: 100%;
+}
+
+
+.landing-container {
+  max-width: var(--width-landing);
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+/* ── Section label (uppercase eyebrow) ──────────────────────────────── */
+
+.section-label {
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  margin-bottom: 12px;
+}
+
+.section-label.on-dark {
+  color: #818cf8;
+}

package/src/pages/blog/[slug].astro

@@ -1,66 +0,0 @@
----
-import { getCollection, render } from 'astro:content';
-import Base from '@karaoke-cms/astro/layouts/Base.astro';
-import ModuleLoader from '@karaoke-cms/astro/components/ModuleLoader.astro';
-import { siteTitle } from 'virtual:karaoke-cms/config';
-
-export async function getStaticPaths() {
-  const posts = await getCollection('blog', ({ data }) => data.publish === true);
-  return posts.map(entry => ({
-    params: { slug: entry.id },
-    props: { entry },
-  }));
-}
-
-const { entry } = Astro.props;
-const { Content } = await render(entry);
-
-// Resolve related entries by ID across both collections
-const relatedIds = entry.data.related ?? [];
-const related = relatedIds.length > 0
-  ? (await Promise.all([
-      getCollection('blog', ({ data }) => data.publish === true),
-      getCollection('docs', ({ data }) => data.publish === true),
-    ]))
-    .flat()
-    .filter(e => relatedIds.includes(e.id))
-  : [];
----
-
-<Base title={`${entry.data.title} — ${siteTitle}`} description={entry.data.description} type="article">
-  <article>
-    <div class="post-header">
-      <h1>{entry.data.title}</h1>
-      <div class="post-meta">
-        {entry.data.date && <span>{entry.data.date.toISOString().slice(0, 10)}</span>}
-        {entry.data.author && entry.data.date && <span> · </span>}
-        {entry.data.author && (
-          <span>{Array.isArray(entry.data.author) ? entry.data.author.join(' · ') : entry.data.author}</span>
-        )}
-        {entry.data.reading_time && <span> · {entry.data.reading_time} min read</span>}
-      </div>
-    </div>
-    <div class="prose">
-      <Content />
-    </div>
-    <div class="post-footer">
-      {entry.data.tags && entry.data.tags.length > 0 && (
-        <div class="post-tags">
-          {entry.data.tags.map(tag => <a href={`/tags/${tag}`} class="tag">#{tag}</a>)}
-        </div>
-      )}
-      {related.length > 0 && (
-        <div class="related-posts">
-          <p class="related-label">Related</p>
-          <ul>
-            {related.map(r => (
-              <li><a href={`/${r.collection}/${r.id}`}>{r.data.title}</a></li>
-            ))}
-          </ul>
-        </div>
-      )}
-      <a href="/blog">← Blog</a>
-    </div>
-  </article>
-  <ModuleLoader comments={entry.data.comments} />
-</Base>

package/src/pages/blog/index.astro

@@ -1,31 +0,0 @@
----
-import { getCollection } from 'astro:content';
-import Base from '@karaoke-cms/astro/layouts/Base.astro';
-import { siteTitle } from 'virtual:karaoke-cms/config';
-
-const posts = (await getCollection('blog', ({ data }) => data.publish === true))
-  .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0));
----
-
-<Base title={`Blog — ${siteTitle}`}>
-  <div class="listing-header">
-    <h1>Blog</h1>
-  </div>
-  {posts.length > 0 ? (
-    <ul class="post-list">
-      {posts.map(post => (
-        <li>
-          {post.data.date && (
-            <span class="post-date">{post.data.date.toISOString().slice(0, 10)}</span>
-          )}
-          <a href={`/blog/${post.id}`}>{post.data.title}</a>
-        </li>
-      ))}
-    </ul>
-  ) : (
-    <div class="empty-state">
-      <p>No posts published yet.</p>
-      <p>Create a Markdown file in your vault's <code>blog/</code> folder and set <code>publish: true</code> in the frontmatter to make it appear here.</p>
-    </div>
-  )}
-</Base>