feat: 公開コンテンツとサイト表示を実運用向けに更新

サンプル中心だった初期コンテンツを整理し、最初の挨拶Noteとollama-webのSoftware記事、画面キャプチャーを追加する。Aboutとサイト説明はzola.tomlの値を参照する構成に揃え、Software一覧から自前cgitへ案内する。不要になったサンプルNotesとSoftwareは削除する。

ホームの重複する紹介要素を取り除き、見出しサイズ、ページ余白、記事内の見出し間隔、一覧行間を縮小する。bodyとmainをFlexレイアウト化して短いページでもフッターの位置と内側余白を統一し、Software詳細のメタ情報が奇数項目でも罫線と列幅を維持する。

NotesとSoftwareのFront Matterを網羅したコピー用テンプレートと利用手順をdoc/content-templatesへ追加し、設計書と仕様書を現在の構成へ同期する。生成物に加えてdraftディレクトリをGit管理対象外とし、公開前の記事をローカルだけで管理できるようにする。

7 files changed, 44 insertions, 43 deletions

diff --git a/sass/_archive.scss b/sass/_archive.scss
index 32318f5..b31a79d 100644
--- a/sass/_archive.scss
+++ b/sass/_archive.scss
@@ -8,7 +8,7 @@
   display: grid;
   grid-template-columns: 8rem minmax(0, 1fr);
   gap: 1.5rem;
-  padding-block: 1.25rem;
+  padding-block: 1rem;
   border-bottom: var(--rule);
 }
 
@@ -48,8 +48,8 @@
 .archive-year {
   display: grid;
   grid-template-columns: 7rem minmax(0, 1fr);
-  gap: 2rem;
-  padding-block: 2rem;
+  gap: 1.5rem;
+  padding-block: 1.5rem;
   border-bottom: var(--rule);
 }
 
@@ -69,7 +69,7 @@
 }
 
 .empty-state {
-  padding-block: 2rem;
+  padding-block: 1.5rem;
   border-block: var(--rule);
   color: var(--color-muted);
 }
diff --git a/sass/_article.scss b/sass/_article.scss
index 91a0ac4..aec78d4 100644
--- a/sass/_article.scss
+++ b/sass/_article.scss
@@ -1,16 +1,16 @@
 .article-header {
-  margin-bottom: 2.5rem;
+  margin-bottom: 1.75rem;
 }
 
 .article-header h1 {
-  margin-block: 0.7rem 1.25rem;
+  margin-block: 0.55rem 1rem;
 }
 
 .article-dates {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 1.5rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
   color: var(--color-muted);
   font-size: 0.78rem;
 }
@@ -21,8 +21,8 @@
 }
 
 .toc {
-  margin-bottom: 3.5rem;
-  padding: 1.25rem 1.5rem;
+  margin-bottom: 2.5rem;
+  padding: 1rem 1.25rem;
   border-block: var(--rule);
   background: var(--color-surface);
 }
@@ -54,7 +54,7 @@
 }
 
 .prose > * + * {
-  margin-top: 1.45em;
+  margin-top: 1.2em;
 }
 
 .prose h2,
@@ -63,13 +63,13 @@
 }
 
 .prose h2 {
-  margin-top: 3.2em;
-  padding-top: 0.8em;
+  margin-top: 2.2em;
+  padding-top: 0.65em;
   border-top: var(--rule);
 }
 
 .prose h3 {
-  margin-top: 2.3em;
+  margin-top: 1.75em;
 }
 
 .prose .zola-anchor {
@@ -134,8 +134,8 @@
 }
 
 .related-content {
-  margin-top: 4rem;
-  padding-top: 1.5rem;
+  margin-top: 3rem;
+  padding-top: 1.25rem;
   border-top: var(--rule);
 }
 
diff --git a/sass/_base.scss b/sass/_base.scss
index d460c41..5546dec 100644
--- a/sass/_base.scss
+++ b/sass/_base.scss
@@ -1,4 +1,6 @@
 body {
+  display: flex;
+  flex-direction: column;
   min-height: 100vh;
   overflow-x: hidden;
   overflow-wrap: anywhere;
diff --git a/sass/_footer.scss b/sass/_footer.scss
index 2d5c475..b82576a 100644
--- a/sass/_footer.scss
+++ b/sass/_footer.scss
@@ -1,5 +1,5 @@
 .site-footer {
-  margin-top: 4rem;
+  flex: none;
   border-top: var(--rule);
   color: var(--color-muted);
   font-size: 0.85rem;
@@ -10,7 +10,8 @@
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
-  min-height: 5rem;
+  min-height: 0;
+  padding-block: 1rem;
 }
 
 .footer-inner nav {
@@ -24,6 +25,5 @@
     flex-direction: column;
     justify-content: center;
     gap: 0.3rem;
-    padding-block: 1rem;
   }
 }
