adding newsletter toast

Author: andersource

_layouts/post.html

@@ -37,7 +37,8 @@ <h2>{{ page.description | escape }}</h2>
   <p>Sign up here to get updates on new posts:</p>
   <input type="email" name="email" id="email" placeholder="email"
          required style="font-family: Roboto; width: 45%;" />
-  <input type="submit" value="Subscribe" onclick="validateSubmit()" style="font-family: Roboto;" />
+  <input type="submit" value="Subscribe" style="font-family: Roboto;" />
+  <div id="subscribeToast">Thanks for subscribing!</div>
 </form>
 
 <iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
@@ -47,6 +48,15 @@ <h2>{{ page.description | escape }}</h2>
   function clearEmail() {
     setTimeout(function() {
       document.querySelector('#email').value = '';
+      showToast();
     }, 5);
   }
+
+  function showToast() {
+    const toast = document.querySelector("#subscribeToast");
+    toast.classList.add('show');
+    setTimeout(function() {
+      toast.classList.remove('show');
+    }, 3000);
+  }
 </script>

assets/css/extra.css

@@ -83,4 +83,46 @@ figcaption {
 .spoiler p::selection {
     background: rgb(160, 140, 152);
     color: #fafafa;
-}
+}
+
+#subscribeToast {
+    visibility: hidden;
+    min-width: 250px;
+    margin-left: -125px;
+    background-color: #334;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    padding: 16px;
+    position: fixed;
+    z-index: 1;
+    left: 50%;
+    bottom: 30px;
+
+    &.show {
+        visibility: visible;
+        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+        animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    }
+}
+
+@-webkit-keyframes fadein {
+    from {bottom: 0; opacity: 0;}
+    to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+    from {bottom: 0; opacity: 0;}
+    to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 0; opacity: 0;}
+}
+