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
Some of the thumbnails in Showcase were out of place
because of several irregularly sized thumbnails,
and some of them almost 300KB in filesize.
Resize them all to 600x400 (pixels), and use the `-tn.png`
suffix.
When necessary, the website snapshot is re-captured using
gnome-web-photo. Then, the following commands (or a combination
thereof) are used to crop and resize the image into a thumbnail,
and to reduce its filesize:
$ convert example.png -crop 900x600+0+0 \
-filter Lanczos2Sharp -distort Resize 600x400 \
example-tn.png
$ pngquant --nofs -v --speed 1 --quality 65-80 example-tn.png
$ optipng -o7 -zm1-9 example-tn-or8.png
$ mv example-tn-or8.png example-tn.png
