Init forlater landing page
Anirudh Oppiliappan x@icyphox.sh
Tue, 14 Sep 2021 21:37:48 +0530
9 files changed,
303 insertions(+),
0 deletions(-)
A
config.yaml
@@ -0,0 +1,6 @@
+title: forlater.email +url: "https://forlater.email" +desc: "Email-based bookmarking service." +author: + name: "Anirudh Oppiliappan" + email: "x@icyphox.sh"
A
pages/_index.md
@@ -0,0 +1,39 @@
+--- +template: page.html +title: forlater.email +subtitle: Email-based bookmarking service. +--- + +Email-based bookmarking service. + +### save it for later + +*TL;DR*: Send a link to `save@forlater.email` to get started! + +Simply send an email with a link (or links; one per line) to +`save@forlater.email`, and you'll get a readable, clutter-free version +of it in your inbox. No tracking, no bullshit. + +Don't like HTML email? Me neither, actually. I've got you covered: all +emails have both `text/html` and `text/plain` parts; plaintext content +is optimized for readability, with images and links as footnotes. + +### organizing saved pages + +All saved email come from `saved@forlater.email` (notice `saved`!). For +example, here's a [sieve](http://sieve.info/) filter for sending mail +from `saved@forlater.email` to a folder called `Read Later`. + +```sieve +require ["fileinto", "mailbox"]; +if address "From" "saved@forlater.email" +{ + fileinto :create "Read Later"; +} +``` + +Or, if you use GMail, you can [create filter +rules](https://support.google.com/mail/answer/6579?hl=en#zippy=%2Ccreate-a-filter) +to automatically label mail from `saved@forlater.email`. + +In short: do it however you like! That's the beauty of email.
A
static/style.css
@@ -0,0 +1,216 @@
+:root { + --bg: #fff; + --cyan: #509c93; + --light-gray: #eee; + --gray: #6a6a6a; + --code: #666; + --dark: #444; + --darker: #222; + --code-bg: #0000000a; +} + +html { + background: var(--bg); +} + +::selection { + background: var(--dark); + color: var(--bg); +} + +* { + box-sizing: border-box; + text-decoration: none; + padding: 0; + margin: 0; +} + +main { + font-family: serif; + font-size: 16px; + padding: 0; + margin: 10px; + line-height: 160%; +} + +main h1 { + font-size: 25px; + padding: 10px 0 10px 0; +} + +main h2, h3 { + padding: 20px 0 15px 0; +} + +.logo { + width: 75%; + margin: 50px auto 50px auto; + padding: 50px 0 20px 0; + display: block; +} + +.footer img { + max-height: 2.5rem; + max-width: 2.5rem; + display: inline-block; + vertical-align: middle; + image-orientation: from-image; + padding: 0 0 5px 5px; + cursor: pointer; +} + +.footer span { + display: inline-block; + padding: 0; + word-wrap: break-word; +} + +a { + margin: 0; + padding: 0; + box-sizing: border-box; + word-wrap: break-word; +} + +a::visited { + color: var(--cyan); +} + +main a { + color: var(--darker); + text-decoration: underline; +} + +table a { + text-decoration: none; +} + +table a:hover { + text-decoration: underline; +} + +body { + max-width: 640px; + padding: 0 10px; + margin: 40px auto; +} + +main article img { + max-width: 100%; + display: block; + margin: 0 0 15px 0; +} + +main ul, main ol { + margin: 0 30px 7px 30px; +} + +main ul ul { + margin-bottom: 0 +} + +.subtitle { + font-style: italic; + font-weight: normal; + font-variant: unset; + color: var(--dark); + padding: 0 0 20px 0; +} + +.muted { + color: var(--gray); +} +.muted a { + color: var(--cyan); + text-decoration: underline; +} + +article p { + padding: 7px 0 7px 0; +} + +article a { + color: var(--cyan); +} + +.tagline { + font-size: 20px; + padding: 150px 0 150px 0; + text-align: center; +} + +pre { + overflow-x: auto; + overflow-y: hidden; + padding: 10px; + min-width: 0; + background-color: var(--code-bg) !important; + font-size: 15px !important; + margin-bottom: 10px; +} + +code { + color: var(--cyan); +} + +pre > code { + color: var(--code); +} + +.post-date { + color: var(--gray); +} + +table { + width: 100%; +} + +.index-date { + white-space: nowrap; + vertical-align: baseline; + color: var(--gray); +} + +.index-post { + padding-bottom: 7px; +} + +nav { + float: right; + transform: translateY(30%); +} + +header { + padding-bottom: 20px; +} + +hr { + max-width: 100%; + text-align: left; + margin: 20px 0 20px 0; +} + +footer { + border-top: 1.5px solid; + margin: 20px 0 20px 10px; + padding-top: 10px; +} + +footer a { + text-decoration: underline; +} + +.post-date { + color: var(--gray); +} + +blockquote { + margin: 7px 0 7px 0; +} + +blockquote p { + font-style: italic; + color: var(--darker); + padding-left: 20px; + border-left: 3px solid var(--gray); +}
A
templates/head.html
@@ -0,0 +1,9 @@
+<link rel="stylesheet" href="/static/style.css" type="text/css"> +<meta name="description" content="{{ .Meta.Subtitle }}"> +<meta name="viewport" content="initial-scale=1,width"> +<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> +<meta charset="UTF-8"> +<meta name="HandheldFriendly" content="true"> +<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png"> +<meta name="theme-color" content="#ffffff"> +
A
templates/page.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html> +<html lang=en> + <head> + {{ template "head.html" }} + </head> + <title> + {{ index .Meta "title" }} + </title> + <body> + <main> + <header> + <a href=/> + <img src="/static/logo.png" alt="forlater.email logo" height="70" width="70"/> + </a> + </header> + <article align="left"> + <h1>{{ index .Meta "title" }}</h1> + {{ .Body }} + </article> + </main> + <footer> + {{ template "footer.html" }} + </footer> +</body> + +</html>