Folio テーマデザインシステム
方向性
最高の開発者ブログやポートフォリオ（leerob.com、overreacted.io、brittanychiang.com、antfu.me）のように、個人のウェブサイトを構築します。一人の人物、一つの声で、文章が最優先です。サイトは、丁寧に整理されたノートのように、静かで高速に動作し、テキストの邪魔をするものは一切ありません。構築したものや学んだことを、具体的な数値とコードで示します。人物のストックフォト、マーケティング用の主張、装飾効果は使用しません。
基礎
./theme/views/およびテーマのarticle、blog、code、text、blogレイアウト、mainビューが提供するマークアップとクラスのみを使用します。- システムのサンセリフ体、セリフ体、等幅フォントと、既存の
--pico-*変数を使用します。 - 暖かみのあるニュートラルカラー（
#2B2924、#6B665E、#E4E0D9、#FBFAF8）とグリーン（#1F7A4D、ダークモードでは#4FBF87）をリンクと最初のボタンにのみ使用します。コードブロックは常にダーク表示のままにします。 - ライトモードとダークモードをサポートします。テーマ可能な背景に固定の明るい色を配置しないでください。
- シャドウの代わりに
0.5remの角丸と細いボーダーを使用します。
構造
- ホーム（
page）: アバター画像、役割をサブタイトル、一文の紹介文、2つのボタンからなるhero要素、listレイアウトで「最近の記事」をタイトルとするblog要素、2カラムのプロジェクトcards、連絡先用のctaで構成されます。 - ブログ一覧（
page）: 何について書いているかの短いメモと、このページを親ページとする全投稿のblogリスト。 - 投稿（
blog）はブログ一覧の下に配置され、新しい順にツリー表示されます。各投稿はarticle要素（タイトル、2文のリード、カバー画像）で始まり、その後にtext、レベル2のheading、code要素が続きます。 - About、Projects、Uses、Now ページ（
page）はレベル1のheadingで始まります。About には職歴のverticalタイムライン、Uses にはカテゴリ別のツール一覧、Now には最終更新日付とともに今月取り組んでいることを記載します。 - ホームページの
folio::profile設定を入力します：名前、職種、会社、所在地、正方形の写真、一文の自己紹介、メールアドレス、プロフィールリンク。
コンポーネント
- 投稿リード：問題と読者が得られるものを示す2文。一覧カードでは導入として使用します。
- 見出し：短く具体的なレベル2見出し（「バックフィルはバッチで」）。レベル3はその下にのみ使用します。アウトラインが表示されるよう、少なくとも2つ以上の見出しを使用します。
- コード：スニペットごとに1つの
code要素、言語を設定し、最大約15行、実際に動作するコード。 - コールアウト：テキスト要素内のGitHubアラート（
[!NOTE]、[!TIP]、[!WARNING]）。投稿あたり最大1〜2つ。 - プロジェクト：プロジェクトごとに1つのカード。名前をタイトルに、リポジトリまたはデモへのリンク、何をするのかの一文（スター数、インストール数、ユーザー数などの数字を含む）、スタックをインラインコードピルで別の行に表示（例:
`PHP` `Laravel`）。 - 職歴：タイムライン項目。「2023 — 現在」のようなラベル、「役職, 会社名」のタイトル、数字を含む影響の一文、スタックをコードピルで表示。
- 数値フィギュア：最大3つの主要数値を表示するための
figuresレイアウトのcards要素。
アクセシビリティ
- スキップリンク、意味論的な見出し、ラベル付きのモード切り替え、可視の
:focus-visibleアウトラインを維持します。 - 両方のカラースキームで WCAG 2.2 AA コントラストを維持します（コードトークンも含む）。
- カバー画像と名前リンクには、ターゲットを説明する意味のある代替テキストを記述します。「ここをクリック」は使用しません。
コンテンツ
一人称で書き、読者を「あなた」と呼びかけます。具体的に記述します：バージョン、数字、失敗した点を明記します。投稿は背景説明ではなく問題提起で始め、次に何をするかの提案で締めくくります。タイトルは平易で説明的にします（「4億行テーブルにおけるゼロダウンタイムマイグレーション」）。バズワード、「単に」「ただ」、埋め草的な導入は避けます。