From 92f7baa18e6f6efec73f7813a52d127806f1bfec Mon Sep 17 00:00:00 2001 From: Yanir Seroussi Date: Thu, 9 May 2024 10:03:31 +1000 Subject: [PATCH] Move subscribe form out of the global footer (#9) --- assets/css/extended/footer.css | 60 +----------------------- assets/css/extended/subscribe.css | 64 ++++++++++++++++++++++++++ content/contact/index.md | 6 ++- content/posts/_index.md | 4 +- content/til/_index.md | 4 +- layouts/partials/comments.html | 3 ++ layouts/partials/extend_footer.html | 52 +-------------------- layouts/partials/subscribe_form.html | 34 ++++++++++++++ layouts/partials/subscribe_hover.html | 19 ++++++++ layouts/shortcodes/subscribe_form.html | 1 + 10 files changed, 131 insertions(+), 116 deletions(-) create mode 100644 assets/css/extended/subscribe.css create mode 100644 layouts/partials/subscribe_form.html create mode 100644 layouts/partials/subscribe_hover.html create mode 100644 layouts/shortcodes/subscribe_form.html diff --git a/assets/css/extended/footer.css b/assets/css/extended/footer.css index dc5d5bbde..0b66f6fc5 100644 --- a/assets/css/extended/footer.css +++ b/assets/css/extended/footer.css @@ -1,62 +1,4 @@ -.mailing-list-container { +.global-footer { background: var(--code-bg); border-top: 1px solid var(--content); } - -form.mailing-list { - padding: 10px; - text-align: center; - max-width: calc(var(--nav-width) + var(--gap) * 2); - margin-inline-start: auto; - margin-inline-end: auto; -} - -form.mailing-list label { - display: block; - font-weight: bold; -} - -form.mailing-list input[type="email"] { - background: var(--theme); - border-radius: 4px; - color: var(--primary); - margin: 8px; - padding: 4px; - min-width: 50%; -} - -form.mailing-list button { - background: var(--primary); - border-radius: 18px; - color: var(--theme); - font-size: 16px; - padding: 0 16px; -} - -.mailing-list-container .footer { - padding-bottom: 10px; - padding-top: 0; -} - -.mailing-list-link { - background: var(--tertiary); - color: var(--primary); - font-size: 14px; - border-radius: 2px; - padding: 6px; - visibility: hidden; - position: fixed; - top: 5px; - right: 10px; - z-index: 99; - transition: visibility 0.5s, opacity 0.8s linear; -} - -.mailing-list-link:hover { - background: var(--primary); - color: var(--theme); -} - -.mailing-list-link:focus { - outline: 0; -} diff --git a/assets/css/extended/subscribe.css b/assets/css/extended/subscribe.css new file mode 100644 index 000000000..1131f066d --- /dev/null +++ b/assets/css/extended/subscribe.css @@ -0,0 +1,64 @@ +.mailing-list-container { + background: var(--code-bg); + border: 2px solid var(--content); + border-radius: 5px; + margin-top: 20px; +} + +form.mailing-list { + text-align: center; + max-width: calc(var(--nav-width) + var(--gap) * 2); + margin-inline-start: auto; + margin-inline-end: auto; +} + +form.mailing-list label { + display: block; + font-weight: bold; + padding-top: 5px; +} + +form.mailing-list input[type="email"] { + background: var(--theme); + border-radius: 4px; + color: var(--primary); + margin: 8px; + padding: 4px; + min-width: 80%; +} + +form.mailing-list button { + background: var(--primary); + border-radius: 18px; + color: var(--theme); + font-size: 16px; + padding: 0 16px; +} + +.mailing-list-container .footer { + padding-bottom: 10px; + padding-top: 0; +} + +.mailing-list-link { + background: var(--tertiary); + color: var(--primary); + font-size: 14px; + border-radius: 2px; + padding: 6px; + visibility: hidden; + position: fixed; + top: 5px; + right: 10px; + z-index: 99; + transition: visibility 0.5s, opacity 0.8s linear; +} + +.mailing-list-link:hover { + background: var(--primary); + color: var(--theme); +} + +.mailing-list-link:focus { + outline: 0; +} diff --git a/content/contact/index.md b/content/contact/index.md index 0117fb321..b4aa9a43c 100644 --- a/content/contact/index.md +++ b/content/contact/index.md @@ -17,6 +17,8 @@ Feel free to contact me about topics discussed on this website, potential work, * [Connect on LinkedIn](https://www.linkedin.com/in/yanirseroussi) * [Email me](mailto:contact@yanirseroussi.com) -## Subscribe to the mailing list +## Subscribe to my mailing list -To get new posts delivered to your mailbox, scroll to the bottom of this page, enter your email address, and tap Subscribe. You may unsubscribe at any time. +To get new posts delivered to your mailbox, enter your email address below and tap Subscribe. You may unsubscribe at any time. + +{{}} diff --git a/content/posts/_index.md b/content/posts/_index.md index adf5963e7..dff1e0689 100644 --- a/content/posts/_index.md +++ b/content/posts/_index.md @@ -3,7 +3,5 @@ title: Browse Posts description: | Browse my main posts in reverse chronological order below, or [by tag](/tags/). You may also want to check out my shorter-form [TIL (today I learned) posts](/til/). - - [Subscribe to the mailing list at the bottom of any page](#mailing-list-email) to get new posts delivered to your - mailbox. + {{}} --- diff --git a/content/til/_index.md b/content/til/_index.md index c39e0b531..b37fda626 100644 --- a/content/til/_index.md +++ b/content/til/_index.md @@ -2,6 +2,6 @@ title: "TIL: Today I learned..." description: | Short, rough posts about things I learned, inspired by [Simon Willison's TIL](https://til.simonwillison.net/). - [Subscribe to the mailing list](#mailing-list-email) to receive a digest of recent TILs whenever I publish more - significant posts. + Subscribe to the mailing list to receive a digest of recent TILs whenever I publish [longer-form posts](/posts/). + {{}} --- diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html index 79adf75b7..9c02a92a5 100644 --- a/layouts/partials/comments.html +++ b/layouts/partials/comments.html @@ -1,3 +1,6 @@ +{{- partial "subscribe_hover.html" . }} +{{- partial "subscribe_form.html" . }} +
{{ $comments := index $.Site.Data.comments .File.ContentBaseName | default slice }} diff --git a/layouts/partials/extend_footer.html b/layouts/partials/extend_footer.html index 7c78013b8..6d864fd5a 100644 --- a/layouts/partials/extend_footer.html +++ b/layouts/partials/extend_footer.html @@ -1,40 +1,4 @@ - - Subscribe - - -
- -
-
-
    -
    - - - -
    -
    -
    - -
    - Alternatively, subscribe to RSS feed. -
    - +
    {{ site.Copyright | markdownify }}  | @@ -46,7 +10,7 @@
    diff --git a/layouts/partials/subscribe_form.html b/layouts/partials/subscribe_form.html new file mode 100644 index 000000000..76a927175 --- /dev/null +++ b/layouts/partials/subscribe_form.html @@ -0,0 +1,34 @@ +{{- /* An embeddable subscribe form. Annoyingly also includes ConvertKit's script, but this will be sorted later. */}} + +
    + +
    +
    +
      +
      + + + +
      +
      +
      +
      + Alternatively, subscribe to RSS feed. +
      +
      diff --git a/layouts/partials/subscribe_hover.html b/layouts/partials/subscribe_hover.html new file mode 100644 index 000000000..9afcfc715 --- /dev/null +++ b/layouts/partials/subscribe_hover.html @@ -0,0 +1,19 @@ +{{- /* A subscribe button that fades in as users scroll down the page. */}} + + + Subscribe + + + diff --git a/layouts/shortcodes/subscribe_form.html b/layouts/shortcodes/subscribe_form.html new file mode 100644 index 000000000..57110c9bf --- /dev/null +++ b/layouts/shortcodes/subscribe_form.html @@ -0,0 +1 @@ +{{- partial "subscribe_form.html" . }}