@import “iota/normalize”; @import “iota/syntax-highlighting”;

$horizontal-rule: 1px solid bbb; $spacing: 0.5em;

// some inspiration taken from bettermotherfuckingwebsite.com/

html {

// readability - this isn't an aesthetic change, but a practical
// one - smaller, more closely spaced fonts are harder to read
font-size: 18px;
line-height: 1.6;

}

body {

// readability - shorter lines are easier to read
max-width: 650px;

// opinionated/readability - center the content
margin: 0 auto;

// readability - on narrow devices, we need some padding
padding: 0 $spacing;

}

time {

// opinionated/readability - emphasize times, it's clearer to the
// user if they stand out from the content
font-style: italic;

}

header, footer {

// opinionated/readability - padding increases clarity
padding: $spacing 0;

p {
    // opinionated/readability - paragraphs in headers and footers
    // don't need extra margins
    margin: 0;
}

h1, h2 {
    // opinionated/readability - headings in headers don't need
    // extra margins
    margin: 0;
}

}

header.site {

// readability - clear separation of content
border-bottom: $horizontal-rule;

// opinionated - make the page title look like an h2
p.title {
    font-size: 1.5em;  // common h2 size (browser styles)
    font-weight: bold;
}

nav {
    // opinionated - nav should be aligned right - sets it apart
    text-align: right;

    a {
        // readability - separate nav items
        margin-left: $spacing;
    }
}

}

footer {

// readability - clear separation of content
border-top: $horizontal-rule;

}

article {

// opinionated/readability - articles should have some margin
margin: $spacing 0;

}