mirror of
https://github.com/andwati/andwati.com.git
synced 2026-10-24 20:12:16 +00:00
Added newsletter functionality
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
+++
|
||||
template = "subscription.html"
|
||||
+++
|
||||
+42
-13
@@ -44,8 +44,10 @@ body {
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex; /* Required for sticky footer. */
|
||||
flex-direction: column; /* Required for sticky footer. */
|
||||
display: flex;
|
||||
/* Required for sticky footer. */
|
||||
flex-direction: column;
|
||||
/* Required for sticky footer. */
|
||||
margin: 0;
|
||||
line-height: var(--default-line-height);
|
||||
font-size: var(--default-font-size);
|
||||
@@ -56,7 +58,8 @@ body {
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto; /* Required for sticky footer. */
|
||||
flex: 1 0 auto;
|
||||
/* Required for sticky footer. */
|
||||
}
|
||||
|
||||
/* FIXME: For reasons that utterly bewilder me, an <article> with this id needs
|
||||
@@ -72,14 +75,15 @@ main {
|
||||
}
|
||||
|
||||
header {
|
||||
overflow: hidden; /* FIXME: This WILL cut off titles that are too long! */
|
||||
overflow: hidden;
|
||||
/* FIXME: This WILL cut off titles that are too long! */
|
||||
margin-top: 1.4em;
|
||||
margin-bottom: 1.4em;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
header > h1 {
|
||||
header>h1 {
|
||||
text-align: center;
|
||||
font-size: var(--header-font-size);
|
||||
font-family: var(--default-sans-font);
|
||||
@@ -130,10 +134,32 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ---- Button down form --------------------------------------------------------*/
|
||||
.embeddable-buttondown-form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 3px;
|
||||
background-color: var(--primary-accent-color);
|
||||
border: 1px solid var(--color-primary);
|
||||
color: #ffff;
|
||||
font-weight: 400;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
input[type="email"] {
|
||||
border: 1px solid var(--color-primary);
|
||||
font-weight: 400;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* ---- Anchor links --------------------------------------------------------*/
|
||||
|
||||
/* Add a # to the left of a subheading when it references an internal link... */
|
||||
:where(h2, h3, h4, h5, h6) > a[href^="#"]::before {
|
||||
:where(h2, h3, h4, h5, h6)>a[href^="#"]::before {
|
||||
content: "#";
|
||||
display: inline-block;
|
||||
width: 1.2rem;
|
||||
@@ -142,12 +168,12 @@ a {
|
||||
}
|
||||
|
||||
/* ... but only display the internal anchor link when hovered over. */
|
||||
:where(h2, h3, h4, h5, h6):hover > a[href^="#"]::before {
|
||||
:where(h2, h3, h4, h5, h6):hover>a[href^="#"]::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* When internal links are linked directly, display with the accent color. */
|
||||
:where(h2, h3, h4, h5, h6):target > a[href^="#"]::before {
|
||||
:where(h2, h3, h4, h5, h6):target>a[href^="#"]::before {
|
||||
opacity: 1;
|
||||
color: var(--primary-accent-color);
|
||||
}
|
||||
@@ -220,7 +246,8 @@ footer {
|
||||
in a code snippet. */
|
||||
background-color: var(--code-background-color);
|
||||
padding: 1.4em;
|
||||
flex-shrink: 0; /* Required for sticky footer. */
|
||||
flex-shrink: 0;
|
||||
/* Required for sticky footer. */
|
||||
}
|
||||
|
||||
footer a {
|
||||
@@ -228,7 +255,7 @@ footer a {
|
||||
}
|
||||
|
||||
/* Give footer nav links some breathing room. */
|
||||
footer > nav > a {
|
||||
footer>nav>a {
|
||||
// margin: 0 1.4em;
|
||||
margin: 0 0.4em;
|
||||
}
|
||||
@@ -288,7 +315,7 @@ code {
|
||||
|
||||
/* Without this the <code> tag gains a little padding that offsets text by like
|
||||
2 pixels. Let's *not* do that. */
|
||||
pre > code {
|
||||
pre>code {
|
||||
padding: 0;
|
||||
background-color: var(--code-background-color);
|
||||
// Code inside a pre block doesn't need rounded borders.
|
||||
@@ -301,6 +328,7 @@ pre > code {
|
||||
:root {
|
||||
--default-font-size: 17px;
|
||||
}
|
||||
|
||||
/* Above this size, increase the header margins. Smaller sizes benefit from
|
||||
extra breathing room in the title. */
|
||||
header {
|
||||
@@ -331,8 +359,9 @@ pre > code {
|
||||
:root {
|
||||
--default-font-size: 21px;
|
||||
}
|
||||
|
||||
/* On larger devices, give the anchor link some more space. */
|
||||
:where(h2, h3, h4, h5, h6) > a[href^="#"]::before {
|
||||
:where(h2, h3, h4, h5, h6)>a[href^="#"]::before {
|
||||
width: 1.8rem;
|
||||
margin-left: -1.8rem;
|
||||
}
|
||||
@@ -342,4 +371,4 @@ pre > code {
|
||||
:root {
|
||||
--default-font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
+15
-1
@@ -10,6 +10,19 @@
|
||||
⬡
|
||||
<a href="/contact">Contact</a>
|
||||
</nav>
|
||||
<form action="https://buttondown.email/api/emails/embed-subscribe/andwati"
|
||||
method="post"
|
||||
target="popupwindow"
|
||||
onsubmit="window.open('https://buttondown.email/andwati','popupwindow')"
|
||||
class="embeddable-buttondown-form">
|
||||
<input type="email"
|
||||
name="email"
|
||||
id="bd-email"
|
||||
placeholder="Enter your email" />
|
||||
<input type="hidden" value="1" name="embed" />
|
||||
<input type="hidden" name="tag" value="via-footer" />
|
||||
<input type="submit" value="Sign up" />
|
||||
</form>
|
||||
<p>
|
||||
© 2022 -
|
||||
{{ now() | date(format="%Y") }}
|
||||
@@ -18,4 +31,5 @@
|
||||
<a href="https://github.com/andwati/andwati.com">Source</a>
|
||||
⬡
|
||||
<a href="/rss.xml">Feed</a>
|
||||
</footer>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
{% extends "index.html" %}
|
||||
{% block meta %}
|
||||
<meta name="description" content="{{ section.description }}" />
|
||||
<meta property="og:site_name" content="andwati.com" />
|
||||
<meta property="og:locale" content="en-us" />
|
||||
<meta property="og:url" content="{{ section.permalink }}" />
|
||||
<meta property="og:title" content="{{ section.title }}" />
|
||||
<meta property="og:description" content="{{ section.description }}" />
|
||||
<meta property="og:type" content="profile" />
|
||||
<meta property="og:image" content="https://andwati.com/self.png" />
|
||||
<meta property="twitter:card" content="summary" />
|
||||
<meta property="twitter:site" content="@andwati_" />
|
||||
<meta property="twitter:title" content="{{ section.title }}" />
|
||||
<meta property="twitter:description" content="{{ section.description }}" />
|
||||
<meta property="twitter:image" content="https://andwati.com/self.png" />
|
||||
{% endblock meta %}
|
||||
{% block content %}
|
||||
<main id="content">
|
||||
<header>
|
||||
<h1>{{ section.title }}</h1>
|
||||
</header>
|
||||
<h1>Thank You</h1>
|
||||
<p>
|
||||
It's great to have you on board. Check your email to confirm your subscription.
|
||||
<br />
|
||||
Have a nice day!
|
||||
</p>
|
||||
</main>
|
||||
{% include "footer.html" %}
|
||||
{% endblock content %}
|
||||
Reference in New Issue
Block a user