Update CSS for DuckDuckHack Docs code snippets

[moollaza]

• Reduce font-size to 12px from 14 for narrower code blocks
• Switch to better, cross-platform font-stack
• changes only affect docs pages, based on duckduckhack-docs class on

This coincides with the changes to Community-Platform which adds syntax highlighting to the DuckDuckHack docs: https://github.com/duckduckgo/community-platform/pull/330

//cc @russellholt @sdougbrown

[sdougbrown]

I feel like the font family thing could be applied to all pre/code/tt blocks, it doesn't need to be constrained to DDH.

Other than that this is fine.

[moollaza]

@sdougbrown I would be happy to apply that font stack everywhere else :)

One other thought I had was to add some background and padding to inline code blocks with something like:

p code {
    background: #e1e1e1;
    padding: 2px 3px;
    border-radius: 2px;
}

The result looks like this:

[sdougbrown]

Generally inline code blocks are wrapped in <tt> elements, aren't they? Or is that not how markdown compiles it?

That snippet would probably be fine to add, though - just make sure the big code blocks aren't also wrapped in <p> tags.

[moollaza]

@sdougbrown until you mentioned <tt> I'd actually never seen/heard of it. Looking around on other sites, it seems <code> is what is being used for inline snippets (I just checked FB and Twitter docs pages).

We're using a Perl lib, Markdent, to render our HTML from Markdown, I may be able to tweak it to use <tt> but I'm not sure right now.

That snippet would probably be fine to add, though - just make sure the big code blocks aren't also >wrapped in <p> tags.

As far as I can tell, they're always wrapped in <pre><code> inside our <div class="row content">

[moollaza]

@doug fyi apparently the <tt> tag is deprecated with HTML5, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt -- so I guess moving forward with inline <code> is okay

[moollaza]

@sdougbrown here's how it looks with the updated CSS:

If this is good, please merge :)

[sdougbrown]

Yeah I'm fine with this. :+1:

[moollaza]

awesome, thanks @sdougbrown

[moollaza]

@sdougbrown I noticed these changes aren't live yet on the docs -- does this repo need to be released for the changes to take effect?