slidev-theme-gtlabo 2.0.1 → 2.0.2

package/components/SectionDivider.vue

@@ -1,18 +1,44 @@
 <!-- components/TableOfContents.vue -->
 <template>
-  <div class="table-of-contents-container flex flex-col justify-center bg-theme-color">
-    <!-- ヘッダー -->
+  <div class="table-of-contents-container flex flex-col justify-start bg-white overflow-hidden relative">
+    <!-- 厳密な背景グリッド - Swiss Styleの基礎 -->
+    <div class="absolute inset-0 z-0 pointer-events-none opacity-10" 
+         style="background-image: linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(to right, #0f172a 1px, transparent 1px); background-size: 50px 50px;">
+    </div>
+
+    <!-- 非対称の幾何学的構成要素 - 左上の強調 -->
+    <div class="absolute top-0 left-0 w-2 h-32 bg-slate-900 z-5"></div>
+    <div class="absolute top-0 left-0 w-32 h-2 bg-slate-900 z-5"></div>
+    
+    <!-- 非対称の幾何学的構成要素 - 右下のアクセント -->
+    <div class="absolute bottom-0 right-0 w-48 h-2 bg-slate-900 z-5"></div>
+    <div class="absolute bottom-12 right-0 w-1 h-48 bg-slate-900 opacity-30 z-5"></div>
+
+    <!-- 右側の装飾バー群 - cover.vueと同じスタイル -->
+    <div class="absolute right-0 top-0 w-1/4 h-full z-0 pointer-events-none">
+      <div class="absolute right-0 top-0 w-full h-full bg-slate-50" />
+      <div class="absolute right-[15%] top-0 w-32 h-[35%] bg-sky-600/10" />
+      <div class="absolute right-0 bottom-0 w-2 h-[40%] bg-slate-900" />
+    </div>
+
+    <!-- 機能的なsky-500のアクセントブロック -->
+    <div class="absolute right-0 top-1/4 w-[12%] h-24 bg-sky-500/30 z-5"></div>
+
+    <!-- ヘッダー - 付録セクション用 -->
     <div
       v-if="isAppendixSection"
       :class="headerClasses"
+      class="relative z-10"
     >
-      <p :class="headerTitleClasses">
-        付録
-      </p>
+      <div class="flex items-start space-x-6">
+        <div :class="headerTitleClasses" class="font-bold uppercase tracking-widest text-slate-800 leading-none">
+          APPENDIX
+        </div>
+      </div>
     </div>
       
-    <!-- メインコンテンツ -->
-    <div :class="mainContentClasses">
+    <!-- メインコンテンツ - 厳密なグリッドベース -->
+    <div :class="mainContentClasses" class="relative z-10">
       <div class="max-w-full w-full">
         <!-- 通常の目次表示 -->
         <div
@@ -22,41 +48,43 @@
           <div 
             v-for="(chapter, index) in regularChapters" 
             :key="chapter.key"
-            class="flex flex-col"
-            :class="{ 'relative': isNextChapter(chapter.key) }"
+            class="flex flex-col "
+            :class="isNextChapter(chapter.key) ? 'border-sky-500 border-l-8 pl-6' : 'border-slate-200 border-l-4 pl-7'"
           >
-            <!-- 次の章の強調表示 -->
-            <div 
-              v-if="isNextChapter(chapter.key)"
-              :class="highlightBorderClasses"
-            />
+            <!-- 次の章インジケーター - sky-500アクセント -->
             <div 
               v-if="isNextChapter(chapter.key)"
               :class="nextBadgeClasses"
+              class="bg-sky-500 text-white font-bold uppercase tracking-widest leading-none"
             >
               NEXT
             </div>
                   
-            <!-- 章番号とタイトル -->
+            <!-- 章番号とタイトル - 左揃え、明確なヒエラルキー -->
             <div :class="chapterHeaderClasses">
