Skip to content

Instantly share code, notes, and snippets.

@etdev etdev/wards_wiki_css.md
Last active Feb 16, 2018

Embed
What would you like to do?
CSS to make WardsWiki look a little nicer

CSS to make WardsWiki look a little nicer

This is just some simple CSS I use to make browsing WardsWiki a bit easier on the eyes. It's distantly inspired by WebDesignIn4Minutes.

You can inject the CSS via your preferred method; personally I use Stylebot on Chrome.

CSS

body {
    margin: 0 auto;
    max-width: 50em;
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
    padding: 4em 1em;
    color: #333;
}

h1, h2, strong {
    color: #222;
}

h2 {
    margin-top: 1em;
    padding-top: 1em;
}

#page {
    max-width: 50em;
}

code {
    padding: 2px 4px;
    vertical-align: text-bottom;
}

code, pre {
    padding: 1em;
    border-left: 2px solid #222;
    background: #f5f7f9;
    border-bottom: 1px solid #d8dee9;
    color: #343;
}

a {
    color: #222;
    font-weight: bold;
}

a:hover, a:visited {
    color: #666;
}

#page > h1 > div {
    position: relative;
    bottom: 6px;
    left: 6px;
}

hr {
    margin: 20px auto;
    max-width: 90%;
    border-top: 1px solid #ddd;
    border-left: none;
}

Screenshots

Before

image

After

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.