Blog layout change to mimic Read.write.as?

Help Customization
1

Read.write.as looks very good. Very “newspaper-esque”. Has anyone suggested (or tried working on) making an individual blog in the same two-column layout as R.w.a? I like that everything is on one page on my blog, but instead of scrolling to find a post of mine (either scrolling by me or someone else), if the “setup” or layout were similar to that of R.w.a, and had roughly a paragraph as a preview, and then by clicking on the title, you go to the full blog post.

I do not know how to program/code/etc., but this is just a suggestion, and I think a lot of people would like it.

1 Like
2

This isn’t a bad idea! Implementing it would be a little tricky, but shouldn’t be impossible.

Thinking out loud, you’d have to get some way to use CSS for a two-column approach. CSS can do this, but the issue is selecting every other post preview to be in one column versus the other. The code that Write.as generates doesn’t really do this, and so one would have to hack it together in JavaScript. It’s an interesting idea, as I said, so I’m going to think on it a little bit. If I get something working, I’ll let you know.

1 Like
3

Update: this sorta works, although it can sometimes make the column breaks happen in weird places. Fixing that would be a lot of work, I’m afraid.

Put this into the “custom JavaScript” portion of the customization page:

let container = document.getElementById('wrapper');
container.style.columnCount = "2";
4

This is definitely possible with CSS! In redesigning Read Write.as, I was actually inspired by the Cryptee blog, which uses a two-column layout.

The trick is to use a CSS flexbox layout. This basic, responsive stylesheet should get you started:

#collection article {
    max-width: 100% !important;
    display: block;
    padding: 1rem !important;
    margin: 1rem !important;
    flex-basis: calc(50% - 4rem);
    position: relative;
}

@media (min-width: 540px) {
    #collection section#wrapper {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-flow: row wrap;
    }    
}
2 Likes