preview.css

/* todo[tpl]  Is the render-preview pane is inheriting the heading styles from the
     enclosing TPL app? Does it matter? */

body {
    margin: 0;
    padding: 0;
}

/* these heading styles and others in this
   file are hacked together, overriding the
   Bootstrap css. Better to have a cleanly
   laid out design all here, ditching
   Bootstrap I think. */

h1 {
    font-size: 2.5em;
    margin: 2.5em 0 .5em 0;
    text-align: center;
}

h2 {
    font-size: 1.8em;
    margin-top: 1.8em;
}

h3 {
    font-size: 1.4em;
    margin-top: 1.4em;
    margin-bottom: 0;
}

h4 {
    font-size: 1.2em;
    margin-top: 1.2em;
    margin-bottom: 0;
}


.selected {
    background-color: #faf306; /* match selection color in source pane */
    /*filter: invert(100%);*/
}

blockquote {
    margin: 20px 20px 20px 20px;
    padding: 0 10px 0 10px;
    font-size: 17px;
    border-left: 2px solid #eee;
}

pre {
    color: #2a2d2f;
    font-family: Georgia, serif;
}
code, samp, kbd {
    color: #009;
    font-family: monospace, monospace;
    background-color: #f5f5f5;
}
pre > code {
    display: block;
    padding: 9px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px
}

table {
    border-collapse: collapse;
}
th, td {
    border: thin solid #999;
    padding: 0.3em 0.4em;
    text-align: left;
}

/**************  FOOTNOTE STYLING **************/

.footnotes {
    margin-top: 3em;
    border-top: thin inset grey;
}

/**************  INTERJECTION STYLING **************/

.interjection {
    position: relative;
    padding: 1rem 1rem;
    margin: 1rem 0;
    border: 1px solid transparent;
    border-radius: .25rem
}

/* todo![RepoDoc] what is this for? identify or nix */
.interjection code {
    border: none;
    background: transparent;
    padding: 0
}

.interjection.warning {color: #663300;background-color: #ffe6cc;border-color: #ffcc99}
.interjection.danger {color: #842029;background-color: #f8d7da;border-color: #f5c2c7}
.interjection.info {color: #055160;background-color: #def0fd;border-color: #b6effb}
.interjection.positive {color: #0f5132;background-color: #d1e7dd;border-color: #badbcc}
.interjection.negative {color: #842029;background-color: #f8d7da;border-color: #f5c2c7}
.interjection.important {color: #141619;background-color: #d3d3d4;border-color: #bcbebf}
.interjection.note {color: #084298;background-color: #cfe2ff;border-color: #b6d4fe}
.interjection.question {color: #664d03;background-color: #fff3cd;border-color: #ffecb5}
.interjection.tip {color: #41464b;background-color: #e2e3e5;border-color: #d3d6d8}

/* todo[html] TEMP HACK until we decide how interjection title is rendered */
.interjection h1,
.interjection h2,
.interjection h3,
.interjection h4,
.interjection h5,
.interjection h6 {
    margin: 0
}

.interjection::before {
    content: attr(icon) ' ';
}

.interjection > *:first-child {
    display: inline;
}