custom bullet pointsoriginal 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.
link iconsoriginal 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.
phone friendly layoutsmethods inspire by dannarchy. of course, all this depend on your site's layout.
on phone, patchwork of shadows:
- do not show table of contents sidebar
- ...which means some pages need extra buttons, to show only on phones
- fit only one table cell per line, in tables without special class
general methodspecifically, 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 buttonsnormally, 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: