enhance subscribe form styling

assets/css/extended/newsletter.scss

@@ -13,6 +13,7 @@ body.type-newsletter {
   --signature: #CB3A56;
   --signature-bg: rgba(203, 58, 87, 0.239);
   --signature-bg-dim: rgba(203, 58, 87, 0.147);
+  --signature-bg-dimmer: rgba(203, 58, 87, 0.084);
   --main-border: 5px solid var(--signature);
   --icon-length: 50px;
   --icon-font-size: 32px;
@@ -43,19 +44,27 @@ body.type-newsletter {
   }
 
   /* shared */
-  .sub-form {
+  .subscribe-form {
-    display: flex;
+    margin: calc(var(--content-gap) * 2) 0;
-    flex-direction: column;
+
-    margin: calc(var(--content-gap) * 1.5) 0;
     form {
       display: flex;
+      flex-direction: column;
       line-height: 1.2em;
       flex-wrap: wrap;
     }
-    input {
+    .input-group {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .subscribe-option {
+      margin-top: 8px;
+    }
+    input[type=text] {
       border: 3px solid var(--signature-bg-dim);
       color: var(--secondary);
       border-radius: 0px;
+      border-color: var(--signature-bg);
       appearance: none;
       outline: none;
       background-color: var(--theme);
@@ -68,7 +77,7 @@ body.type-newsletter {
         border-color: var(--signature);
       }
     }
-    button, input[type=submit] {
+    button {
       display: block;
       background-color: var(--signature);
       color: var(--theme);
@@ -76,13 +85,40 @@ body.type-newsletter {
       margin-left: var(--content-gap);
       white-space: nowrap;
     }
+    label, .label {
+      font-size: .85em;
+      margin-right: 16px;
     }
-  @media screen and (max-width: $small) {
+    .label {
-    .sub-form {
+      color: var(--secondary);
-      button {
+      line-height: 1.2;
+    }
+    input[type=radio] {
       margin-left: 0;
-        margin-top: calc(var(--content-gap)/2);
+      margin-top: 0;
-        flex-grow: 1;
+    }
+  }
+
+  @media screen and (max-width: $small) {
+    .subscribe-form {
+      font-size: .9em;
+      input[type=text] {
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+      button {
+        width: 96px;
+        margin-left: 0;
+        padding-left: 0;
+        padding-right: 0;
+      }
+      .hide-for-sm {
+        display: none;
+      }
+      .label {
+        display: block;
+        width: 100%;
+        margin-bottom: 4px;
       }
     }
   }
@@ -284,18 +320,15 @@ body.type-newsletter.kind-page {
 
   .newsletter-sub {
     margin-top: calc(var(--content-gap) * 1.5);
-    background-color: var(--signature-bg-dim);
+    background-color: var(--signature-bg-dimmer);
-    padding: 1.5em 1.2em 1.2em;
+    padding: var(--content-gap) var(--gap);
     .notice {
       font-size: .9em;
       color: var(--signature);
       line-height: 1.6;
     }
-    .sub-form {
+    .subscribe-form {
-      margin: 1em 0;
+      margin: var(--content-gap) 0 0;
-      input {
-        border-color: var(--signature-bg);
-      }
     }
   }
 }

layouts/_default/single.html

@@ -56,7 +56,7 @@
     {{- if $isNewsletter }}
       <div class="newsletter-sub">
         <div class="notice">
-          Thanks for reading, if you like it, please subscribe below.<br>
+          <div style="font-weight: bold">Thanks for reading, if you like it, please subscribe below.</div>
           <div style="font-size: .85em; margin-top: 8px;">感谢你能读到这里，如果觉得有趣的话，欢迎在下方输入邮箱进行订阅。</div>
         </div>
         {{- partial "newsletter_sub_form.html"}}

layouts/partials/newsletter_sub_form.html

@@ -1,6 +1,6 @@
 {{/* Add `layouts/partials/newsletter_sub_form.html` in your own code to customize the form */}}
 
-<div class="sub-form">
+<div class="subscribe-form">
   <form action="">
     <input type="text" name="email" placeholder="Your email address">
     <button>Subscribe | 订阅</button>