search

okfde / 2013.archiv.codefor.de

The old website for Code for Germany, 2013 edition. Includes the blog, projects list and basic info about the group.
https://2013.archiv.codefor.de
Other
153 stars 141 forks source link

replace packery in projects page with multi-col layout #871

Closed k-nut closed 4 years ago

k-nut commented 5 years ago

This PR replaces the packery JS library in the project view with the native multi-column layout. It has multiple advantages:

But also has the disadvantage that we cannot be sure about the project order anymore. I think previously the projects would show up like this:

1 2
3 4
5 6

where they might now show up like this since they are filled column by column:

1 4
2 5
3 6

I'm happy to discuss if you all think this is a good idea or not. If we agree that it is a good idea, I'll also replace all other occurrences of packery.

Reference (where I got the idea to do this): https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/

new

old new
k-nut commented 5 years ago

This might also be an interesting reference: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

k-nut commented 5 years ago

@jochenklar I amended my commit and force pushed. The css now includes a column-gap which is set to the the same as the margin-bottom on the project cards.