🎨 Update to new design

README.md

@@ -1,17 +1,21 @@
 # slidev-theme-soba
 
-![slidev theme soba](https://github.com/ryuapp/slidev-theme-soba/assets/114303361/46e242d1-9740-4dd7-92c0-7a5f73ed49dd)
-
 [![License](https://img.shields.io/github/license/ryuapp/slidev-theme-soba?labelColor=171717&color=39b54a&label=License)](https://github.com/ryuapp/slidev-theme-soba/blob/main/LICENSE)
 [![npm](https://img.shields.io/npm/v/slidev-theme-soba?labelColor=171717&color=39b54a)](https://npmx.dev/package/slidev-theme-soba)
 
-日本語向けのシンプルな [Slidev](https://github.com/slidevjs/slidev) のテーマです。\
 A simple [Slidev](https://github.com/slidevjs/slidev) theme for Japanese.
 
 > [!NOTE]
 > This theme is designed for Japanese, but can be used in other languages.
 
-Live demo: [here](https://slidev-theme-soba.ryu.app)
+Live demo: [here](https://slidev-theme-soba.ryu.app)  
+Screenshot example: [here](https://github.com/ryuapp/slidev-theme-soba/tree/main/screenshots)
+
+## Features
+
+- Simple and clean design focused on readability and ease of use.
+- Text size adjusted for face-to-face use.
+- Japanese font support (Noto Sans JP and Poppins)
 
 ## Install
 
@@ -36,12 +40,6 @@ This theme provides the following layouts:
 - Image
 - End
 
-## Components
-
-This theme provides the following components:
-
-🚧Underconstruction🚧
-
 ## Contributing
 
 - `deno install`

components/Pagination.vue

@@ -6,6 +6,6 @@
     "
     class="font-serif text-lg"
   >
-    <SlideCurrentNo />
+    {{ $slidev.nav.currentPage }}
   </div>
 </template>

deno.jsonc

@@ -7,7 +7,7 @@
     "build": "slidev build example.md",
     "dev": "slidev example.md --open",
     "export": "slidev export example.md",
-    "screenshot": "slidev export example.md --format png",
+    "screenshot": "slidev export example.md --format png --output screenshots",
   },
   "imports": {
     "oxfmt": "npm:oxfmt@0.48.0",

example.md

@@ -1,16 +1,16 @@
 ---
 theme: ./
 showPageCount: true
-disablePageCount: [1, 7, 9, 11]
+disablePageCount: [1, 5, 6, 7, 9]
 themeConfig:
   primary: "#39b54a"
 htmlAttrs:
   lang: "ja"
 ---
 
-# Slidevテーマ Soba
+# Slidevのシンプルなテーマ Soba
 
-日本語向けのシンプルなテーマ
+日本語向けのシンプルなSlidevのテーマ
 
 ---
 layout: profile
@@ -22,7 +22,7 @@ profileImage: https://img.ryu.app/logo/ryuapp.svg
 フロントエンド開発者
 
 - [Portfolio](https://ryu.app)
-- [GitHub](https://github.com/ryuapp/)
+- [GitHub](https://github.com/ryuapp)
 
 ---
 
@@ -39,27 +39,22 @@ profileImage: https://img.ryu.app/logo/ryuapp.svg
 1. 日本語フォントの使用
    - 日本語 ⇒ [Noto Sans JP](https://fonts.google.com/noto/specimen/Noto+Sans+JP)
    - アルファベットや記号 ⇒ [Poppins](https://fonts.google.com/specimen/Poppins)
-2. 文字の大きさ、太さ、間隔
+2. 対面向けに文字の大きさ、太さ、間隔を調整
 
 ---
 
 # Slidevとは？
 
-Slidevはスライド作成ツールであり、開発者向けに設計されたプレゼンテーションツールです  
-次のような機能を備えています
+Slidevはスライド作成ツールであり、開発者向けに設計されたプレゼンテーションツールです。次のような機能を備えています
 
-- 📝 **テキストベース** - マークダウンでコンテンツに集中し、スタイルを整えられる
-- 🎨 **テーマの切り替え** - npm を通じてテーマを共有できる
-- 🧑‍💻 **開発者フレンドリー** - コードハイライト、オートコンプリートによるライブコーディングができる
-- 🤹 **インタラクティブ** - Vue コンポーネントを埋め込んで表現を強化できる
-- 🎥 **録画・撮影** - 録画機能とカメラビューがあります
-- 📤 **便利** - PDF、PNG、またはホスティング可能な SPA で出力できる
-- 🛠 **カスタマイズ** - Webページで出来る事は何でもできる
+- 📝 **テキストベース**
+  - マークダウンでコンテンツに集中し、スタイルを整えられる
+- 🧑‍💻 **開発者フレンドリー**
+    - コードハイライト、オートコンプリートが利用できる
+- 📤 **便利**
+  - PDF、PNG、またはホスティング可能なSPAで出力できる
 
-<br>
-<br>
-
-もっと知りたい人は [なぜSlidev？](https://ja.sli.dev/guide/why.html)
+もっと知りたい人は [なぜSlidev？](https://ja.sli.dev/guide/why)
 
 ---
 layout: section

layouts/cover.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="slidev-layout cover">
-    <div class="my-auto w-full">
+    <div class="my-auto w-full text-left">
       <slot />
     </div>
   </div>

layouts/profile.vue

@@ -5,10 +5,7 @@
         <slot />
       </div>
       <div class="m-12">
-        <img
-          class="my-auto aspect-square w-full rounded-full"
-          :src="$attrs.profileImage || '/soba.jpg'"
-        />
+        <img class="my-auto aspect-square w-full rounded-full" :src="$attrs.profileImage" />
       </div>
     </div>
   </div>

styles/layout.css

@@ -1,11 +1,12 @@
 :root {
   --slidev-theme-primary: #df1d1d;
   --slidev-code-background: #1b1b1b;
+  --slidev-code-padding: 1.2rem;
 }
 
 code,
 .slidev-code-copy {
-  @apply text-zinc-300;
+  @apply text-lg text-white;
 }
 
 .slidev-layout {
@@ -16,9 +17,11 @@ code,
   h5,
   h6,
   p,
-  ul {
+  ul,
+  ol {
     @apply text-zinc-700;
   }
+
   h1,
   h2,
   h3,
@@ -27,6 +30,12 @@ code,
   h6 {
     @apply font-medium;
   }
+
+  p,
+  ul,
+  ol {
+    @apply text-2xl;
+  }
 }
 
 .slidev-layout blockquote {
@@ -35,15 +44,16 @@ code,
   }
 }
 
-.slidev-layout.default {
+.slidev-layout.default,
+.slidev-layout.profile {
   h1 {
     @apply text-4xl;
   }
   h2 {
     @apply mb-2;
   }
   p {
-    @apply text-xl;
+    @apply text-2xl;
   }
 }
 
@@ -52,11 +62,11 @@ code,
   @apply grid h-full text-center;
 
   h1 {
-    @apply text-6xl leading-20;
+    @apply text-6xl leading-16;
   }
 
   h1 + p {
-    @apply -mt-2 mb-4 text-zinc-600;
+    @apply mt-4 mb-4 text-zinc-600;
   }
 
   p {
@@ -70,20 +80,8 @@ code,
   }
 }
 
-.slidev-layout.section {
-  @apply grid h-full;
-
-  h1 {
-    @apply text-5xl;
-  }
-  h1 + p {
-    @apply -mt-2 ml-4 text-zinc-600;
-  }
-}
-
+.slidev-layout.section,
 .slidev-layout.center {
-  @apply grid h-full text-center;
-
   h1,
   h2,
   h3,
@@ -115,6 +113,18 @@ code,
   }
 }
 
+.slidev-layout.section {
+  @apply grid h-full;
+
+  h1 + p {
+    @apply -mt-2;
+  }
+}
+
+.slidev-layout.center {
+  @apply grid h-full text-center;
+}
+
 .slidev-layout.quote {
   @apply grid h-full text-center;
 
@@ -125,7 +135,7 @@ code,
     @apply mt-2;
   }
   blockquote {
-    @apply mx-auto grid w-fit border-0 bg-zinc-200 text-left text-zinc-900 before:content-["“"] after:content-["”"];
+    @apply mx-auto grid w-fit border-0 bg-gray-200 text-left before:content-["“"] after:content-["”"];
   }
   blockquote:before,
   blockquote:after {
@@ -138,21 +148,21 @@ code,
     @apply h-10 justify-self-end pt-4;
   }
   blockquote p {
-    @apply border-0 bg-zinc-200 px-6 text-xl text-zinc-900;
+    @apply border-0 px-8 py-2 text-4xl text-zinc-900;
   }
   blockquote p + footer {
-    @apply mt-2;
+    @apply mt-4;
   }
   blockquote footer {
-    @apply px-6 text-right text-lg text-zinc-600;
+    @apply px-6 text-right text-3xl text-zinc-600;
   }
 }
 
 .slidev-layout.end {
   @apply grid h-full bg-black text-center;
 
   h1 {
-    @apply text-zinc-100;
+    @apply text-5xl text-zinc-100;
   }
   h1 + p {
     @apply -mt-2 mb-4 text-zinc-100;