Drafts Directory: Swiss Preview

Action

Posted by agiletortoise, Last update almost 2 years ago

UPDATES

almost 2 years ago

Tweaks to CSS

Markdown preview using Swiss style.

Trusted member

Install

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: white;
    --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: #111111;
        --main-color: #eeeeee;
        --alternate-bg-color: #333333;
        --alternate-color: #cccccc;
        --main-border-color: #515151;
        --link-color: #627EC9;
    }
}

html {
    font-size: 100%;
    font-family: Helvetica, Arial, Freesans, clean, sans-serif;
}

body {
    margin: 0;
    padding: 1em;
    background: var(--main-bg-color);
    color: var(--main-color);
}

@media (max-device-width: 480px) {}

@media (min-device-width: 481px) {
    body {
        margin: auto;
        max-width: 600px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

h1 {
    font-size: 2rem;
    border-bottom: 1px solid var(--main-border-color);
}

h2 {
    border-bottom: 1px solid var(--main-border-color);
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25em;
}

h5 {
    font-size: 1rem;
}

h6 {
    background-color: inherit;
    font-size: 14px;
}

hr {
    height: 0.2em;
    border: 0;
    color: var(--main-border-color);
    background-color: var(--main-border-color);
}

p,
blockquote,
ul,
ol,
dl,
li,
table,
pre {
    margin: 1em 0;
}

blockquote {
    margin-left: 1em;
    padding-left: 1em;
    border-left: 1px solid #ddd;
}

code,
pre {
    border-radius: 3px;
    background-color: var(--alternate-bg-color);
    color: var(--alternate-color);
}

code {
    border: 1px solid #EAEAEA;
    margin: 0 2px;
    padding: 0 5px;
    background-color: var(--alternate-bg-color);
    color: var(--alternate-color);
}

pre {
    border: 1px solid var(--main-border-color);
    line-height: 1.25em;
    overflow: auto;
    padding: 6px 10px;
}

pre>code {
    border: 0;
    margin: 0;
    padding: 0;
}

a,
a:visited {
    color: var(--link-color);
    text-decoration: none;
}

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 var(--main-border-color);
}

td {
    padding: .25em .5em;
    border: 1px solid var(--main-border-color);
}

img {
    max-width: 90%;
}
    </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.

After Success	Nothing
Notification	Error
Log Level	Error