Skip to content

Commit f2765b4

Browse files
chrisspieglchrisspiegl
committed
Rework the email system to use MailerLite as my main provider and integrate the full signup form and all.
1 parent b502f19 commit f2765b4

File tree

6 files changed

+106
-34
lines changed

6 files changed

+106
-34
lines changed

‎_includes/layout.pug

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,13 @@ body
136136
function gtag(){dataLayer.push(arguments);}
137137
gtag('js', new Date());
138138
gtag('config', 'UA-1173222-28');
139+
<!-- MailerLite Universal -->
140+
script(type="application/javascript").
141+
(function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
142+
.push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
143+
n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
144+
(window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
145+
ml('account', '190754');
139146

140147
//- Littlefoot - Footnotes
141148
script(src="https://cdn.jsdelivr.net/npm/littlefoot@3.3/dist/littlefoot.min.js")

‎assets/scss/_navigation.scss

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
&.gear {
44
ul {
5+
display: grid;
56
grid-template-columns: 1fr 1fr 1fr 1fr;
67

78
@media screen and (max-width: $break-mobile) {
@@ -14,12 +15,16 @@
1415
list-style: none;
1516
padding: 0;
1617
margin: 0;
17-
display: grid;
18-
// grid-gap: 0rem 1rem;
19-
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
18+
// display: grid;
19+
grid-gap: 0rem 1rem;
20+
// grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
21+
display: flex;
22+
flex-direction: row;
23+
justify-content: space-around;
2024
padding-bottom: 2rem;
2125

2226
@media screen and (max-width: $break-mobile) {
27+
display: grid;
2328
grid-template-columns: 1fr 1fr 1fr;
2429
}
2530

‎assets/scss/style.scss

Lines changed: 53 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -492,6 +492,15 @@ p code {
492492
}
493493
}
494494

495+
.cal-scheduling {
496+
width: 100vw;
497+
position: relative;
498+
left: 50%;
499+
right: 50%;
500+
margin-left: -50vw;
501+
margin-right: -50vw;
502+
}
503+
495504
.header-image-three {
496505
width: 100vw;
497506
position: relative;
@@ -519,50 +528,70 @@ p code {
519528
}
520529
}
521530

531+
#newsletter-embed #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button,
522532
.btn {
523-
text-align: center;
524-
color: var(--color-body);
525-
text-decoration: none;
526-
border: 2px solid var(--color-link);
527-
background-color: transparent;
528-
padding: 1rem;
529-
// margin: 1rem;
530-
letter-spacing: .1rem;
533+
text-align: center !important;
534+
color: var(--color-body) !important;
535+
text-decoration: none !important;
536+
border: 2px solid var(--color-link) !important;
537+
background-color: transparent !important;
538+
padding: 1rem !important;
539+
// margin: 1rem !important;
540+
letter-spacing: .1rem !important;
531541
}
532542

543+
#newsletter-embed #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover,
533544
.btn:hover {
534-
color: var(--color-white);
535-
background-color: var(--color-light);
536-
text-decoration: none;
545+
color: var(--color-white) !important;
546+
background-color: var(--color-light) !important;
547+
text-decoration: none !important;
537548
}
538549

539550
.btn-block {
540-
width: 100%;
541-
display: block;
551+
width: 100% !important;
552+
display: block !important;
542553
}
543554

544555
#newsletter-embed {
545556
padding: 3rem 0 4rem;
546557
}
547558

559+
#newsletter-embed #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input,
548560
input:not([type=submit]) {
549-
width: 100%;
550-
padding: .5rem;
551-
margin: .5rem 0;
552-
font-size: var(--font-size-base);
553-
color: var(--color-body);
554-
border: 2px solid var(--color-light);
555-
background-color: transparent;
561+
height: inherit !important;
562+
line-height: inherit !important;
563+
font-family: inherit !important;
564+
width: 100% !important;
565+
padding: .5rem !important;
566+
margin: .5rem 0 !important;
567+
font-size: var(--font-size-base) !important;
568+
color: var(--color-body) !important;
569+
border: 2px solid var(--color-light) !important;
570+
background-color: transparent !important;
571+
border-radius: 0% !important;
572+
}
573+
574+
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
575+
color: var(--color-lighter) !important;
576+
opacity: .5 !important; /* Firefox */
556577
}
557578

558579
input[type=submit] {
559-
padding: .5rem;
560-
margin: .5rem 0;
580+
font-family: inherit !important;
581+
padding: .5rem !important;
582+
margin: .5rem 0 !important;
561583
}
562584

585+
#newsletter-embed #mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button,
563586
input[type=submit],
564587
.btn,
565588
.btn-block {
566-
cursor: pointer;
567-
font-size: var(--font-size-minus-1);
589+
font-family: inherit !important;
590+
cursor: pointer !important;
591+
font-size: var(--font-size-minus-1) !important;
592+
}
593+
594+
#mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
595+
#mlb2-6177287.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
596+
padding: 0 !important;
568597
}

‎newsletter/almost.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Newsletter — Final Step
3+
---
4+
5+
# Newsletter — Final Step
6+
7+
You're almost there, just one more step!
8+
9+
Please check your inbox and confirm your subscription to complete the process.
10+
11+
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 renamed to ‎newsletter/index.md

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,30 @@
22
title: Newsletter
33
---
44

5-
# Almost Weekly Newsletter
5+
# The Chris Spiegl Newsletter
66

7-
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.
7+
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.
88

9-
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.
9+
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.
1010

11-
You can unsubscribe at any moment (at the bottom of each email).
11+
Thank you for joining me on this journey of meaningful content and discoveries. Let's explore and connect in the realm of email.
1212

13-
<div id="newsletter-embed" class="paragraph text-center">
13+
<!-- MailerLite Newsletter Embed -->
14+
<div id="newsletter-embed" class="ml-embedded paragraph text-center" data-form="TUhoiV"></div>
15+
16+
Remember, you have the freedom to unsubscribe at any moment. Simply click the "unsubscribe" link at the bottom of each email.
17+
18+
<!-- SendFox Newsletter Embed -->
19+
<!-- <div id="newsletter-embed" class="paragraph text-center">
1420
<form method="post" action="https://sendfox.com/form/36wy84/1d5zr5" class="sendfox-form" id="1d5zr5" data-async="true" data-recaptcha="true">
1521
<input type="text" class="text-center" placeholder="First Name" name="first_name" required />
1622
<input type="email" class="text-center" placeholder="Email" name="email" required />
1723
<label><input type="checkbox" style="display: inline; width: auto;" name="gdpr" value="1" required /> I agree to receive email updates and promotions.</label>
18-
<!-- no botz please -->
1924
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="a_password" tabindex="-1" value="" autocomplete="off" /></div>
2025
<button type="submit" class="btn btn-block">Join!</button>
2126
</form>
2227
<script src="https://sendfox.com/js/form.js"></script>
23-
</div>
28+
</div> -->
2429

2530
<!-- 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 ## -->
2631

‎newsletter/welcome.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: Newsletter — Welcome
3+
---
4+
5+
# Newsletter — Welcome
6+
7+
Welcome aboard! You have successfully signed up for the newsletter.
8+
9+
Get ready to receive the latest updates, valuable insights, and exciting content straight to your inbox.
10+
11+
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.
12+
13+
Remember, you have the freedom to unsubscribe at any time. Simply click the "unsubscribe" link located at the bottom of every email.
14+
15+
Thank you for joining the community, and I am looking forward to delivering valuable content to you soon!

0 commit comments

Comments
 (0)