Organize CSS and Javascript files into directories, separating vendor
source code from home-grown.
Separate new properties and selectors in Bootstrap CSS (already edited
for Hugo) from:
1. Original property values; and
2. Changed property values.
For the home page:
1. Clarify the English text;
2. Add some element names to classes in CSS selectors (to speed loading);
3. Document the Owl Carousel and Highlight.js versions;
4. Add Owl Carousel's license;
5. Restore HTML comments to browser source views;
6. Make the beginning GitHub button transparent on focus (like the others);
7. For the final, colored Twitter and Github buttons:
a. Remove the dotted box on focus; and
b. Color them green on active.
8. To increase (layout/) source readability:
a. Place `class` attributes before `href` attributes;
b. In `class` attributes, place more-specific class names before
less-specific; and
c. Comment the beginnings and ends of Bootstrap rows.
9. To increase understandability during development:
a. Document the meaning of CSS file, `HPstyles` by renaming it to
`home-page-style`;
b. Move inline styling to CSS stylesheets;
c. Separate @media queries to a file;
d. Separate the inline Owl Carousel custom Javascript to a file;
e. Use regular Owl Carousel CSS files instead of minified ones; and
f. Rename the wide, landscape desk background image filename from
`desk-long` to `desk-wide`.
The original image was 2055px × 1252px, which was oversized
and did not fit the required dimension of 600px × 400px
(3:2 aspect ratio).
To fix, the image was cropped and resized to the required dimension,
and was further optimized:
$ pngquant --nofs -v --speed 1 --quality 65-80 shelan-tn.png
$ optipng -o7 -zm1-9 shelan-tn-or8.png
$ mv shelan-tn-or8.png shelan-tn.png
reducing its filesize from 334125 bytes to 26929 bytes.
See #1831
