Minoru / blog.tty8.org

Source code for my blog
https://blog.tty8.org
9 stars 1 forks source link

Alternative approach to column width setting #34

Open Minoru opened 6 years ago

Minoru commented 6 years ago

Right now, I simply set <body>'s width to 38rem and that's it. This approach creates problems for outsetting, i.e. situations where I want things to "stick out" on the sides. An example of this is img.bleed, where I calculate negative margins:

img.bleed {
    width: calc(100% + 2rem);
    height: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
}

An alternative approach, used by Medium, is to differentiate between "inset" and "outset" columns. "Inset columns" have their width fixed and margins set to auto; the "outset columns" span the whole viewport width and, thus, can make some use of extra space.

It's tiring to constantly wrap my paragraphs in <div class="outsetColumn">, though. Hakyll should do this for me. It could walk through the document, split it in runs of HTML and non-HTML, and wrap non-HTML in aforementioned <div>.