[css mod] custom columns/cards view (kanban)

This is a small css snippet to enable a columns/cards/kanban view of the current document.
It’s only a viewing layout hack, so don’t expect too much. It’s still useful for quick kanban or viewing lists side by side.

pic1


pic2

before/after gif (and with the base theme)

tweaking the cards size and spacing

install

I use it with the Stylus extension but it should work in a custom .css too (although I recommend the stylus addon so you can quickly enable/disable the view mode at will)

you can tweak the settings at the top of the css to define the size of the cards and the width of your page (it will modify the number of ‘cards’ par row). To adjustt the spacing and margins of each card, see the gif above.

known limitations

  • images can be resized to overlap multiple cards
  • long embeds may go beyond the cards bottom edge
  • when editing long blocks, the top lines may scroll out of view, it’s ok once editing is done, see the gif below (the height seems to be auto-calculated, I need to inspect that further)

notes

the custom theme in the pics is logseq-darker-hpx.user.css inside the same repo : GitHub - cannibalox/logseq-dark-hpx: CSS snippets and themes for www.logseq.com

Still can’t believe it’s possible :+1:

1 Like

I’ll deprecate this css soon and replace it with a new version based on page-tag trigger : instead of applying the mod globally, it will only apply the layout to pages with a specific page-tag inside the front matter/page properties. probably #p-cards for page-cards as it’s unlikely to be used ?

2 Likes

#p-cards sounds great!