little ways bring some fun, and maybe accessibility, into your sites. :) daffodil divider

custom bullet points

original code found here, but with image.
simple solution, more or less same as above.
downside: screen reader always read these as image.

more complex solution: tinker from this.
with this, screen reader should gloss over image. please note, you need set your own numbers here.

daffodil divider

link icons

original code found here.
this page include solution to automatically apply link icons, but prefer this way with classes.
classes make easy add new rule without break others, but on downside, need manually input class to each individual link.

daffodil divider

phone friendly layouts

methods inspire by dannarchy. of course, all this depend on your site's layout.
on phone, patchwork of shadows:

general method

specifically, patchwork of shadows look for 3 screen sizes: min-width 1051 pixels, max-width 1050 pixels, and max-width 500 pixels.
1050 pixels ideally catch phones in horizontal mode, and small browser windows.

1050 specific to this layout - otherwise, with padding and image borders, sidebar overlap with content. this can definitely be smaller!

with different screen sizes, some things may need reposition...

500 pixels, ideally, catch in specific phones in vertical mode. for screens this small, not bad idea make sure font scale well.

hide particular classes

extra buttons

normally, put buttons and other in-page links in sidebar - but on some screens, sidebar do not exist.
with pages that need buttons, then, need two sets. otherwise, users who can not see sidebar can not interact with page. at same time, want make sure that only those users see these buttons, or else some people see double. how do we apply this? well, only one button set need this class. on patchwork of shadows, sidebar have buttons without class, while article body use this class. compare:
~ wip