Thunder Theme

I’ve recently started working and have since created a few reports with R. As much as I love RMarkdown’s ability to generate reproducible reports with consistent quality, the default theme and CSS stylesheet have not been up to standard.

The attached CSS file brushes up your RMarkdown reports in HTML format, providing a modern and legible look both on screen and on paper. The design boasts reponsive design for variant screen sizes, and an interactive table of contents on the side (which is only visible on screen at least 1200pt wide).

Note that this CSS file is used alongside with knittr package version 1.16. The report doesn’t look as pretty (or just breaks) in IE but hey, you shouldn’t be using it anyway :) This is designed and optimized with common Windows PC fonts, but you should be able to achieve great results on a Mac with Helvetica or Avenir family.

body {
    font-family: Tahoma, Helvetica, Verdana, Arial, Sans;
    font-size: 16px;
    max-width: 1200px;
    margin: auto;
}
h1, h2, h3 {
    font-family: Helvetica;
    font-weight: 700;
}

h1 {
    font-size: 28px;
    text-align: center;
    font-weight: 300;}
h2 {
    font-size: 20px;
    padding-left: 10px;
    border-left: 10px solid #444;
    margin-top: 30px;
}
h3 {
    padding-top: 30px;
    font-size: 18px;
}
h1 + h2, h2 + h3, h3 + h3, h2 + div h3 {padding-top: 12px; margin-top: auto;}
h4, h5, h6 { font-size: inherit;}

p {
    margin: 12px auto;
}
#header, #section-header {display: none;}

.page-header, #section-header {
    display: none;
    position: fixed;
    top: 0;
    height: 60px;
    background: #ddd;
}
span.text-good { color: #082; }
span.text-bad { color: #800; }
span.triangle-up:before {content: "▲"}
span.triangle-down:before {content: "▼"}

table {
    font-family: Helvetica;
    width: auto !important;
    max-width: 900px;
    border: none;
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
}

table tr:nth-of-type(2n) {
    background: #eee;
}

table th {
    border-bottom: 1px solid #888;
    line-height: 20px;
}

table * {
    border: none;
}

td, th {
    padding: 3px 10px !important;
}
table img {
    height: 15px;
}

tbody tr:hover td:first-of-type {
    background: #ddd;
}
tbody tr:hover td {
    background: #ddd;
}

table .text-good, table .text-bad, table .text-num { font-family: Verdana, Arial; }

#TOC ul, #section-TOC ul {
    list-style-type: none;
    padding-left: 12px;
}
#TOC > ul, #section-TOC > ul {
    padding-left: 0;
}
#TOC, #section-TOC {
    font-family: Helvetica, Arial;
    position: fixed;
    width: 270px;
    padding-top: 20px;
    left: 15px;
    left: calc(50% - 585px);
    height: 100%;
    border-right: 1px solid #ddd;
}
#TOC a, #section-TOC a {
    display: block;
    color: #000 !important;
    padding: 3px 6px; 
    text-decoration: none !important;
}
#TOC a:hover, #section-TOC a:hover {
    background-color: #eee;
}
#TOC > ul > li > a, #section-TOC > ul > li > a {
}
#TOC > ul ul li, #section-TOC> ul ul li {
    border-left: 4px solid #eee
}

.level1 {
    margin-left: 300px;
    width: calc(100% - 300px);
}

@media (max-width: 1200px), @media print {
    #TOC, #section-TOC  {display: none;}
    .level1 {
        margin: auto;
        width: 100%;
        max-width: 900px;
    }
    .page-header {
        display: none;
    }
}

@media print {
    body {
        font-family: Garamond, Times, Serif;
    }
    h1, h2, h3, h4 {
        page-break-after: avoid;
        break-after: avoid;
    }
    table {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    p, ul, ol {
        orphans: 3;
        widows: 3;
    }
}

/* OVERRIDES */
.main-container {
    max-width: 1200px !important;
}

.notice-ie {
    position: fixed;
    left: 0;
    bottom: 0;
    text-align: center;
    height: 16px;
    line-height: 16px;
    background: #b00;
    color: #fff;
    font-size: 14px;
    font-family: Arial;
    width: 100%
}

@media screen and (max-width: 750px) {
    table {
        font-family: 'Arial Narrow', Arial;
    }
}
HRZN
Bread FM Newsletter