Discussion
Loading...

Post

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
Chee Aun 🤔
Chee Aun 🤔
@cheeaun@mastodon.social  ·  activity timestamp last week

All the little things #PhanpySocialDev

4 media
Both mention and quote notifications grouped into one, on Phanpy
Both mention and quote notifications grouped into one, on Phanpy
Both mention and quote notifications grouped into one, on Phanpy
Quote icon shows up if there's a quote count but zero boost count.
Quote icon shows up if there's a quote count but zero boost count.
Quote icon shows up if there's a quote count but zero boost count.
Your browser does not support the video tag.
This video cannot be previewed
Open original
Sticky date headers on Phanpy's Year In Posts
Your browser does not support the video tag.
GIF
GIF
Open
GIF
  • Copy link
  • Flag this post
  • Block
maya
maya
@zenmaya@social.zenmaya.xyz replied  ·  activity timestamp last week

@cheeaun im curious, does the sticky date on the left use javascript or can it be done with pure css? i wanted to implement the exact same thingg on my blog, but apparently either i dont know how to search or there arent that many resources on css on the web

  • Copy link
  • Flag this comment
  • Block
Chee Aun 🤔
Chee Aun 🤔
@cheeaun@mastodon.social replied  ·  activity timestamp last week

@zenmaya it's pure CSS https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position#sticky

This should be a useful read https://www.smashingmagazine.com/2024/09/sticky-headers-full-height-elements-tricky-combination/

Smashing Magazine

Sticky Headers And Full-Height Elements: A Tricky Combination — Smashing Magazine

Sticky positioning is one of those CSS features that’s pretty delicate and can be negated by a lot of things, so here’s another one to add to your mental catalog: Sticky elements don’t play nicely if they have to coordinate with other elements to make up a combined height, like `100vh`. Philip Braunen explores why this happens and presents a solution to fix it.

position - CSS | MDNMDN

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left physical properties and the inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end flow-relative logical properties can be used to determine the final location of positioned elements.
  • Copy link
  • Flag this comment
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About · Code of conduct · Privacy · Users · Instances
Bonfire social · 1.0.2-alpha.2 no JS en
Automatic federation enabled
Log in
  • Explore
  • About
  • Members
  • Code of Conduct