Drafts Directory: Swiss Preview, Lines 7+

Action

Last update almost 4 years ago - Unlisted
Markdown preview using Swiss style.
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>
    %%[[line|7..]]%%
    </article>
</body>

</html>
Options

After Success Nothing

Notification Error

Log Level Error
Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.
After Success	Nothing
Notification	Error
Log Level	Error