💄 update showcase slides with brand theme

Author: mickaelalvs

showcase/slides.md

@@ -1,28 +1,60 @@
 ---
+layout: none
 addons:
   - livecode
 livecode:
   defaultPort: 9000
 ---
 
-# 🛶 slidev-addon-livecode
+<div class="absolute inset-0 flex items-center justify-center bg-white">
 
-Live VS Code IDE sessions in your presentations
+  <div class="absolute top-14 right-28 text-[28px] font-bold text-[#1a1a1a]" style="font-family: 'Neuzeit Grotesk', sans-serif;">
+    MA
+  </div>
+
+  <div class="flex flex-col items-center gap-4 text-center pb-20">
+    <div class="text-[56px]">🛶</div>
+    <h1 class="text-[48px] font-bold text-[#1a1a1a] m-0 tracking-tight leading-tight" style="font-family: 'Neuzeit Grotesk', sans-serif;">
+      slidev-addon-livecode
+    </h1>
+    <p class="text-[20px] text-[#525866] m-0">Live VS Code IDE sessions in your presentations</p>
+    <p class="text-[14px] text-[#525866] m-0">powered with coderaft</p>
+    <code class="font-mono text-[15px] text-[#1a1a1a] bg-[#f1f1f1] rounded-lg px-5 py-2.5 mt-2 select-text cursor-text">
+      pnpm add slidev-addon-livecode coderaft
+    </code>
+  </div>
+
+  <div class="absolute bottom-14 left-28 text-[18px] text-[#525866]">mickaelalvs.dev</div>
+
+  <div class="absolute bottom-14 right-28 flex items-center gap-4 text-[#525866]">
+    <span class="text-[16px]">@mickaelalvs</span>
+    <svg width="20" height="18" viewBox="0 0 256 226" fill="currentColor">
+      <path d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z" />
+    </svg>
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+    </svg>
+  </div>
+
+</div>
 
 ---
 
 # 🚀 Basic usage
 
-<div class="h-96 mt-4 rounded-xl overflow-hidden">
+<div class="flex-1 rounded-xl overflow-hidden border border-gray-200">
   <Editor session="demo" />
 </div>
 
 ---
 
 # 📂 Specific workspace
 
-<div class="h-96 mt-4 rounded-xl overflow-hidden">
-  <Editor session="my-project" defaultFolder="/Users/malves.externe/Projects/addons/slidev-addon-livecode" />
+<div class="flex-1 rounded-xl overflow-hidden border border-gray-200">
+  <Editor session="my-project" defaultFolder=".." />
 </div>
 
 ---
@@ -31,25 +63,20 @@ Live VS Code IDE sessions in your presentations
 
 State is preserved when navigating away and back.
 
-<div class="h-80 mt-4 rounded-xl overflow-hidden">
+<div class="flex-1 rounded-xl overflow-hidden border border-gray-200">
   <Editor session="demo" persist />
 </div>
 
 ---
 
-# 🪟 Two editors side by side
+# 📐 Custom height
 
-<div class="grid grid-cols-2 gap-4 h-80 mt-4">
-  <div class="rounded-xl overflow-hidden">
-    <Editor session="client" defaultFolder="/Users/malves.externe/Projects/addons/slidev-addon-livecode" />
-  </div>
-  <div class="rounded-xl overflow-hidden">
-    <Editor session="server" defaultFolder="/Users/malves.externe/Projects/addons/slidev-addon-liveshell" />
-  </div>
-</div>
+<Editor session="small" height="300px" />
 
 ---
 
-# 📐 Custom height
+# 🔍 Zoom
 
-<Editor session="small" height="300px" />
+<div class="flex-1 rounded-xl overflow-hidden border border-gray-200">
+  <Editor session="zoomed" :zoom="0.5" />
+</div>

showcase/style.css

@@ -0,0 +1,49 @@
+/* ===== Fonts ===== */
+
+@font-face {
+  font-family: 'Biotif';
+  src: url('https://mickaelalvs.dev/static/font/Biotif-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Neuzeit Grotesk';
+  src: url('https://mickaelalvs.dev/static/font/NeuzeitGrotesk-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Fira Code';
+  src: url('https://mickaelalvs.dev/static/font/FiraCode-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-display: swap;
+}
+
+/* ===== Layout ===== */
+
+.slidev-layout.default {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== Slidev font overrides ===== */
+
+.slidev-layout {
+  font-family: 'Biotif', sans-serif;
+}
+
+.slidev-layout h1,
+.slidev-layout h2,
+.slidev-layout h3,
+.slidev-layout h4 {
+  font-family: 'Neuzeit Grotesk', sans-serif;
+  font-weight: 700;
+  font-size: 1.8rem;
+}
+
+.slidev-layout code,
+.slidev-layout pre {
+  font-family: 'Fira Code', monospace;
+}