feat: about 페이지 정리 및 글 목록 미리보기 복원

_includes/about.html

@@ -2,7 +2,7 @@
 <div class="about">
   <section class="about-intro">
     <p class="about-name">{{ about.intro.name }}</p>
-    <p class="about-headline">{{ about.intro.headline }}</p>
+    <h1 class="about-headline">{{ about.intro.headline }}</h1>
     {% for line in about.intro.summary %}
     <p class="about-summary">{{ line }}</p>
     {% endfor %}

_includes/post-list-item.html

@@ -14,6 +14,11 @@ <h2 class="post-item-title">
         {{ post.title }}
       </h2>
 
+      <p class="post-item-excerpt">
+        {% include no-linenos.html content=post.content %}
+        {{ content | markdownify | strip_html | normalize_whitespace | strip | truncate: 160 | escape }}
+      </p>
+
       <div class="post-item-meta">
         {% include datetime.html date=post.date lang=include.lang wrap='time' %}
         {% include read-time.html content=post.content lang=include.lang %}

_layouts/page.html

@@ -6,7 +6,7 @@
 layout.tail_includes %} {% assign has_tail = true %} {% endif %}
 
 {% assign single_column_layouts = 'home,archives,tags,categories,tag,category' | split: ',' %}
-{% if single_column_layouts contains page.layout %}
+{% if single_column_layouts contains page.layout or page.url == '/about/' %}
   {% assign single_column = true %}
 {% endif %}
 
@@ -23,7 +23,9 @@
       page.collection == 'tabs' %} {% assign tab_key = page.title | downcase %}
       {% assign title = site.data.locales[lang].tabs[tab_key] | default:
       page.title %}
+      {% unless page.url == '/about/' %}
       <h1 class="dynamic-title">{{ title }}</h1>
+      {% endunless %}
       <div class="post-content">{{ _content }}</div>
       {% else %} {{ _content }} {% endif %}
     </div>

_sass/layout/about.scss

@@ -11,7 +11,6 @@
   font-size: 1rem;
   line-height: 1.75;
   color: var(--text-color);
-  max-width: 46rem;
 
   ul,
   ol,
@@ -34,29 +33,28 @@
 
 /* ---------- Intro ---------- */
 .about-intro {
-  padding-bottom: 2.5rem;
+  padding: 1rem 0 2.5rem;
 
   .about-name {
-    font-size: 0.85rem;
+    font-size: 0.875rem;
     font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
     color: var(--about-muted);
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
   }
 
   .about-headline {
-    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
-    font-weight: 700;
+    margin: 0 0 1.25rem;
+    font-size: 2rem;
+    font-weight: 800;
     line-height: 1.35;
-    letter-spacing: -0.02em;
+    letter-spacing: -0.035em;
     color: var(--heading-color);
-    margin-bottom: 1.25rem;
     word-break: keep-all;
   }
 
   .about-summary {
     word-break: keep-all;
+    color: var(--post-list-text-color);
 
     & + .about-summary {
       margin-top: 0.5rem;
@@ -93,21 +91,20 @@
 /* ---------- Section ---------- */
 .about-section {
   border-top: 1px solid var(--about-rule);
-  padding-top: 1.75rem;
+  padding-top: 2rem;
   margin-top: 0.5rem;
 
   & + .about-section {
-    margin-top: 3rem;
+    margin-top: 3.5rem;
   }
 }
 
 #core-wrapper .about .about-section-title {
-  font-size: 0.8rem;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--about-muted);
-  margin: 0 0 1.75rem;
+  font-size: 1.5rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  color: var(--heading-color);
+  margin: 0 0 2rem;
   padding: 0;
   border: 0;
 }
@@ -154,7 +151,7 @@
   padding: 0.3rem 0.5rem;
   border-radius: 999px;
   color: var(--about-accent);
-  border: 1px solid currentColor;
+  border: 1px solid currentcolor;
 }
 
 .about-exp-role {
@@ -265,9 +262,9 @@
 /* ---------- Articles ---------- */
 .about-articles {
   margin-top: 1.75rem;
-  padding: 1rem 1.1rem;
-  border: 1px solid var(--about-rule);
-  border-radius: 0.5rem;
+  padding: 1.125rem 1.25rem;
+  border-radius: $base-radius;
+  background: var(--nav-hover-bg);
 
   li + li {
     margin-top: 0.35rem;
@@ -311,12 +308,12 @@
   gap: 0.4rem;
 
   li {
-    font-size: 0.85rem;
+    font-size: 0.8125rem;
     line-height: 1.5;
-    padding: 0.2rem 0.6rem;
-    border-radius: 0.375rem;
-    border: 1px solid var(--about-rule);
-    background: var(--card-bg, transparent);
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    color: var(--text-color);
+    background: var(--tag-bg);
   }
 
   &.about-tags-sm {
@@ -345,6 +342,10 @@
 
 /* ---------- Mobile ---------- */
 @media all and (max-width: 576px) {
+  .about-intro .about-headline {
+    font-size: 1.5rem;
+  }
+
   .about-row {
     grid-template-columns: minmax(0, 1fr);
   }

_sass/layout/home.scss

@@ -128,12 +128,21 @@ $home-content-width: 760px;
   .post-item-title {
     @extend %text-clip;
 
-    margin: 0 0 0.625rem;
+    margin: 0 0 0.5rem;
     font-size: 1.3125rem;
     font-weight: 700;
     line-height: 1.45;
   }
 
+  .post-item-excerpt {
+    @extend %text-clip;
+
+    margin: 0 0 0.875rem;
+    font-size: 0.9375rem;
+    line-height: 1.65;
+    color: var(--post-list-text-color);
+  }
+
   .post-item-meta {
     display: flex;
     align-items: center;