@leadertechie/personal-site-kit 0.1.0-alpha.25 → 0.1.0-alpha.26

package/dist/chunks/{template-B7ea0o8q.js → template-BW1oVN93.js}

@@ -552,19 +552,20 @@ class ThemeToggle extends HTMLElement {
             background: none;
             border: none;
             cursor: pointer;
-            font-size: 1.5rem;
-            padding: 0.5rem;
-            color: var(--text-color, #213547);
-            transition: color 0.3s ease;
+            font-size: var(--font-size-h3, clamp(1.15rem, 1.75vw, 1.375rem));
+            padding: var(--space-2xs, 0.25lh);
+            color: var(--text-primary, #0b1120);
+            transition: color var(--transition-base, 0.2s ease);
+            line-height: 1;
           }
           button:hover {
-            color: var(--primary-color, #747bff);
+            color: var(--brand-color, #2563eb);
           }
-          html[data-theme='dark'] button {
-            color: var(--dark-mode-text-color, rgba(255, 255, 255, 0.87));
+          [data-theme='dark'] button {
+            color: var(--text-primary, #f1f5f9);
           }
-          html[data-theme='dark'] button:hover {
-            color: var(--dark-mode-primary-color, #646cff);
+          [data-theme='dark'] button:hover {
+            color: var(--brand-color, #60a5fa);
           }
         </style>
         <button id="theme-toggle" aria-label="Toggle theme">

package/dist/index.js

@@ -1,8 +1,8 @@
 import { A, B, M, R, W, c, a, g, b, d, h, e, r, s, v } from "./chunks/website-api-CFRUPu0X.js";
 import { WebsitePrerender } from "./prerender.js";
-import { A as A2, a as a2, b as b2, c as c2, d as d2, e as e2, f, g as g2, h as h2, i, B as B2, F, M as M2, j, S, k } from "./chunks/index-DsRjL9Uy.js";
+import { A as A2, a as a2, b as b2, c as c2, d as d2, e as e2, f, g as g2, h as h2, i, B as B2, F, M as M2, j, S, k } from "./chunks/index-oSPOElVQ.js";
 import { S as S2, g as g3, i as i2, r as r2 } from "./chunks/site-store-CGV9c2DI.js";
-import { R as R2, T, W as W2, b as b3, c as c3, g as g4, r as r3 } from "./chunks/template-B7ea0o8q.js";
+import { R as R2, T, W as W2, b as b3, c as c3, g as g4, r as r3 } from "./chunks/template-BW1oVN93.js";
 export {
   A as AUTH_KV,
   A2 as AdminAboutMeSection,

package/dist/shared/core/theme-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/shared/core/theme-toggle.ts"],"names":[],"mappings":"AAAA,qBAAa,WAAY,SAAQ,WAAW;;IAQ1C,iBAAiB;IAIjB,oBAAoB;IAIpB,MAAM;IAiCN,0BAA0B;IAc1B,WAAW,aAOT;IAEF,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAUhC,UAAU,IAAI,MAAM;IAgBpB,WAAW,IAAI,MAAM;IAQrB,wBAAwB,CAAC,KAAK,EAAE,MAAM;CAQvC"}
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/shared/core/theme-toggle.ts"],"names":[],"mappings":"AAAA,qBAAa,WAAY,SAAQ,WAAW;;IAQ1C,iBAAiB;IAIjB,oBAAoB;IAIpB,MAAM;IAkCN,0BAA0B;IAc1B,WAAW,aAOT;IAEF,kBAAkB,CAAC,KAAK,EAAE,MAAM;IAUhC,UAAU,IAAI,MAAM;IAgBpB,WAAW,IAAI,MAAM;IAQrB,wBAAwB,CAAC,KAAK,EAAE,MAAM;CAQvC"}

package/dist/shared.js

@@ -1,5 +1,5 @@
 import { S, g, i, r } from "./chunks/site-store-CGV9c2DI.js";
-import { R, T, W, b, c, g as g2, r as r2 } from "./chunks/template-B7ea0o8q.js";
+import { R, T, W, b, c, g as g2, r as r2 } from "./chunks/template-BW1oVN93.js";
 export {
   R as Router,
   S as SiteStore,

package/dist/styles/markdown.css

@@ -1,129 +1,255 @@
-/* Markdown Content Styles */
-
-.md-heading {
-  margin: 1.5rem 0 0.75rem 0;
-  font-weight: 600;
-  line-height: 1.3;
-  color: var(--text-color, #213547);
-}
-
-.md-heading h1 { font-size: 2rem; }
-.md-heading h2 { font-size: 1.5rem; }
-.md-heading h3 { font-size: 1.25rem; }
-.md-heading h4 { font-size: 1.1rem; }
-.md-heading h5, .md-heading h6 { font-size: 1rem; }
-
-.md-paragraph {
-  margin: 0 0 1rem 0;
-  line-height: 1.7;
-  color: var(--text-color, #213547);
-}
-
-.md-list {
-  margin: 0 0 1rem 0;
-  padding-left: 1.5rem;
-}
-
-.md-list-item {
-  margin-bottom: 0.5rem;
-  line-height: 1.6;
-}
-
-.md-blockquote {
-  margin: 1rem 0;
-  padding: 0.75rem 1rem;
-  border-left: 4px solid var(--link-color, #646cff);
-  background: var(--nav-link-hover-bg, #f8f9fa);
-  border-radius: 0 8px 8px 0;
-  color: var(--secondary-text, #666);
-}
-
-.md-blockquote .md-paragraph {
-  margin: 0;
-}
-
-.md-code {
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
-  font-size: 0.9em;
-  background: var(--nav-link-hover-bg, #f5f5f5);
-  padding: 0.2rem 0.4rem;
-  border-radius: 4px;
-}
-
-.md-image {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  margin: 1rem 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.md-container {
-  margin: 1rem 0;
-}
-
-.md-container hr {
-  border: none;
-  height: 2px;
-  background: var(--border-color, #eee);
-  margin: 2rem 0;
-  border-radius: 1px;
-}
-
-.md-container[tag="hr"] {
-  margin: 2rem 0;
-}
-
-/* Links within markdown content */
-.md-paragraph a,
-.md-list-item a {
-  color: var(--link-color, #646cff);
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
-.md-paragraph a:hover,
-.md-list-item a:hover {
-  color: var(--link-hover-color, #535bf2);
-  text-decoration: underline;
-}
-
-/* Strong and emphasis */
-.md-paragraph strong,
-.md-list-item strong {
-  font-weight: 600;
-  color: var(--text-color, #1a1a1a);
-}
-
-.md-paragraph em,
-.md-list-item em {
-  font-style: italic;
-}
-
-/* Tables (if supported) */
-.md-container table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1rem 0;
-}
-
-.md-container th,
-.md-container td {
-  padding: 0.75rem;
-  border: 1px solid var(--border-color, #ddd);
-  text-align: left;
-}
-
-.md-container th {
-  background: var(--nav-link-hover-bg, #f5f5f5);
-  font-weight: 600;
-}
-
-/* Dark theme adjustments */
-html[data-theme="dark"] .md-code {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-html[data-theme="dark"] .md-container th {
-  background: rgba(255, 255, 255, 0.05);
+/*
+ * markdown.css — Kumo-inspired Typography for Markdown Content
+ *
+ * Kumo design language applied to prose text: 
+ * geometric block accents, clean spacing via lh units,
+ * fluid type scale, and a polished reading experience.
+ *
+ * Tokens sourced from theme.css @layer theme.
+ * Fully CSS Constitution compliant.
+ */
+
+@layer components {
+  /* ── Prose Container ── */
+  .md-container {
+    margin: var(--space-md, 1lh) 0;
+    max-width: var(--content-narrow, 720px);
+  }
+
+  .md-container[tag="hr"] {
+    margin: var(--space-xl, 3lh) 0;
+  }
+
+  .md-container hr {
+    border: 0;
+    height: 2px;
+    background: var(--border-subtle, #e5e7eb);
+    margin: var(--space-xl, 3lh) 0;
+    border-radius: var(--radius-full, 9999px);
+  }
+
+  /* ── Headings with Kumo geometric accent bars ── */
+  .md-heading {
+    margin: var(--space-lg, 2lh) 0 var(--space-sm, 0.5lh) 0;
+    font-weight: 650;
+    line-height: var(--line-height-tight, 1.2);
+    color: var(--text-primary, #0b1120);
+    letter-spacing: -0.02em;
+  }
+
+  .md-heading h1 {
+    font-size: var(--font-size-h1, clamp(1.75rem, 3vw, 2.5rem));
+    position: relative;
+    display: inline-block;
+  }
+
+  .md-heading h1::after {
+    content: '';
+    display: block;
+    width: 2rem;
+    height: var(--accent-line-thickness, 3px);
+    background: var(--brand-color, #2563eb);
+    margin-top: var(--space-2xs, 0.25lh);
+    border-radius: var(--radius-full, 9999px);
+  }
+
+  .md-heading h2 {
+    font-size: var(--font-size-h2, clamp(1.35rem, 2.25vw, 1.75rem));
+    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
+    padding-bottom: var(--space-2xs, 0.25lh);
+  }
+
+  .md-heading h3 {
+    font-size: var(--font-size-h3, clamp(1.15rem, 1.75vw, 1.375rem));
+  }
+
+  .md-heading h4 {
+    font-size: var(--font-size-h4, clamp(1rem, 1.25vw, 1.125rem));
+  }
+
+  .md-heading h5, .md-heading h6 {
+    font-size: var(--font-size-body, clamp(0.9375rem, 1.15vw, 1rem));
+    color: var(--text-secondary, #475569);
+  }
+
+  /* ── Flat heading classes (from md2html) ── */
+  .md-h1, .h1 {
+    font-size: var(--font-size-h1, clamp(1.75rem, 3vw, 2.5rem));
+    margin: var(--space-lg, 2lh) 0 var(--space-sm, 0.5lh) 0;
+    font-weight: var(--font-weight-bold, 700);
+    line-height: var(--line-height-tight, 1.15);
+    letter-spacing: -0.02em;
+    position: relative;
+    display: inline-block;
+  }
+
+  .md-h1::after, .h1::after {
+    content: '';
+    display: block;
+    width: 2rem;
+    height: var(--accent-line-thickness, 3px);
+    background: var(--brand-color, #2563eb);
+    margin-top: var(--space-2xs, 0.25lh);
+    border-radius: var(--radius-full, 9999px);
+  }
+
+  .md-h2, .h2 {
+    font-size: var(--font-size-h2, clamp(1.35rem, 2.25vw, 1.75rem));
+    margin: var(--space-lg, 2lh) 0 var(--space-sm, 0.5lh) 0;
+    font-weight: var(--font-weight-semibold, 600);
+    line-height: var(--line-height-tight, 1.2);
+    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
+    padding-bottom: var(--space-2xs, 0.25lh);
+  }
+
+  .md-h3, .h3 {
+    font-size: var(--font-size-h3, clamp(1.15rem, 1.75vw, 1.375rem));
+    margin: var(--space-md, 1lh) 0 var(--space-sm, 0.5lh) 0;
+    font-weight: var(--font-weight-semibold, 600);
+    line-height: var(--line-height-tight, 1.3);
+  }
+
+  .md-h4, .h4 {
+    font-size: var(--font-size-h4, clamp(1rem, 1.25vw, 1.125rem));
+    margin: var(--space-md, 1lh) 0 var(--space-2xs, 0.25lh) 0;
+    font-weight: var(--font-weight-semibold, 600);
+  }
+
+  .md-h5, .h5, .md-h6, .h6 {
+    font-size: var(--font-size-body, clamp(0.9375rem, 1.15vw, 1rem));
+    margin: var(--space-md, 1lh) 0 var(--space-2xs, 0.25lh) 0;
+    font-weight: var(--font-weight-semibold, 600);
+    color: var(--text-secondary, #475569);
+  }
+
+  /* ── Paragraphs ── */
+  .md-paragraph {
+    margin: 0 0 var(--space-md, 1lh) 0;
+    line-height: var(--line-height-relaxed, 1.7);
+    color: var(--text-primary, #0b1120);
+  }
+
+  .md-paragraph a,
+  .md-list-item a {
+    color: var(--link-color, #2563eb);
+    text-decoration: none;
+    font-weight: var(--font-weight-medium, 500);
+    border-bottom: 1px solid transparent;
+    transition: border-color var(--transition-fast, 0.15s ease),
+                color var(--transition-fast, 0.15s ease);
+  }
+
+  .md-paragraph a:hover,
+  .md-list-item a:hover {
+    color: var(--link-hover, #1d4ed8);
+    border-bottom-color: var(--link-hover, #1d4ed8);
+    text-decoration: none;
+  }
+
+  .md-paragraph strong,
+  .md-list-item strong {
+    font-weight: var(--font-weight-bold, 700);
+    color: var(--text-primary, #0b1120);
+  }
+
+  .md-paragraph em,
+  .md-list-item em {
+    font-style: italic;
+  }
+
+  /* ── Lists ── */
+  .md-list {
+    margin: 0 0 var(--space-md, 1lh) 0;
+    padding-left: var(--space-lg, 2lh);
+  }
+
+  .md-list-item {
+    margin-bottom: var(--space-2xs, 0.25lh);
+    line-height: var(--line-height-relaxed, 1.7);
+  }
+
+  /* ── Blockquotes (Kumo geometric left bar) ── */
+  .md-blockquote {
+    margin: var(--space-md, 1lh) 0;
+    padding: var(--space-sm, 0.5lh) var(--space-md, 1lh);
+    border-left: 3px solid var(--brand-color, #2563eb);
+    background: var(--bg-secondary, #f8fafc);
+    border-radius: 0 var(--radius-sm, 0.375rem) var(--radius-sm, 0.375rem) 0;
+    color: var(--text-secondary, #475569);
+  }
+
+  .md-blockquote .md-paragraph {
+    margin: 0;
+  }
+
+  /* ── Inline Code ── */
+  .md-code {
+    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'JetBrains Mono', monospace;
+    font-size: 0.875em;
+    background: var(--bg-secondary, #f3f4f6);
+    padding: 0.15em 0.4em;
+    border-radius: var(--radius-sm, 0.25rem);
+    border: 1px solid var(--border-subtle, #e5e7eb);
+  }
+
+  /* ── Code Blocks ── */
+  .md-code-block,
+  pre.md-code {
+    background: var(--bg-code, #1e293b);
+    color: var(--text-code, #e2e8f0);
+    padding: var(--space-md, 1lh);
+    border-radius: var(--radius-md, 0.5rem);
+    overflow-x: auto;
+    margin: var(--space-md, 1lh) 0;
+    font-size: var(--font-size-small, clamp(0.8125rem, 1vw, 0.875rem));
+    line-height: 1.6;
+    border: 0;
+  }
+
+  /* ── Images ── */
+  .md-image {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-md, 0.5rem);
+    margin: var(--space-md, 1lh) 0;
+    box-shadow: var(--shadow-sm, 0 1px 2px oklch(0% 0 0 / 0.05));
+    border: 1px solid var(--border-subtle, #e5e7eb);
+  }
+
+  /* ── Tables ── */
+  .md-container table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: var(--space-md, 1lh) 0;
+  }
+
+  .md-container th,
+  .md-container td {
+    padding: var(--space-sm, 0.5lh);
+    border: 1px solid var(--border-subtle, #e5e7eb);
+    text-align: left;
+  }
+
+  .md-container th {
+    background: var(--bg-secondary, #f3f4f6);
+    font-weight: var(--font-weight-semibold, 600);
+  }
+
+  .md-container tr:nth-child(even) {
+    background: var(--bg-secondary, #f8fafc);
+  }
+
+  /* ── Dark Theme ── */
+  html[data-theme="dark"] .md-code {
+    background: color-mix(in srgb, var(--text-inverse, #ffffff), transparent 92%);
+    border-color: color-mix(in srgb, var(--text-inverse, #ffffff), transparent 90%);
+  }
+
+  html[data-theme="dark"] .md-container th {
+    background: color-mix(in srgb, var(--text-inverse, #ffffff), transparent 95%);
+  }
+
+  html[data-theme="dark"] .md-blockquote {
+    background: var(--bg-secondary, #1e293b);
+  }
 }