Style changes for blog pages.

[cohitre]

• Adding extra margin around blog posts headers

[myronmarston]

Thanks @cohitre. This is definitely better. There are a couple parts that I think still look poor, though:

IMO, code examples don't look good:

Compare that to how it looks on my blog:

The main problem is the spacing. I tried adding this CSS to blog.css.scss:

.blog_post {
  pre {
    line-height: 1.25em;
    font-size: 90%;
    font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !important;
  }
}

...which looks quite a bit better, I think:

Is that how you'd do that? One of the code snippets also wraps, and I can't figure out how to add scroll bars (I tried overflow: scroll...):

vs (from my blog):

The other part that looks subpar is the bullet points later in the blog post:

Compared to:

...which looks much better, IMO.

Do you have time to take a stab at improving that?

[myronmarston]

BTW, the arrows for bullet points are kinda a cool stylistic thing on my blog but I don't expect that here...I'm thinking more about the spacing and indentation.

[cohitre]

The last two commits add some styling for the pre and ul tags. I moved the bullets so they are aligned with the rest of the text and I also reduced some of the margin when they are next to h3 tags.

For the pre tags I added some better styles to fix font selection, size and scroll bars behavior.

[cohitre]

list:

pre:

[myronmarston]

❤️ ❤️ ❤️ This is a huge improvement. I really appreciate you taking the time to improve our CSS, @cohitre!