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
Remind user to always run "brew update" first in order to avoid
repeated bug reports from users who didn't do that.
See #824, #1067, #1537, #1633 and #1749
with the following added languages in anticipation of document expansion:
apache dockerfile dos less php powershell python tex yaml
To reproduce docs/static/js/highlight.pack.js on Debian/Ubuntu:
$ sudo apt-get install nodejs npm
$ wget https://github.com/isagalaev/highlight.js/archive/9.0.0.tar.gz
$ tar xzf 9.0.0.tar.gz
$ cd highlight.js-9.0.0/
$ npm install
$ nodejs tools/build.js markdown asciidoc xml css javascript \
ini yaml json go bash diff dockerfile dos powershell makefile \
apache nginx tex http php python ruby django haml handlebars \
scss less coffeescript
Then, copy the resulting build/highlight.pack.js as well as
src/styles/monokai-sublime.css to the appropriate Hugo docs directories.
because our bootstrap-theme.css was originally a customized
core bootstrap.css file from Bootstrap v3.0.0.
This rename helps to avoid confusion with Bootstrap’s official
bootstrap-theme.css files.
The GitHub octicons fonts, which, in our case, came with GitHub:buttons,
are not actually used on gohugo.io. Rather, the icons inside the GitHub
buttons are actually glyphs from Font Awesome.
The GitHub:buttons JavaScript code docs/static/js/buttons.js
from https://github.com/ntkme/github-buttons was referenced
in docs/layouts/partials/footer.html but never used.
Apparently, the actual code for the GitHub buttons on the upper-left
corner of gohugo.io documentation was written by @spf13 in
docs/static/js/scripts.js.
using pngquant and OptiPNG. Result:
arresteddevops-tn.png 154734 bytes → 47184 bytes
maximeguitare-tn.png 95571 bytes → 24183 bytes
ridingbytes-tn.png 262222 bytes → 66491 bytes
And a small one to an even smaller one too:
goin5minutes-tn.png 26220 bytes → 9297 bytes