-              <div :class="chapterNumberClasses">
-                {{ String(index + 1).padStart(2, '0') }}
-              </div>
-              <div class="flex-1 border-b border-white pb-2">
-                <span :class="chapterTitleClasses">
-                  {{ chapter.title }}
-                </span>
+              <div class="flex items-end space-x-3 w-full">
+                <div :class="chapterNumberClasses" class="flex text-slate-900 font-bold tabular-nums leading-none">
+                  {{ String(index + 1).padStart(2, '0') }}
+                </div>
+                <div class="flex-1">
+                  <div class="border-b border-slate-900 mb-2">
+                    <span :class="chapterTitleClasses" class="text-slate-900 font-bold leading-tight">
+                      {{ chapter.title }}
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
                   
-            <!-- セクション一覧（重複除去済み） -->
+            <!-- セクション一覧 - 機能的な情報構造 -->
             <div :class="sectionListClasses">
               <div 
                 v-for="(sectionData, sectionIndex) in chapter.uniqueSections" 
                 :key="`${chapter.key}-${sectionIndex}`"
-                :class="sectionItemClasses"
+                class="flex items-start"
               >
-                <span :class="sectionTextClasses">
+                <span class="w-1 h-1 bg-slate-400 mr-2 mt-1.5 flex-shrink-0 rounded-full"></span>
+                <span :class="sectionTextClasses" class="text-slate-600 leading-snug">
                   {{ sectionData.title }}
                 </span>
               </div>
@@ -73,40 +101,42 @@
             v-for="(chapter, index) in appendixChapters" 
             :key="chapter.key"
             class="flex flex-col"
-            :class="{ 'relative': isNextChapter(chapter.key) }"
+            :class="isNextChapter(chapter.key) ? 'border-sky-500  border-l-8 pl-6' : 'border-slate-200 border-l-4 pl-7'"
           >
-            <!-- 次の章の強調表示 -->
-            <div 
-              v-if="isNextChapter(chapter.key)"
-              :class="highlightBorderClasses"
-            />
+            <!-- 次の章インジケーター -->
             <div 
               v-if="isNextChapter(chapter.key)"
               :class="nextBadgeClasses"
+              class="bg-sky-500 text-white font-bold uppercase tracking-widest leading-none"
             >
               NEXT
             </div>
                   
             <!-- 付録番号とタイトル -->
-            <div :class="chapterHeaderClasses">
-              <div :class="appendixNumberClasses">
-                A{{ index + 1 }}
-              </div>
-              <div class="flex-1 border-b border-white pb-2">
-                <h2 :class="chapterTitleClasses">
-                  {{ chapter.title }}
-                </h2>
+             <div :class="chapterHeaderClasses">
+              <div class="flex items-end space-x-3 w-full">
+                <div :class="chapterNumberClasses" class="flex text-slate-900 font-bold tabular-nums leading-none">
+                  A{{ index + 1 }}
+                </div>
+                <div class="flex-1">
+                  <div class="border-b border-slate-900 mb-2">
+                    <span :class="chapterTitleClasses" class="text-slate-900 font-bold leading-none">
+                      {{ chapter.title }}
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
                   
-            <!-- セクション一覧（重複除去済み） -->
+            <!-- セクション一覧 -->
             <div :class="sectionListClasses">
               <div 
                 v-for="(sectionData, sectionIndex) in chapter.uniqueSections" 
                 :key="`${chapter.key}-${sectionIndex}`"
-                :class="sectionItemClasses"
+                class="flex items-start"
               >
-                <span :class="sectionTextClasses">
+                <span class="w-1 h-1 bg-slate-400 mr-2 mt-1.5 flex-shrink-0 rounded-full"></span>
+                <span :class="sectionTextClasses" class="text-slate-600 leading-snug">
                   {{ sectionData.title }}
                 </span>
               </div>
@@ -115,6 +145,11 @@
         </div>
       </div>
     </div>
+
+    <!-- タイポグラフィックな署名 - 客観性の表明 -->
+    <div class="absolute bottom-4 left-6 text-[10px] font-mono text-slate-800 uppercase tracking-widest z-20">
+      CONTENTS
+    </div>
   </div>
 </template>
       
@@ -236,77 +271,77 @@ const isNextChapter = (chapterKey) => {
   return props.nextChapter === chapterKey
 }
 
