jsdoc.github.io
jsdoc.github.io copied to clipboard
jsdoc
Improve layout and readability
Here are some suggestions on how to improve the layout and readability of the <article> contents.
Tested on small viewports.
Features
- Added CSS custom properties as an easy-to-change overview. Tweaks can easily be made at the top of the file.
Changes
<article>- Setting a max-width of 80 characters helps readability as the text is better grouped together.
- Added 16px of horizontal padding to avoid text touching the screen edge on small viewports.
- Center aligning the element makes the entire layout nicer to look at.
<figure>- Removed spacing around element. This is purely aesthetic.
<ol>,<ul>- Decreased the amount of indentation on list items. This is purely aesthetic.
<p>- Increased the line height to 1.5, making blocks of text more legible.
<pre>&<code>- Making the style of code examples identical to GitHub makes it more familiar and readable to developers.
- To avoid confusion with text wrapping on smaller screens, I added horizontal scrolling.
I am open to help make more substantial changes to the UI. Just let me know.