diff --git a/exampleSite/content/essays/_index.md b/exampleSite/content/essays/_index.md
index dcded25..0c5c49b 100644
--- a/exampleSite/content/essays/_index.md
+++ b/exampleSite/content/essays/_index.md
@@ -8,3 +8,5 @@ draft: false
 ---
 
 <!--more-->
+
+*There are some short articles.*
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 393c3c1..1c0d36d 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,33 +1,39 @@
 {{ define "main" }}
 
-<section id="archive">
-    {{ range .Data.Pages.GroupByDate "2006" }}
-        <div class="group">
-            <h3 class="key">
-                {{ .Key }}
-            </h3>
-
-            {{ range .Pages }}
-                <div class="value">
-                    <time class="date" datetime="{{ .PublishDate }}">{{ .PublishDate.Format "01/02" }}</time>
-
-                    <div class="title">
-
-                        <a href="{{ .Permalink }}">{{ .Title }}</a>
-
-                        {{ with .Params.tags }}
-                            {{ range . }}
-                                <a class="tags" href="{{ "/tags/" | relURL }}{{ . | urlize }}">{{ . }}</a>
-                            {{ end }}
-                        {{ end }}
-
-                    </div>
-                </div>
-            {{ end }}
-
-        </div>
+<div>
+    {{ if trim .Content " \n" }}
+        <div class="content archive-hint">{{ .Content }}</div>
     {{ end }}
 
-</section>
+    <section id="archive">
+        {{ range .Data.Pages.GroupByDate "2006" }}
+            <div class="group">
+                <h3 class="key">
+                    {{ .Key }}
+                </h3>
+
+                {{ range .Pages }}
+                    <div class="value">
+                        <time class="date" datetime="{{ .PublishDate }}">{{ .PublishDate.Format "01/02" }}</time>
+
+                        <div class="title">
+
+                            <a href="{{ .Permalink }}">{{ .Title }}</a>
+
+                            {{ with .Params.tags }}
+                                {{ range . }}
+                                    <a class="tags" href="{{ "/tags/" | relURL }}{{ . | urlize }}">{{ . }}</a>
+                                {{ end }}
+                            {{ end }}
+
+                        </div>
+                    </div>
+                {{ end }}
+
+            </div>
+        {{ end }}
+
+    </section>
+</div>
 
 {{ end }}
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index 393c3c1..1c0d36d 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -1,33 +1,39 @@
 {{ define "main" }}
 
-<section id="archive">
-    {{ range .Data.Pages.GroupByDate "2006" }}
-        <div class="group">
-            <h3 class="key">
-                {{ .Key }}
-            </h3>
-
-            {{ range .Pages }}
-                <div class="value">
-                    <time class="date" datetime="{{ .PublishDate }}">{{ .PublishDate.Format "01/02" }}</time>
-
-                    <div class="title">
-
-                        <a href="{{ .Permalink }}">{{ .Title }}</a>
-
-                        {{ with .Params.tags }}
-                            {{ range . }}
-                                <a class="tags" href="{{ "/tags/" | relURL }}{{ . | urlize }}">{{ . }}</a>
-                            {{ end }}
-                        {{ end }}
-
-                    </div>
-                </div>
-            {{ end }}
-
-        </div>
+<div>
+    {{ if trim .Content " \n" }}
+        <div class="content archive-hint">{{ .Content }}</div>
     {{ end }}
 
-</section>
+    <section id="archive">
+        {{ range .Data.Pages.GroupByDate "2006" }}
+            <div class="group">
+                <h3 class="key">
+                    {{ .Key }}
+                </h3>
+
+                {{ range .Pages }}
+                    <div class="value">
+                        <time class="date" datetime="{{ .PublishDate }}">{{ .PublishDate.Format "01/02" }}</time>
+
+                        <div class="title">
+
+                            <a href="{{ .Permalink }}">{{ .Title }}</a>
+
+                            {{ with .Params.tags }}
+                                {{ range . }}
+                                    <a class="tags" href="{{ "/tags/" | relURL }}{{ . | urlize }}">{{ . }}</a>
+                                {{ end }}
+                            {{ end }}
+
+                        </div>
+                    </div>
+                {{ end }}
+
+            </div>
+        {{ end }}
+
+    </section>
+</div>
 
 {{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 8f36795..fcb544f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,5 +1,5 @@
 <header class="header-wrapper">
-    <div class="header max-wrapper">
+    <div class="header">
         <a class="site-title" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
 
         <ul class="menu">
diff --git a/static/css/style.css b/static/css/style.css
index efdc817..97ccff6 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,8 +1,8 @@
 :root {
   --fonts-sans-serif: Roboto, Helvetica, Tahoma, Arial,
                       "DejaVu Sans", "Liberation Sans",
-                      
-                      "WenQuanYi Zen Hei", "WenQuanYi Micro Hei", 
+
+                      "WenQuanYi Zen Hei", "WenQuanYi Micro Hei",
                       "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                       "Noto Sans CJK",
                       sans-serif;
@@ -105,7 +105,7 @@ body {
 .main,
 .side-recent,
 .side-categories,
-.side-tags 
+.side-tags
 { background-color: var(--color-light-5); }
 
 /* place header in the center of header-wrapper */
@@ -120,12 +120,6 @@ body {
   margin-bottom: 0;
 }
 
-.max-wrapper {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
 
 /********** set up break point **********/
 
@@ -142,13 +136,13 @@ body {
 .header-wrapper, .footer { width: 100vw;}
 .main-wrapper { width: calc(100vw - 2 * var(--len-3));}
 
-
 /************************/
 /* set up header layout */
 /************************/
 
 .header {
-  padding: var(--len-3); 
+  padding: var(--len-3);
+  width: 100%;
 }
 
 /* place title and menus horizonally */
@@ -238,7 +232,7 @@ body {
 /************************/
 
 .footer {
-  padding: var(--len-4) 0; 
+  padding: var(--len-4) 0;
   font-size: var(--font-size-1);
 }
 
@@ -265,7 +259,6 @@ body {
     color: var(--color-fav-2);
 }
 
-
 /**********************************/
 /* set up home page's list layout */
 /**********************************/
@@ -356,12 +349,12 @@ body {
 
 .single .taxonomies { margin-top: var(--len-1); }
 
-.single > hr { 
+.single > hr {
   border: none;
   background-color: var(--color-fav-1);
   height: 1px;
 
-  width: 90%; 
+  width: 90%;
   margin: var(--len-3) 0;
 }
 
@@ -505,16 +498,16 @@ body {
   overflow-x: auto;
 }
 
-/********************************/
-/* setup taxonomies page layout */
-/********************************/
+/**************************/
+/* setup list page layout */
+/**************************/
 
 #archive {
   padding-left: var(--len-3);
 }
 
 #archive .group {
-  margin: var(--len-4) auto; 
+  margin: var(--len-4) auto;
 }
 #archive .group .key {
   font-size: var(--font-size-4);
@@ -642,3 +635,18 @@ body {
   color: var(--color-black-3)
 }
 
+/**********/
+/** misc **/
+/**********/
+
+.archive-hint {
+  padding-left: var(--len-4);
+  color: var(--color-fav-1);
+}
+
+.max-wrapper {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}