-// サイズ設定に基づく動的スタイル
+// サイズ設定 - 縦幅を大幅削減
 const sizeConfigs = {
   xs: {
     columns: 4,
-    headerPadding: 'pt-6 pb-3 px-4 ',
-    headerTitle: 'text-2xl',
-    mainPadding: 'px-4 py-4',
-    gridGap: 'gap-x-4 gap-y-2',
+    headerPadding: 'pt-3 pb-1 px-6',
+    headerTitle: 'text-lg',
+    mainPadding: 'px-6 py-6',
+    gridGap: 'gap-x-4 gap-y-4',
     chapterNumber: 'text-2xl',
-    chapterTitle: 'text-sm font-bold',
-    chapterHeader: 'mb-1',
-    sectionList: 'ml-8 space-y-0.5',
-    sectionText: 'text-xs',
-    appendixNumber: 'text-lg',
-    nextBadge: 'px-1 py-0.5 text-xs'
+    chapterTitle: 'text-[11px]',
+    chapterHeader: 'mb-2',
+    sectionList: 'mt-2 space-y-1',
+    sectionText: 'text-[9px]',
+    appendixNumber: 'text-xl',
+    nextBadge: 'mb-2 px-1.5 py-0.5 text-[8px]'
   },
   sm: {
     columns: 3,
-    headerPadding: 'pt-8 pb-4 px-6',
-    headerTitle: 'text-3xl',
-    mainPadding: 'px-6 py-6',
-    gridGap: 'gap-x-6 gap-y-3',
+    headerPadding: 'pt-6 pb-2 px-8',
+    headerTitle: 'text-xl',
+    mainPadding: 'px-8 py-8',
+    gridGap: 'gap-x-6 gap-y-5',
     chapterNumber: 'text-3xl',
-    chapterTitle: 'text-base',
-    chapterHeader: 'mb-2',
-    sectionList: 'ml-10 space-y-1',
-    sectionText: 'text-sm',
+    chapterTitle: 'text-xs',
+    chapterHeader: 'mb-2.5',
+    sectionList: 'mt-2.5 space-y-1',
+    sectionText: 'text-[10px]',
     appendixNumber: 'text-2xl',
-    nextBadge: 'px-2 py-1 text-xs'
+    nextBadge: 'mb-2.5 px-2 py-0.5 text-[9px]'
   },
   md: {
     columns: 2,
-    headerPadding: 'pt-14 pb-8 px-10',
-    headerTitle: 'text-5xl',
-    mainPadding: 'px-6 py-40',
-    gridGap: 'gap-x-12 gap-y-2',
+    headerPadding: 'pt-12 px-12',
+    headerTitle: 'text-3xl',
+    mainPadding: 'px-12 py-14',
+    gridGap: 'gap-x-12 gap-y-6',
     chapterNumber: 'text-6xl',
     chapterTitle: 'text-2xl',
-    chapterHeader: 'mb-4',
-    sectionList: 'ml-20 space-y-2',
+    chapterHeader: 'mb-3',
+    sectionList: 'mt-3 space-y-1.5',
     sectionText: 'text-lg',
     appendixNumber: 'text-4xl',
-    nextBadge: 'px-3 py-1 text-sm'
+    nextBadge: 'mb-3 px-2.5 py-1 text-md'
   },
   lg: {
     columns: 2,
-    headerPadding: 'pt-16 pb-10 px-12',
-    headerTitle: 'text-6xl',
-    mainPadding: 'px-16 py-16',
-    gridGap: 'gap-x-20 gap-y-10',
+    headerPadding: 'pt-8 pb-4 px-16',
+    headerTitle: 'text-4xl',
+    mainPadding: 'px-16 py-18',
+    gridGap: 'gap-x-16 gap-y-8',
     chapterNumber: 'text-7xl',
-    chapterTitle: 'text-3xl',
-    chapterHeader: 'mb-6',
-    sectionList: 'ml-24 space-y-3',
-    sectionText: 'text-xl',
+    chapterTitle: 'text-xl',
+    chapterHeader: 'mb-4',
+    sectionList: 'mt-4 space-y-2',
+    sectionText: 'text-base',
     appendixNumber: 'text-5xl',
-    nextBadge: 'px-4 py-2 text-base'
+    nextBadge: 'mb-4 px-3 py-1.5 text-xs'
   },
   xl: {
     columns: 1,
-    headerPadding: 'pt-20 pb-12 px-16',
-    headerTitle: 'text-8xl',
-    mainPadding: 'px-20 py-20',
-    gridGap: 'gap-x-24 gap-y-12',
-    chapterNumber: 'text-9xl',
-    chapterTitle: 'text-5xl',
-    chapterHeader: 'mb-8',
-    sectionList: 'ml-32 space-y-4',
-    sectionText: 'text-3xl',
+    headerPadding: 'pt-10 pb-5 px-20',
+    headerTitle: 'text-6xl',
+    mainPadding: 'px-20 py-24',
+    gridGap: 'gap-x-20 gap-y-12',
+    chapterNumber: 'text-8xl',
+    chapterTitle: 'text-3xl',
+    chapterHeader: 'mb-6',
+    sectionList: 'mt-6 space-y-3',
+    sectionText: 'text-xl',
     appendixNumber: 'text-7xl',
-    nextBadge: 'px-5 py-2 text-lg'
+    nextBadge: 'mb-6 px-4 py-2 text-sm'
   }
 }
 
