Add a newsletter widget

themes/svrjs/_config.yml

@@ -28,6 +28,7 @@ copyright:
 sidebar: right
 widgets:
 - search
+- newsletter
 - category
 - tagcloud
 - archive

themes/svrjs/layout/_widget/newsletter.ejs

@@ -0,0 +1,11 @@
+<% if (site.posts.length){ %>
+  <div class="widget-wrap">
+    <h3 class="widget-title">Subscribe to newsletter</h3>
+    <div class="widget">
+        <form action="https://newsletter.svrjs.org/subscribe.svr" method="post" accept-charset="UTF-8" class="subscribe-form">
+          <input type="email" name="email" class="subscribe-form-input" placeholder="Email address"><button type="submit" class="subscribe-form-submit">Subscribe</button>
+          <!--Input and button on the same line to make IE9 work-->
+        </form>
+    </div>
+  </div>
+<% } %>

themes/svrjs/source/css/_partial/sidebar-aside.styl

@@ -70,4 +70,45 @@
         background-color: #007000
         @media screen and (prefers-color-scheme: dark)
           background-color: #00d000
+  .subscribe-form
+    width: 100%
+    margin: auto
+    display: flex
+    position: relative
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.125)
+    @media screen and (prefers-color-scheme: dark)
+      box-shadow: 0 3px 6px rgba(127, 127, 127, 0.125)
+    .subscribe-form-input
+      padding: 0.25em
+      font-family: inherit
+      font-size: 0.925em
+      width: 65%
+      vertical-align: middle
+      border: 0.125em #00b000 solid
+      outline: none
+      border-radius: 0px
+      box-sizing: border-box
+      @media screen and (prefers-color-scheme: dark)
+        background-color: #000000
+        color: #ffffff
+    .subscribe-form-submit
+      padding: 0.3125em
+      font-family: inherit
+      font-size: 0.925em
+      width: 35%
+      cursor: pointer
+      vertical-align: middle
+      background-color: #00b000
+      border: none
+      outline: none
+      color: #ffffff
+      box-sizing: border-box
+      &:hover
+        background-color: #007000
+        @media screen and (prefers-color-scheme: dark)
+          background-color: #00d000
+      &:focus
+        background-color: #007000
+        @media screen and (prefers-color-scheme: dark)
+          background-color: #00d000