diff --git a/sass/_layout.scss b/sass/_layout.scss
index 126fa96..eac8eaa 100644
--- a/sass/_layout.scss
+++ b/sass/_layout.scss
@@ -5,7 +5,8 @@
 }
 
 .site-main {
-  min-height: 65vh;
+  flex: 1 0 auto;
+  min-height: 0;
 }
 
 .narrow,
@@ -16,14 +17,10 @@
 }
 
 .home-intro {
-  padding-block: clamp(4rem, 10vw, 7rem);
+  padding-block: clamp(2.25rem, 5vw, 3.5rem);
   border-bottom: var(--rule);
 }
 
-.home-intro h1 {
-  margin-bottom: 1rem;
-}
-
 .home-intro p {
   max-width: 38rem;
 }
@@ -32,12 +29,12 @@
 .listing-page,
 .editorial-page,
 .article-page {
-  padding-block: clamp(3.5rem, 8vw, 6rem);
+  padding-block: clamp(2.25rem, 5vw, 4rem);
 }
 
 .home-sections {
   display: grid;
-  gap: clamp(4rem, 9vw, 7rem);
+  gap: clamp(3rem, 6vw, 5rem);
 }
 
 .section-heading {
@@ -56,7 +53,7 @@
 
 .home-about {
   width: min(100%, var(--content-max));
-  padding-top: 2rem;
+  padding-top: 1.5rem;
   border-top: var(--rule);
 }
 
@@ -66,7 +63,7 @@
 }
 
 .page-header {
-  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
+  margin-bottom: clamp(1.75rem, 4vw, 3rem);
 }
 
 .page-header h1 {
@@ -74,11 +71,11 @@
 }
 
 .editorial-page .page-header {
-  margin-bottom: 2.5rem;
+  margin-bottom: 1.75rem;
 }
 
 .error-page {
-  padding-block: clamp(5rem, 14vw, 10rem);
+  padding-block: clamp(3.5rem, 8vw, 6rem);
 }
 
 .error-page .error-code {
diff --git a/sass/_software.scss b/sass/_software.scss
index 4ad6e42..fd704b4 100644
--- a/sass/_software.scss
+++ b/sass/_software.scss
@@ -1,5 +1,5 @@
 .software-list-item {
-  padding-block: 1.3rem;
+  padding-block: 1rem;
   border-bottom: var(--rule);
 }
 
@@ -23,7 +23,7 @@
 .software-meta {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  margin-bottom: 3.5rem;
+  margin-bottom: 2.5rem;
   border-block: var(--rule);
 }
 
@@ -32,11 +32,14 @@
   grid-template-columns: 7rem minmax(0, 1fr);
   gap: 1rem;
   padding-block: 0.75rem;
-  border-bottom: var(--rule);
 }
 
-.software-meta div:nth-last-child(-n + 2) {
-  border-bottom: 0;
+.software-meta div:nth-child(n + 3) {
+  border-top: var(--rule);
+}
+
+.software-meta div:last-child:nth-child(odd) {
+  grid-column: 1 / -1;
 }
 
 .software-meta dt {
@@ -59,12 +62,11 @@
     gap: 0.3rem;
   }
 
-  .software-meta div,
-  .software-meta div:nth-last-child(-n + 2) {
-    border-bottom: var(--rule);
+  .software-meta div:nth-child(n + 2) {
+    border-top: var(--rule);
   }
 
-  .software-meta div:last-child {
-    border-bottom: 0;
+  .software-meta div:last-child:nth-child(odd) {
+    grid-column: auto;
   }
 }
diff --git a/sass/_typography.scss b/sass/_typography.scss
index 4b11814..1bc7f45 100644
--- a/sass/_typography.scss
+++ b/sass/_typography.scss
@@ -9,11 +9,11 @@ h3 {
 }
 
 h1 {
-  font-size: clamp(2rem, 5vw, 3.25rem);
+  font-size: clamp(1.8rem, 4vw, 2.5rem);
 }
 
 h2 {
-  font-size: clamp(1.35rem, 3vw, 1.7rem);
+  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
 }
 
 h3 {
@@ -38,5 +38,5 @@ time,
 .page-header > p,
 .home-intro > p {
   color: var(--color-muted);
-  font-size: 1.08rem;
+  font-size: 1rem;
 }