@@ -314,21 +349,19 @@ const currentConfig = computed(() => sizeConfigs[props.size])
 
 // 動的クラス
 const headerClasses = computed(() => `text-left ${currentConfig.value.headerPadding}`)
-const headerTitleClasses = computed(() => `${currentConfig.value.headerTitle} font-bold text-white`)
+const headerTitleClasses = computed(() => currentConfig.value.headerTitle)
 const mainContentClasses = computed(() => `flex-1 ${currentConfig.value.mainPadding}`)
 const gridClasses = computed(() => `grid grid-cols-${currentConfig.value.columns} ${currentConfig.value.gridGap}`)
-const chapterHeaderClasses = computed(() => `flex items-center ${currentConfig.value.chapterHeader} relative z-5`)
-const chapterNumberClasses = computed(() => `${currentConfig.value.chapterNumber} font-bold text-white mr-2`)
-const chapterTitleClasses = computed(() => `${currentConfig.value.chapterTitle} font-bold text-white`)
+const chapterHeaderClasses = computed(() => currentConfig.value.chapterHeader)
+const chapterNumberClasses = computed(() => currentConfig.value.chapterNumber)
+const chapterTitleClasses = computed(() => currentConfig.value.chapterTitle)
 const sectionListClasses = computed(() => currentConfig.value.sectionList)
-const sectionItemClasses = computed(() => 'flex items-start')
-const sectionTextClasses = computed(() => `text-white ${currentConfig.value.sectionText} leading-relaxed`)
-const appendixNumberClasses = computed(() => `${currentConfig.value.appendixNumber} font-bold text-white mr-6 pb-2`)
-const highlightBorderClasses = computed(() => 'absolute -inset-2 border-4 border-yellow-400 rounded-lg opacity-80')
-const nextBadgeClasses = computed(() => `absolute -top-2 -right-2 bg-yellow-400 text-black ${currentConfig.value.nextBadge} rounded-full font-bold z-10`)
+const sectionTextClasses = computed(() => currentConfig.value.sectionText)
+const appendixNumberClasses = computed(() => currentConfig.value.appendixNumber)
+const nextBadgeClasses = computed(() => currentConfig.value.nextBadge)
 </script>
 
-<style>
+<style scoped>
 /* このコンポーネント専用のスタイル */
 .table-of-contents-container {
   /* ページ全体をカバーする背景 */
@@ -343,8 +376,15 @@ const nextBadgeClasses = computed(() => `absolute -top-2 -right-2 bg-yellow-400
   z-index: 0 !important;
 }
 
-/* 背景色を確実に適用 */
-.table-of-contents-container.bg-theme-color {
-  background-color: rgba(2, 132, 199, 1) !important;
+/* タイポグラフィの最適化 - Swiss Styleの核心 */
+div, span, h2, p {
+  font-feature-settings: "palt", "kern";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* タブラーナンバーの最適化 */
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-gtlabo",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A Slidev theme for laboratory presentations with customizable components",
   "author": "mksmkss",
   "license": "MIT",