move .first-entry css to main.css, styling newsletter section

assets/css/common/main.css

@@ -14,7 +14,7 @@
 }
 mark {
     margin: 0 -0.4em;
-    padding: 0.1em 0.4em;
+    padding: 0em 0.4em;
     border-radius: 0.8em 0.3em;
     background: transparent;
     background-image: linear-gradient(
@@ -27,6 +27,51 @@ mark {
     box-decoration-break: clone;
 }
 
+/* for home and section page */
+.first-entry {
+    position: relative;
+    min-height: 320px;
+    margin: var(--gap) 0 calc(var(--gap) * 2) 0;
+}
+
+.first-entry .entry-header {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    margin: var(--gap) 0 calc(var(--gap) * 2);
+}
+
+.first-entry .entry-header h1 {
+    font-size: 34px;
+    line-height: 1.3;
+}
+@media screen and (max-width: 400px) {
+    .first-entry .entry-header h1 {
+        font-size: 30px;
+    }
+}
+
+.first-entry .entry-content {
+    margin: 14px 0;
+    font-size: 17px;
+    color: var(--primary);
+    line-height: 1.6em;
+    display: block;
+    overflow: initial;  /* fix <mark> edge get cut */
+}
+
+.first-entry .entry-content p {
+    margin-bottom: .8em;
+}
+.first-entry .entry-content li p {
+    margin-bottom: .5em;
+}
+
+.first-entry .entry-footer {
+    font-size: 14px;
+}
+
+
 /* for post page */
 .main.post {
     max-width: calc(var(--post-width) + var(--gap) * 2);

assets/css/common/post-entry.css

@@ -1,46 +1,3 @@
-.first-entry {
-    position: relative;
-    min-height: 320px;
-    margin: var(--gap) 0 calc(var(--gap) * 2) 0;
-}
-
-.first-entry .entry-header {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    margin: var(--gap) 0 calc(var(--gap) * 2);
-}
-
-.first-entry .entry-header h1 {
-    font-size: 34px;
-    line-height: 1.3;
-}
-@media screen and (max-width: 400px) {
-    .first-entry .entry-header h1 {
-        font-size: 30px;
-    }
-}
-
-.first-entry .entry-content {
-    margin: 14px 0;
-    font-size: 17px;
-    color: var(--primary);
-    line-height: 1.6em;
-    display: block;
-    overflow: initial;  /* fix <mark> edge get cut */
-}
-
-.first-entry .entry-content p {
-    margin-bottom: .8em;
-}
-.first-entry .entry-content li p {
-    margin-bottom: .5em;
-}
-
-.first-entry .entry-footer {
-    font-size: 14px;
-}
-
 .home-info .entry-content {
     -webkit-line-clamp: unset;
 }

assets/css/extended/newsletter.scss

@@ -42,8 +42,12 @@ body.type-newsletter.kind-section {
     text-align: center;
   }
 
-  .page-header {
+  .main {
-    h1 {
+    .content {
+      max-width: calc(var(--post-width));
+      margin: 0 auto;
+    }
+    .entry-header h1 {
       text-align: center;
     }
   }

layouts/_default/archives.html

@@ -1,7 +1,7 @@
 {{- define "main" }}
 
 <header class="page-header">
-  <h1>{{ .Title }} !</h1>
+  <h1>{{ .Title }}</h1>
   {{- if .Description }}
   <div class="post-description">
     {{ .Description }}

layouts/newsletter/section.html

@@ -3,14 +3,13 @@
 {{- define "main" }}
 <div class="main-icon">＠</div>
 
-<header class="page-header">
+<div class="content">
+  <div class="first-entry">
+    <header class="entry-header">
       <h1>{{ .Title }}</h1>
-  {{- with .Param "archivesSlug" }}
-  <div>
-    <a href="{{ $.RelPermalink }}{{ . }}/">Archives</a>
-  </div>
-  {{- end }}
     </header>
+    <section class="entry-content">{{ .Description | markdownify }}</section>
+  </div>
 
   {{- $pages := where .Pages "Params.hidden" "!=" true }}
 
@@ -63,4 +62,11 @@
   </footer>
   {{- end }}
 
+  {{- with .Param "archivesSlug" }}
+  <div>
+    <a href="{{ $.RelPermalink }}{{ . }}/">Archives</a>
+  </div>
+  {{- end }}
+
+</div>
 {{ end }}