Rework the email system to use MailerLite as my main provider and integrate the full signup form and all.

Author: chrisspiegl

_includes/layout.pug

@@ -136,6 +136,13 @@ body
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
       gtag('config', 'UA-1173222-28');
+  <!-- MailerLite Universal -->
+  script(type="application/javascript").
+    (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
+    .push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
+    n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
+    (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
+    ml('account', '190754');
 
   //- Littlefoot - Footnotes
   script(src="https://cdn.jsdelivr.net/npm/littlefoot@3.3/dist/littlefoot.min.js")

assets/scss/_navigation.scss

@@ -2,6 +2,7 @@
 
   &.gear {
     ul {
+      display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
 
       @media screen and (max-width: $break-mobile) {
@@ -14,12 +15,16 @@
     list-style: none;
     padding: 0;
     margin: 0;
-    display: grid;
-    // grid-gap: 0rem 1rem;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    // display: grid;
+    grid-gap: 0rem 1rem;
+    // grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
     padding-bottom: 2rem;
 
     @media screen and (max-width: $break-mobile) {
+      display: grid;
       grid-template-columns: 1fr 1fr 1fr;
     }
 

assets/scss/style.scss

@@ -492,6 +492,15 @@ p code {
   }
 }
 
+.cal-scheduling {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
+
 .header-image-three {
   width: 100vw;
   position: relative;
@@ -519,50 +528,70 @@ p code {
   }
 }
 
+#newsletter-embed #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button,
 .btn {
-  text-align: center;
-  color: var(--color-body);
-  text-decoration: none;
-  border: 2px solid var(--color-link);
-  background-color: transparent;
-  padding: 1rem;
-  // margin: 1rem;
-  letter-spacing: .1rem;
+  text-align: center !important;
+  color: var(--color-body) !important;
+  text-decoration: none !important;
+  border: 2px solid var(--color-link) !important;
+  background-color: transparent !important;
+  padding: 1rem !important;
+  // margin: 1rem !important;
+  letter-spacing: .1rem !important;
 }
 
+#newsletter-embed #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover,
 .btn:hover {
-  color: var(--color-white);
-  background-color: var(--color-light);
-  text-decoration: none;
+  color: var(--color-white) !important;
+  background-color: var(--color-light) !important;
+  text-decoration: none !important;
 }
 
 .btn-block {
-  width: 100%;
-  display: block;
+  width: 100% !important;
+  display: block !important;
 }
 
 #newsletter-embed {
   padding: 3rem 0 4rem;
 }
 
+#newsletter-embed #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input,
 input:not([type=submit]) {
-  width: 100%;
-  padding: .5rem;
-  margin: .5rem 0;
-  font-size: var(--font-size-base);
-  color: var(--color-body);
-  border: 2px solid var(--color-light);
-  background-color: transparent;
+  height: inherit !important;
+  line-height: inherit !important;
+  font-family: inherit !important;
+  width: 100% !important;
+  padding: .5rem !important;
+  margin: .5rem 0 !important;
+  font-size: var(--font-size-base) !important;
+  color: var(--color-body) !important;
+  border: 2px solid var(--color-light) !important;
+  background-color: transparent !important;
+  border-radius: 0% !important;
+}
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: var(--color-lighter) !important;
+  opacity: .5 !important; /* Firefox */
 }
 
 input[type=submit] {
-  padding: .5rem;
-  margin: .5rem 0;
+  font-family: inherit !important;
+  padding: .5rem !important;
+  margin: .5rem 0 !important;
 }
 
+#newsletter-embed #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button,
 input[type=submit],
 .btn,
 .btn-block {
-  cursor: pointer;
-  font-size: var(--font-size-minus-1);
+  font-family: inherit !important;
+  cursor: pointer !important;
+  font-size: var(--font-size-minus-1) !important;
+}
+
+#mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
+#mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
+  padding: 0 !important;
 }

newsletter/almost.md

@@ -0,0 +1,11 @@
+---
+title: Newsletter — Final Step
+---
+
+# Newsletter — Final Step
+
+You're almost there, just one more step!
+
+Please check your inbox and confirm your subscription to complete the process.
+
+And remember, if you ever wish to unsubscribe, you can easily do so by clicking the "unsubscribe" link provided at the end of each email you receive.

newsletter.md newsletter/index.md

@@ -2,25 +2,30 @@
 title: Newsletter
 ---
 
-# Almost Weekly Newsletter
+# The Chris Spiegl Newsletter
 
-In a world where stories disappear after 24 hours and we are overwhelmed by all kinds of tweets, instagram posts, and more… I see myself going back to email more and more.
+In a fast-paced digital world where stories vanish within 24 hours and social media feeds can be overwhelming, I find solace in the timeless appeal of email.
 
-This is my newsletter where I compile my thoughts, share what is going on, and send out recommendations of services, books, movies, and other things that I have found.
+Welcome to my newsletter, where I gather my thoughts, share personal updates, and curate recommendations of services, books, movies, and more that have caught my attention.
 
-You can unsubscribe at any moment (at the bottom of each email).
+Thank you for joining me on this journey of meaningful content and discoveries. Let's explore and connect in the realm of email.
 
-<div id="newsletter-embed" class="paragraph text-center">
+<!-- MailerLite Newsletter Embed -->
+<div id="newsletter-embed" class="ml-embedded paragraph text-center" data-form="TUhoiV"></div>
+
+Remember, you have the freedom to unsubscribe at any moment. Simply click the "unsubscribe" link at the bottom of each email.
+
+<!-- SendFox Newsletter Embed -->
+<!-- <div id="newsletter-embed" class="paragraph text-center">
 <form method="post" action="https://sendfox.com/form/36wy84/1d5zr5" class="sendfox-form" id="1d5zr5" data-async="true" data-recaptcha="true">
   <input type="text" class="text-center" placeholder="First Name" name="first_name" required />
   <input type="email" class="text-center" placeholder="Email" name="email" required />
   <label><input type="checkbox" style="display: inline; width: auto;" name="gdpr" value="1" required /> I agree to receive email updates and promotions.</label>
-  <!-- no botz please -->
   <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="a_password" tabindex="-1" value="" autocomplete="off" /></div>
   <button type="submit" class="btn btn-block">Join!</button>
 </form>
 <script src="https://sendfox.com/js/form.js"></script>
-</div>
+</div> -->
 
 <!-- You can also access the archive of newsletters I have [sent in the past](/newsletter/archive). ## THIS ARCHIVE IS REDIRECTING - MAY IMPLEMENT LOCAL ARCHIVE BASED ON CATEGORY ## -->
 

newsletter/welcome.md

@@ -0,0 +1,15 @@
+---
+title: Newsletter — Welcome
+---
+
+# Newsletter — Welcome
+
+Welcome aboard! You have successfully signed up for the newsletter.
+
+Get ready to receive the latest updates, valuable insights, and exciting content straight to your inbox.
+
+I appreciate your support, and if you ever have any suggestions, ideas, or feedback, please don't hesitate to reach out by replying to any of the emails.
+
+Remember, you have the freedom to unsubscribe at any time. Simply click the "unsubscribe" link located at the bottom of every email.
+
+Thank you for joining the community, and I am looking forward to delivering valuable content to you soon!