Action

Foghorn Preview

Posted by agiletortoise, Last update about 1 year ago

UPDATES

about 1 year ago

Tweaks to CSS

Markdown preview using the Foghorn style.

Steps

  • htmlpreview

    <!DOCTYPE html>
    <html dir="auto">
    
    <head>
        <title>[[title]]</title>
        <meta charset="UTF-8">
        <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: #a19f9f;
        --link-color: #627EC9;
    }
    
    @media (prefers-color-scheme: dark) {
        :root {
            --main-bg-color: #111111;
            --main-color: #eeeeee;
            --alternate-bg-color: #333333;
            --alternate-color: #cccccc;
            --main-border-color: #515151;
            --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;
    }
    
    p {
        margin-top: 0;
        -webkit-hyphens: auto;
        -moz-hyphens: 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: 2px solid var(--main-border-color);
        border-radius: 3px;
    }
    
    pre {
        display: block;
        overflow: scroll;
        max-width: 100%;
        background-color: var(--alternate-bg-color);
        padding: .5em 1em;
        margin: 1em 0;
        border: 1px dotted var(--main-border-color);
        border-radius: 3px;
    }
    
    code {
        background-color: var(--alternate-bg-color);
        color: var(--alternate-color);
        font-family: Menlo, Courier, sans-serif;
        font-size: .8em;
        padding: 2px 3px;
        border: 1px dotted var(--main-border-color);
        border-radius: 3px;
    }
    
    pre>code {
        border: none;
    }
    
    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 {
        border: none;
        border-top: solid 1px var(--main-border-color);
    }
    
    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>
        %%[[draft]]%%
    </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.