drafts
drafts copied to clipboard
extratone
HTML Preview Template
1.4
<!DOCTYPE html>
<html dir="auto">
<head>
<title>[[safe_title]]</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@charset "utf-8";
:root {
--main-bg-color: #000056;
--main-color: #ffe8bd;
--alternate-bg-color: #1c0021;
--alternate-color: #fff4e6;
--main-border-color: #f43f32;
--link-color: #36fd63;
}
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: #fff4e6;
--main-color: #00006b;
--alternate-bg-color: #fffdeb;
--alternate-color: #1c0021;
--main-border-color: #f43f32;
--link-color: #ff0000;
}
}
html {
font-size: 100%;
font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
line-height: 1.4;
}
body {
margin: 0;
padding: 1em;
background-color: var(--main-bg-color);
color: var(--main-color);
}
@media (max-device-width: 480px) {}
@media (min-device-width: 481px) {
body {
margin: auto;
max-width: 600px;
}
}
blockquote {
font-style: italic;
margin: 1.5em 2em;
padding: 1em;
background-color: var(--alternate-bg-color);
color: var(--alternate-color);
}
a {
color: var(--link-color);
}
pre {
display: block;
overflow: scroll;
width: 100%;
background-color: var(--alternate-bg-color);
padding: .5em 1em;
margin: 1em 0;
}
code {
background-color: var(--alternate-bg-color);
color: var(--alternate-color);
font-family: Menlo, Courier, sans-serif;
padding: 2px 3px;
}
table {
margin: 1.5em 0;
border: 1px solid var(--main-border-color);
border-collapse: collapse;
}
th {
padding: .25em .5em;
background: var(--alternate-bg-color);
border: 1px solid var(--main-border-color);
}
td {
padding: .25em .5em;
border: 1px solid var(--main-border-color);
}
img {
max-width: 90%;
}
footer {
font-size: 9px;
}
</style>
</head>
<body>
%%[[draft]]%%
</body>
<footer>
<p><a href="https://twitter.com/NeoYokel">Twitter</a> - <a href="https://mastodon.social/@DavidBlue">Mastodon</a> - <a href="https://t.me/davidblue">Telegram</a> - <a href="[[draft_open_url]]">Local</a></p><code>[[latitude]]∆[[longitude]]-[[date|%m%d%Y-%H%M%S]]</code>
</footer>
</html>
1.7
<!DOCTYPE html>
<html dir="auto">
<head>
<title>[[safe_title]]</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
@import url("https://use.typekit.net/vxn4qnp.css");
@charset "utf-8";
:root {
--main-bg-color: #fff4e6;
--main-color: #000000;
--alternate-bg-color: #fffdeb;
--alternate-color: #00006b;
--main-border-color: #f43f32;
--link-color: #ff0000;
}
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: #020003;
--main-color: #ffe8bd;
--alternate-bg-color: #000056;
--alternate-color: #fff4e6;
--main-border-color: #f43f32;
--link-color: #36fd63;
}
}
html {
font-size: 100%;
/* font-family: adobe-caslon-pro, serif; */
font-family: aktiv-grotesk, sans-serif;
font-weight: 400;
font-weight: 400;
/* font-style: normal; */
line-height: 1.4;
}
body {
margin: 0;
padding: 0.6em;
background-color: var(--main-bg-color);
color: var(--main-color);
}
@media (max-device-width: 480px) {
}
@media (min-device-width: 481px) {
body {
margin: auto;
max-width: 600px;
}
}
blockquote {
font-family: aktiv-grotesk, sans-serif;
font-weight: 300;
font-style: italic;
margin: 1.5em 1.5em;
padding: 1em;
background-color: var(--alternate-bg-color);
color: var(--alternate-color);
}
a {
color: var(--link-color);
}
pre {
display: block;
overflow: scroll;
width: 100%;
background-color: var(--alternate-bg-color);
padding: 0.5em 1em;
margin: 1em 0;
}
code {
background-color: var(--alternate-bg-color);
color: var(--alternate-color);
font-family: aktiv-grotesk, sans-serif;
font-weight: 300;
padding: 2px 3px;
}
table {
font-family: aktiv-grotesk, sans-serif;
font-weight: 400;
margin: 1.5em 0;
border: 1px solid var(--main-border-color);
border-collapse: collapse;
}
th {
padding: 0.25em 0.5em;
background: var(--alternate-bg-color);
border: 1px solid var(--main-border-color);
}
td {
padding: 0.25em 0.5em;
border: 1px solid var(--main-border-color);
}
img {
max-width: 96%;
}
footer {
font-family: aktiv-grotesk-condensed, sans-serif;
font-weight: 700;
font-size: 9px;
}
</style>
<script note="" src="https://cdn.jsdelivr.net/gh/Blogger-Peer-Review/quotebacks@1/quoteback.js"></script>
</head>
<body>
%%[[draft]]%%
<footer>
<p>
<a href="https://davidblue.wtf/drafts">Index</a> - <a href="https://twitter.com/NeoYokel">Twitter</a> -
<a href="https://mastodon.social/@DavidBlue">Mastodon</a> -
<a href="https://t.me/davidblue">Telegram</a> - <a href="tel:+15738234380">Telephone</a> -
<a href="[[draft_open_url]]">Local</a>
</p>
<code>[[latitude]]∆[[longitude]]-[[date|%m%d%Y-%H%M%S]]</code>
</footer>
</body>
</html>