Drafts Directory: NeoCities HTML Preview

Action

Posted by David Blue, Last update almost 3 years ago - Unlisted

Open an HTML preview of what the pushed draft should look like.

Steps

htmlpreview

<!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%;
    }
  </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></p>
</footer>
</html>

Options

After Success Default

Notification Error

Log Level Info

Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.

After Success	Default
Notification	Error
Log Level	Info