Just enough CSS for a blog

I love programming. There's so many projects and things I want to build and learn and just not enough time in a day - I feel like a kid with an infinite box of legos. When it comes to design, my feelings are less definitive. I certainly appreciate good design, but the process of getting there is just so much less satisfying.

One reason for this is, that pretty much everytime I check out the css of a website I like (even the minimalistic ones) I'm left overwhelmed - what looked simple and clean is actually mountains of css & js. Maybe I'll change my mind once I know more about all of this and am just suffering from a bad case of NIH syndrome - but for now it feels very much like looking at Enterprise FizzBuzz.

It doesn't have to be this way

Turns out, it doesn't have to be that way: Frameworks like milligram & skeleton are well below 1000 LOC and look stunning. Using one of those would have certainly been an option. Nonetheless, I stuck to starting from scratch - I want to understand the tools I'm using (CSS in this case) and this felt like the best way forward. I didn't end up with anything drastically different from what I would have gotten using those frameworks - but now I understand a little more about what those rules actually do.

Creating my own minimal stylesheet

I found http://learnlayout.com/ to be a good starting point for css in general. From there I went off looking for the basics of typography and other basics of design found quite a few interesting posts 1. My key takeaways were:

  • do not use more than 2 fonts
  • set body font-size to ~16px
  • decrease contrast of headlines (and maybe body): e.g. color: #222
  • set line-height to ~1.4
  • limit line length to ~60-90 characters (this one cannot be done directly but has to be approximated using the content width)

There are a lot of other things that people consider to be important but those few points above feel like the sweet spot to me (for now). They had the most impact on how easy I find it to read, how easy I find it to follow and distinguish the individual lines of the text.

Even with just those few points it's possible to go down the rabbit hole, e.g. with responsiveness. Fluid type was one thing that really caught my interest there for some time 2, but in the end it didn't really feel worth it and I just stuck to the basics. In the end, the content is what's important and a good enough but simple stylesheet is just the tradeoff I want.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
 }

html {
    overflow-y: scroll;
    height: 100%;
    font: 100%/1.5 sans-serif;
    word-wrap: break-word;
    margin: 0 auto;
    padding: 1.5em;
 }

@media (min-width: 768px) {
    html {
        font-size: 125%;
        max-width: 42em;
 } }

h1, h2, h3, h4 {
    margin: 2.5rem 0 1.5rem 0;
    line-height: 1.25;
    color: #333;
 }

a {
    color: #fa6432;
    text-decoration: none;
 }
a:hover, a:focus, a:active {
    text-decoration: underline;
 }

p {
    margin: 1em 0;
    line-height: 1.5;
 }
p code {
    background-color: #eee;
    padding: 0.05em 0.2em;
    border: 1px solid #ccc;
 }

ol, ul {
    margin: 1em;
 }
ol li ol, ol li ul, ul li ol, ul li ul {
    margin: 0 2em;
 }
ol li p, ul li p {
    margin: 0;
 }

dl {
    font-family: monospace, monospace;
 }
dl dt {
    font-weight: bold;
 }
dl dd {
    margin: -1em 0 1em 1em;
 }

img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0.5em;
 }

blockquote {
    padding-left: 1em;
    font-style: italic;
    border-left: solid 1px #fa6432;
 }

table {
    font-size: 1rem;
    text-align: left;
    caption-side: bottom;
    margin-bottom: 2em;
 }
table * {
    border: none;
 }
table thead, table tr {
    display: table;
    table-layout: fixed;
    width: 100%;
 }
table tr:nth-child(even) {
    background-color: rgba(200, 200, 200, 0.2);
 }
table tbody {
    display: block;
    max-height: 70vh;
    overflow-y: auto;
 }
table td, table th {
    padding: 0.25em;
 }

table, .highlight > pre, pre.example {
    max-height: 70vh;
    margin: 1em 0;
    padding: 1em;
    overflow: auto;
    font-size: 0.85rem;
    font-family: monospace, monospace;
    border: 1px dashed rgba(250, 100, 50, 0.5);
}

.title {
    font-size: 2.5em;
}

.subtitle {
    font-weight: normal;
    font-size: 0.75em;
    color: #666;
}

.tags {
    margin-top: -1.5rem;
    padding-bottom: 1.5em;
}
.tags li {
    display: inline;
    margin-right: 0.5em;
}

figure {
    margin: 1em 0;
}
figure figcaption {
    font-family: monospace, monospace;
    font-size: 0.75em;
    text-align: center;
    color: grey;
}

.footnote-definition sup {
    margin-left: -1.5em;
    float: left;
}

.footnote-definition .footnote-body {
    margin: 1em 0;
    padding: 0 1em;
    border: 1px dashed rgba(250, 100, 50, 0.3);
    background-color: rgba(200, 200, 200, 0.2);
}
.footnote-definition .footnote-body p:only-child {
    margin: 0.2em 0;
}

header {
    display: flex;
    justify-content: space-between;
}
header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header a + a {
    margin-left: 1rem;
}

.posts {
    margin: 0;
    list-style: none;
}
.posts .post a {
    display: flex;
    padding: 0.5em 0;
    color: black;
}
.posts .post a:hover, .posts .post a:focus, .posts .post a:active {
    text-decoration: none;
    background: rgba(200, 200, 200, 0.2);
}
.posts .post date {
    font-family: monospace, monospace;
    font-size: 0.8rem;
    vertical-align: middle;
    padding-right: 2rem;
    color: grey;
}

Footnotes

1
2