Drafts Action Directory

Swiss Preview

Posted by agiletortoise, Last update 19 days ago

Markdown preview using Swiss style.

Install

Steps

  • htmlpreview

    <!DOCTYPE html>
    <html dir="auto">
    
    <head>
        <title>[[title]]</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            @charset "utf-8";
    
        :root {
          --main-bg-color: #fefefe;
          --main-color: black;
          --alternate-bg-color: #efefef;
          --alternate-color: #222222;
          --main-border-color: #BBBBBB;
          --link-color: #627EC9;
        }
    
        @media (prefers-color-scheme: dark) {
          :root {
            --main-bg-color: #222222;
            --main-color: #eeeeee;
            --alternate-bg-color: #444444;
            --alternate-color: #cccccc;
            --main-border-color: #AAAAAA;
            --link-color: #627EC9;
          }
        }
    
        html,
        body {
            padding: 1em;
            margin: auto;
            max-width: 55em;
            background: var(--main-bg-color);
        }
    
        body {
            font: 1.3em Baskerville, Palatino, Times;
            color: var(--main-color);
            line-height: 1.4;
        }
    
        header,
        nav,
        article,
        footer {
            width: 700px;
            margin: 0 auto;
        }
    
        article {
            margin-top: 2em;
            margin-bottom: 4em;
            min-height: 400px;
        }
    
        /* Typography
        -------------------------------------------------------- */
    
        h1 {
            margin-top: 0;
            font-weight: normal;
        }
    
        h2 {
            font-weight: normal;
        }
    
        h3 {
            font-weight: normal;
            font-style: italic;
            margin-top: 3em;
        }
    
        p {
            margin-top: 0;
            -webkit-hypens: auto;
            -moz-hypens: auto;
            hyphens: auto;
        }
    
        ul {
            list-style: square;
            padding-left: 1.2em;
        }
    
        ol {
            padding-left: 1.2em;
        }
    
        blockquote {
            margin-left: 1em;
            padding-left: 1em;
            border-left: 1px solid #ddd;
        }
    
        pre {
            display: block;
            margin: 1em 0;
            padding: .5em 1em;
            width: 100%;
            color: var(--alternate-color);
            background: var(--alternate-bg-color);
        }
    
        code {
            font-family: "Consolas", "Menlo", "Monaco", monospace, serif;
            font-size: .9em;
            color: var(--alternate-color);
            background: var(--alternate-bg-color);
        }
    
        a {
            color: var(--link-color);
            text-decoration: none;
        }
    
        a:hover {
            text-decoration: underline;
        }
    
        a img {
            border: none;
        }
    
        h1 a,
        h1 a:hover {
            text-decoration: none;
        }
    
        hr {
            color: var(--alternate-bg-color);
            height: 1px;
            margin: 2em 0;
            border-top: solid 1px var(--alternate-bg-color);
            border-bottom: none;
            border-left: 0;
            border-right: 0;
        }
    
        img {
            max-width: 90%;
        }
    
        table {
            margin: 1em 0;
            border: 1px solid var(--main-border-color);
            border-collapse: collapse;
        }
    
        th {
            padding: .25em .5em;
            background: var(--alternate-bg-color);
            border: 1px solid --main-border-color;
        }
    
        td {
            padding: .25em .5em;
            border: 1px solid var(--main-border-color);
        }
    
        /* Home Page
        --------------------------- */
    
        body#index li {
            margin-bottom: 1em;
        }
    
    
        /* iPad
        -------------------------------------------------------- */
        @media only screen and (max-device-width: 1024px) {
            body {
                font-size: 120%;
                line-height: 1.4;
            }
        }
    
        /* @iPad */
    
        /* iPhone
        -------------------------------------------------------- */
        @media only screen and (max-device-width: 480px) {
            body {
                text-align: left;
                padding: .5em;
            }
    
            article,
            footer {
                width: auto;
            }
    
            article {
                padding: 0 1em;
            }
        }
    
        </style>
    </head>
    
    <body>
        <article>
        %%[[draft]]%%
        </article>
    </body>
    
    </html>
    

Options

  • After Success Nothing
    Notification Error
    Log Level Error

Comments

Actions available in the Action Directory are uploaded by community members. Use appropriate caution reviewing downloaded actions before use.