html { background-color: snow; } body { font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; color: #333; padding: 1em; max-width: 50em; margin: 0 auto; word-wrap: break-word; line-height: 1.50; } /* This only styles the main title at the top of the page which by default is just the word 'thoughts' */ h1 { font-style: italic; } strong { color: #111; } /* This styles code blocks By default, highlight.js is effecting this styling too */ pre { overflow-x: auto; word-wrap: normal; border: none; border-radius: 3px; } /* This styles inline <code> */ code:not(.block) { font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; font-size: .8em; padding: .1em; border: 1px solid lightgray; border-radius: 3px; } /* This also styles code blocks Each code block <pre><code class="block">looks like this</code></pre> By default, highlight.js is effecting this styling too */ code { font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; font-size: .8em; } /* This styles the div that the date/link for each post is in The <a> tag itself is also a member of class "though-date" so you can style that too if that's helpful */ div.thought-date { font-size: .8em; font-weight: bold; text-align: right; } /* This is the outermost block element for a given thought post. You can style it if you like, but this is probably only useful for spacing your posts from each other in the way you'd like */ section.thought { margin: 1em 0em; } /* This styles the element that contains the actual text of an individual post. */ div.thought { border: 2px solid lightgray; border-radius: 3px; padding: 1em; }