Improving Nick Cates' Strata + Markdown (CSS)


(Nick) #1

I like authoring my pages with Markdown since it generates clean and simple HTML. I’ve discovered that the themes I’ve been using are designed around styled text input, and don’t look great out of the box with Markdown. The issue appears to be that styled text converts to HTML with lots of <br> tags, rather than using proper paragraph tags. The themes compensate for this, in effect breaking the more standard HTML generated from Markdown.

Anyway, in case any other newbies to RapidWeaver are facing the same problem, I’m attaching some CSS that helps make Nick Cates’ popular Strata theme work well with Markdown. At least in my own humble opinion.

To use this, open the Configure pane (the spanner), and select the Code window. Paste the CSS code below into the “CSS” area.

Of course if anyone has ideas on how to improve this, I’m all ears.

/* Provide padding around lists */
#t-content ul {
margin-bottom: 10px;
}

/* Provide padding around paragraphs */
#t-content p {
padding-bottom: 10px;
}

/* Increase padding before level 1 header */
#t-content h1 {
padding-top: 5px;
padding-bottom: 2px;
}

/* Level 2 header is almost identical to level 1 out of the box, so provide padding and tweak font size and colour */
#t-content h2 {
padding-top: 4px;
padding-bottom: 0px;
font-size: 1.2em;
color: rgb(100, 100, 100);
}

/* Add a little margin after a blockquote */
#t-content blockquote {
margin-bottom: 3px;
}

/* make tables look nice */
#t-content th, td {
border-bottom: 1px solid #ddd;
padding: 5px;
}

#t-content th {
text-align: left;
background-color: #18c0ea;
color: white;
}