From c33e025fe22502466c4f53afe398e7ca77a00e4f Mon Sep 17 00:00:00 2001
From: Reorx <novoreorx@gmail.com>
Date: Wed, 7 Sep 2022 16:49:18 +0800
Subject: [PATCH] styling newsletter sub form

---
 assets/css/extended/newsletter.scss       | 38 ++++++++++++++++++++++-
 layouts/_default/single.html              |  2 +-
 layouts/newsletter/section.html           |  1 +
 layouts/partials/newsletter_sub_form.html |  8 +++++
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 layouts/partials/newsletter_sub_form.html

diff --git a/assets/css/extended/newsletter.scss b/assets/css/extended/newsletter.scss
index 899ed78..6b955d0 100644
--- a/assets/css/extended/newsletter.scss
+++ b/assets/css/extended/newsletter.scss
@@ -13,8 +13,43 @@ body.type-newsletter {
   --link-hover-color: var(--signature);
   --icon-length: 50px;
 
+  /* shared */
+  .sub-form {
+    display: flex;
+    flex-direction: column;
+    margin: calc(var(--content-gap) * 1.5) 0;
+    form {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      line-height: 1.2em;
+    }
+    input {
+      border: 3px solid var(--signature-bg-dim);
+      color: var(--secondary);
+      border-radius: 0px;
+      appearance: none;
+      outline: none;
+      background-color: var(--theme);
+      padding: 9px 15px;
+      max-width: 100%;
+      width: 100%;
+      transition: var(--link-transition);
 
-  /* regular page layout */
+      &:focus {
+        color: var(--primary);
+        border-color: var(--signature);
+      }
+    }
+    button {
+      display: block;
+      background-color: var(--signature);
+      color: var(--theme);
+      padding: 12px 15px;
+      margin-left: 20px;
+      white-space: nowrap;
+    }
+  }
 }
 
 body.type-newsletter.kind-section {
@@ -53,6 +88,7 @@ body.type-newsletter.kind-section {
   }
 }
 
+/* egular page layout */
 body.type-newsletter.kind-page {
   .newsletter-brand {
     display: flex;
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 9c68c5a..6fff034 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -54,7 +54,7 @@
     {{- end }}
 
     {{- if $isNewsletter }}
-    {{- partial "newsletter_sub_form.html"}}
+      {{- partial "newsletter_sub_form.html"}}
     {{- end }}
   </footer>
 
diff --git a/layouts/newsletter/section.html b/layouts/newsletter/section.html
index 47901f3..2863335 100644
--- a/layouts/newsletter/section.html
+++ b/layouts/newsletter/section.html
@@ -9,6 +9,7 @@
       <h1>{{ .Title }}</h1>
     </header>
     <section class="entry-content">{{ .Description | markdownify }}</section>
+    {{- partial "newsletter_sub_form.html"}}
   </div>
 
   {{- $pages := where .Pages "Params.hidden" "!=" true }}
diff --git a/layouts/partials/newsletter_sub_form.html b/layouts/partials/newsletter_sub_form.html
new file mode 100644
index 0000000..3cee447
--- /dev/null
+++ b/layouts/partials/newsletter_sub_form.html
@@ -0,0 +1,8 @@
+{{/* Add `layouts/partials/newsletter_sub_form.html` in your own code to customize the form */}}
+
+<div class="sub-form">
+  <form action="">
+    <input type="text" name="email" placeholder="Your email address">
+    <button>订阅 | Subscribe</button>
+  </form>
+</div>