diff options
author | Mark D. Blackwell <markdblackwell01@gmail.com> | 2016-10-01 22:19:22 -0400 |
---|---|---|
committer | Mark D. Blackwell <markdblackwell01@gmail.com> | 2016-10-01 22:19:22 -0400 |
commit | 88ec7d88d1b77a407fd1050d107f3c58ab1804da (patch) | |
tree | d99c892f5fe2a7222fd8c0a2ce0e4b745059e9e0 /docs/static | |
parent | ffbf3dd31978b96a15452edc2823fc2f6fce8601 (diff) |
docs: Improve home page
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`.
Diffstat (limited to 'docs/static')
-rw-r--r-- | docs/static/css/bootstrap-additions-gohugo.css | 65 | ||||
-rw-r--r-- | docs/static/css/bootstrap-changes-gohugo.css | 136 | ||||
-rw-r--r-- | docs/static/css/bootstrap-stripped-gohugo.css (renamed from docs/static/css/bootstrap-gohugo.css) | 126 | ||||
-rw-r--r-- | docs/static/css/home-page-style-responsive.css | 44 | ||||
-rw-r--r-- | docs/static/css/home-page-style.css (renamed from docs/static/css/HPstyles.css) | 292 | ||||
-rw-r--r-- | docs/static/css/owl.carousel.min.css | 1 | ||||
-rw-r--r-- | docs/static/css/owl.theme.default.min.css | 1 | ||||
-rw-r--r-- | docs/static/img/desk-wide.jpg (renamed from docs/static/img/desk-long.jpg) | bin | 198917 -> 198917 bytes | |||
-rw-r--r-- | docs/static/js/owl.carousel-custom.js | 16 | ||||
-rw-r--r-- | docs/static/vendor/OwlCarousel2/LICENSE | 22 | ||||
-rw-r--r-- | docs/static/vendor/OwlCarousel2/css/owl.carousel.css (renamed from docs/static/css/owl.carousel.css) | 0 | ||||
-rw-r--r-- | docs/static/vendor/OwlCarousel2/css/owl.theme.default.css (renamed from docs/static/css/owl.theme.default.css) | 0 | ||||
-rw-r--r-- | docs/static/vendor/OwlCarousel2/js/owl.carousel.min.js (renamed from docs/static/js/owl.carousel.min.js) | 0 | ||||
-rw-r--r-- | docs/static/vendor/OwlCarousel2/notes.txt | 12 | ||||
-rw-r--r-- | docs/static/vendor/dieulot/js/instantclick.min.js (renamed from docs/static/js/instantclick.min.js) | 0 | ||||
-rw-r--r-- | docs/static/vendor/flesler/js/jquery.scrollTo.min.js (renamed from docs/static/js/jquery.scrollTo.min.js) | 0 | ||||
-rw-r--r-- | docs/static/vendor/font-awesome/css/font-awesome.min.css (renamed from docs/static/assets/font-awesome/css/font-awesome.min.css) | 0 | ||||
-rw-r--r-- | docs/static/vendor/font-awesome/fonts/FontAwesome.otf (renamed from docs/static/assets/font-awesome/fonts/FontAwesome.otf) | bin | 109688 -> 109688 bytes | |||
-rw-r--r-- | docs/static/vendor/font-awesome/fonts/fontawesome-webfont.eot (renamed from docs/static/assets/font-awesome/fonts/fontawesome-webfont.eot) | bin | 70807 -> 70807 bytes | |||
-rw-r--r-- | docs/static/vendor/font-awesome/fonts/fontawesome-webfont.svg (renamed from docs/static/assets/font-awesome/fonts/fontawesome-webfont.svg) | 0 | ||||
-rw-r--r-- | docs/static/vendor/font-awesome/fonts/fontawesome-webfont.ttf (renamed from docs/static/assets/font-awesome/fonts/fontawesome-webfont.ttf) | bin | 142072 -> 142072 bytes | |||
-rw-r--r-- | docs/static/vendor/font-awesome/fonts/fontawesome-webfont.woff (renamed from docs/static/assets/font-awesome/fonts/fontawesome-webfont.woff) | bin | 83588 -> 83588 bytes | |||
-rw-r--r-- | docs/static/vendor/font-awesome/fonts/fontawesome-webfont.woff2 (renamed from docs/static/assets/font-awesome/fonts/fontawesome-webfont.woff2) | bin | 66624 -> 66624 bytes | |||
-rw-r--r-- | docs/static/vendor/highlightjs/css/monokai-sublime.css (renamed from docs/static/css/monokai-sublime.css) | 0 | ||||
-rw-r--r-- | docs/static/vendor/highlightjs/js/highlight.pack.js (renamed from docs/static/js/highlight.pack.js) | 0 | ||||
-rw-r--r-- | docs/static/vendor/highlightjs/notes.txt | 13 | ||||
-rw-r--r-- | docs/static/vendor/jquery/js/jquery-2.1.4.min.js (renamed from docs/static/js/jquery-2.1.4.min.js) | 0 | ||||
-rw-r--r-- | docs/static/vendor/twitter/js/bootstrap.min.js (renamed from docs/static/js/bootstrap.min.js) | 0 |
28 files changed, 490 insertions, 238 deletions
diff --git a/docs/static/css/bootstrap-additions-gohugo.css b/docs/static/css/bootstrap-additions-gohugo.css new file mode 100644 index 000000000..4128f3b8c --- /dev/null +++ b/docs/static/css/bootstrap-additions-gohugo.css @@ -0,0 +1,65 @@ +/*! + * Bootstrap for http://gohugo.io/ + * additional property-value pairs, for selectors already in Bootstrap; + * also, additional Bootstrap-like selectors + * + * Keep all such property additions to Bootstrap v3.3.6 here. + * + * Here, maintain the same order as the original Bootstrap file. + * + * Keep any additional Bootstrap-like selectors at the bottom. + * + * Copyright 2013-2016 Steve Francia and the Hugo Authors + * + * Based on 'dist/css/bootstrap.css' from: + * + * Bootstrap v3.3.6 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ +.btn { + -webkit-transition: all 0.15s; + -moz-transition: all 0.15s; + transition: all 0.15s; +} +.btn-primary:focus, +.btn-primary:active, +.btn-success:focus, +.btn-success:active, +.btn-info:focus, +.btn-info:active { + background-color: transparent; +} +.btn-default:hover, +.btn-default:active, +.btn-primary:hover, +.btn-primary:active, +.btn-success:hover, +.btn-success:active, +.btn-info:hover, +.btn-info:active { + outline: none; +} + +/* additional Bootstrap-like selectors */ + +.btn-repo { + border-color: black; + background-color: rgba(30, 30, 30, 0.8); + color: white; +} +.btn-repo:focus, +.btn-repo:active { + color: black; +} +.btn-repo:hover { + background-color: aliceblue; +} +.btn-repo:focus, +.btn-repo:active { + background-color: transparent; +} +.btn-repo:hover, +.btn-repo:active { + outline: none; +} diff --git a/docs/static/css/bootstrap-changes-gohugo.css b/docs/static/css/bootstrap-changes-gohugo.css new file mode 100644 index 000000000..d4ef99bcc --- /dev/null +++ b/docs/static/css/bootstrap-changes-gohugo.css @@ -0,0 +1,136 @@ +/*! + * Bootstrap for http://gohugo.io/ + * value changes to properties in Bootstrap selectors; + * Bootstrap must already have the same properties in the same selectors. + * + * Keep all such value changes to Bootstrap v3.3.6 here. + * + * Here, maintain the same order as the original Bootstrap file. + * + * Keep all new properties, for new or existing selectors, + * in other stylesheets. + * + * Copyright 2013-2016 Steve Francia and the Hugo Authors + * + * Based on 'dist/css/bootstrap.css' from: + * + * Bootstrap v3.3.6 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ +body { + font-family: Lato; + color: #2b2b2b; +} +a { + color: #ff4088; +} +a:hover, +a:focus { + color: #ff4088; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: Lato; + font-weight: 400; +} +code, +kbd, +pre, +samp { + font-family: Menlo, Consolas, 'DejaVu Sans Mono', + 'Bitstream Vera Sans Mono', 'Lucida Console', Monaco, + 'Droid Sans Mono', monospace; +} +legend { + color: #2b2b2b; + border-bottom: 1px solid #c7c7cc; +} +.btn:focus { + /*outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px;*/ + outline: none; +} +.btn:hover, +.btn:focus { + color: #2b2b2b; +} +.btn-default:focus { + color: #fff; + background-color: #9e9e9e; + border-color: #9e9e9e; +} +.btn-default:hover { + color: #fff; + background-color: #9e9e9e; + border-color: #9e9e9e; +} +.btn-default:active { + color: #fff; + background-color: #9e9e9e; + border-color: #9e9e9e; +} +.btn-primary { + background-color: #007aff; + border-color: #007aff; +} +.btn-primary:focus { + color: #007aff; + border-color: #007aff; +} +.btn-primary:hover { + color: #007aff; + background-color: aliceblue; + border-color: #007aff; +} +.btn-primary:active { + color: #007aff; + border-color: #007aff; +} +.btn-success { + background-color: #4cd964; + border-color: #4cd964; +} +.btn-success:focus { + color: #4cd964; + border-color: #4cd964; +} +.btn-success:hover { + color: #4cd964; + background-color: aliceblue; + border-color: #4cd964; +} +.btn-success:active { + color: #4cd964; + border-color: #4cd964; +} +.btn-info { + background-color: #34aadc; + border-color: #34aadc; +} +.btn-info:focus { + color: #34aadc; + border-color: #34aadc; +} +.btn-info:hover { + color: #34aadc; + background-color: aliceblue; + border-color: #34aadc; +} +.btn-info:active { + color: #34aadc; + border-color: #34aadc; +} +.panel { + border: 0px solid transparent; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); +} +.panel-body { + padding: 15px 15px 0px 15px; +} diff --git a/docs/static/css/bootstrap-gohugo.css b/docs/static/css/bootstrap-stripped-gohugo.css index 1a929cfe8..aafb0df53 100644 --- a/docs/static/css/bootstrap-gohugo.css +++ b/docs/static/css/bootstrap-stripped-gohugo.css @@ -1,9 +1,10 @@ /*! * Bootstrap for http://gohugo.io/ - * with some customizations and with many unused selectors removed - * Copyright 2013-2015 Steve Francis and the Hugo Authors + * with many unused property-value pairs, as well as selectors, removed * - * Based on: + * Copyright 2013-2016 Steve Francia and the Hugo Authors + * + * Based on 'dist/css/bootstrap.css' from: * * Bootstrap v3.3.6 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. @@ -227,10 +228,10 @@ html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { - font-family: Lato; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; - color: #2b2b2b; + color: #333; background-color: #fff; } input, @@ -242,12 +243,12 @@ textarea { line-height: inherit; } a { - color: #ff4088; + color: #337ab7; text-decoration: none; } a:hover, a:focus { - color: #ff4088; + color: #23527c; text-decoration: underline; } a:focus { @@ -273,8 +274,8 @@ h3, h4, h5, h6 { - font-family: Lato; - font-weight: 400; + font-family: inherit; + font-weight: 500; line-height: 1.1; color: inherit; } @@ -381,7 +382,7 @@ code, kbd, pre, samp { - font-family: Menlo, Consolas, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', Monaco, 'Droid Sans Mono', monospace; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } code { padding: 2px 4px; @@ -1097,9 +1098,9 @@ legend { margin-bottom: 20px; font-size: 21px; line-height: inherit; - color: #2b2b2b; + color: #333; border: 0; - border-bottom: 1px solid #c7c7cc; + border-bottom: 1px solid #e5e5e5; } label { display: inline-block; @@ -1137,81 +1138,102 @@ label { background-image: none; border: 1px solid transparent; border-radius: 4px; - -webkit-transition: all 0.15s; - -moz-transition: all 0.15s; - transition: all 0.15s; } .btn:focus { - /*outline: thin dotted; + outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px;*/ - outline: none; + outline-offset: -2px; } .btn:hover, .btn:focus { - color: #2b2b2b; + color: #333; text-decoration: none; } +.btn:active { + outline: 0; +} .btn-default { color: #333; background-color: #fff; border-color: #ccc; } -.btn-default:hover, -.btn-default:focus, +.btn-default:focus { + color: #333; + background-color: #e6e6e6; + border-color: #8c8c8c; +} +.btn-default:hover { + color: #333; + background-color: #e6e6e6; + border-color: #adadad; +} .btn-default:active { - color: #fff; - background-color: #9e9e9e; - border-color: #9e9e9e; + color: #333; + background-color: #e6e6e6; + border-color: #adadad; } .btn-default:active { background-image: none; } .btn-primary { color: #fff; - background-color: #007aff; - border-color: #007aff; + background-color: #337ab7; + border-color: #2e6da4; +} +.btn-primary:focus { + color: #fff; + border-color: #122b40; +} +.btn-primary:hover { + color: #fff; + background-color: #286090; + border-color: #204d74; } -.btn-primary:hover, -.btn-primary:focus, .btn-primary:active { - color: #007aff; - border-color: #007aff; - background: transparent; + color: #fff; + border-color: #204d74; } .btn-primary:active { background-image: none; } .btn-success { color: #fff; - background-color: #4cd964; - border-color: #4cd964; + background-color: #5cb85c; + border-color: #4cae4c; +} +.btn-success:focus { + color: #fff; + border-color: #255625; +} +.btn-success:hover { + color: #fff; + background-color: #449d44; + border-color: #398439; } -.btn-success:hover, -.btn-success:focus, .btn-success:active { - color: #4cd964; - background: transparent; - border-color: #4cd964; + color: #fff; + border-color: #398439; } .btn-success:active { background-image: none; - outline: none; } .btn-info { color: #fff; - background-color: #34aadc; - border-color: #34aadc; + background-color: #5bc0de; + border-color: #46b8da; } -.btn-info:hover, -.btn-info:focus, -.btn-info:active { - color: #34aadc; - background: transparent; - border-color: #34aadc; +.btn-info:focus { + color: #fff; + border-color: #1b6d85; +} +.btn-info:hover { + color: #fff; + background-color: #31b0d5; + border-color: #269abc; } .btn-info:active { - background-image: none; + color: #fff; + border-color: #269abc; } .btn-lg, .btn-group-lg > .btn { @@ -1266,12 +1288,12 @@ label { .panel { margin-bottom: 20px; background-color: #fff; - border: 0px solid transparent; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + border: 1px solid transparent; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); + box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } .panel-body { - padding: 15px 15px 0px 15px; + padding: 15px; } .carousel { position: relative; diff --git a/docs/static/css/home-page-style-responsive.css b/docs/static/css/home-page-style-responsive.css new file mode 100644 index 000000000..46ce3eb43 --- /dev/null +++ b/docs/static/css/home-page-style-responsive.css @@ -0,0 +1,44 @@ +/* full page image header area */ + +@media (min-width: 1024.1px) { + .header { + background-image: url('../img/desk.jpg'); + } +} +@media (max-width: 319.9px) { + .header { + background-image: url('../img/desk-sm.jpg'); + } +} +@media (max-width: 319.9px), (min-width: 1024.1px) { + .header { + background-position: center center; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + background-attachment: fixed; + } +} +@media (min-width: 320px) and (max-width: 1024px) { + .header { + background-position: 0% 0%; + -webkit-background-size: 100% 100%; + -moz-background-size: 100% 100%; + -o-background-size: 100% 100%; + background-size: 100% 100%; + background-attachment: scroll; + background-clip: border-box; + background-origin: padding-box; + } +} +@media (min-width: 320px) and (max-width: 1024px) and (orientation: portrait) { + .header { + background-image: url('../img/desk-mini.jpg'); + } +} +@media (min-width: 320px) and (max-width: 1024px) and (orientation: landscape) { + .header { + background-image: url('../img/desk-wide.jpg'); + } +} diff --git a/docs/static/css/HPstyles.css b/docs/static/css/home-page-style.css index f8526d9dd..4ff3bc815 100644 --- a/docs/static/css/HPstyles.css +++ b/docs/static/css/home-page-style.css @@ -1,270 +1,194 @@ -/* Global Styles */ +/* global styles */ -html, -body { +html { + width: 100%; height: 100%; + letter-spacing: 0.5px; +} +body { width: 100%; + height: 100%; letter-spacing: 0.5px; + line-height: 1.6; + font-family: 'Arbutus Slab', "Helvetica Neue", "Helvetica", sans-serif !important; } - h1, h2, h3, h4, h5, h6 { font-family: 'Cabin', "Helvetica Neue", "Helvetica", sans-serif; } - -body { - - font-family: 'Arbutus Slab', "Helvetica Neue", "Helvetica", sans-serif !important; - line-height: 1.6; -} - -.vert-text { +div.vert-text { display: table-cell; vertical-align: middle; text-align: center; } +/* full page image header area */ -/* Full Page Image Header Area */ - +div.buttonbox { + margin: 2em 0 4em; +} +img.logo { + padding: 2em; + width: 100%; + max-width: 35em; +} +div#main { + position: relative; + z-index: 99999; + background: rgb(255, 255, 255); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); +} .header { display: table; - height: 70%; + position: relative; width: 100%; + height: 70%; min-height: 70%; - position: relative; - background: url(../img/desk.jpg) no-repeat center center fixed; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; z-index: 99999; background-color: black; + background-repeat: no-repeat; } - -.logo { - max-width: 35em; - width: 100%; - padding: 2em; -} - -.buttonbox { - margin: 2em 0 4em; -} - -@media only screen -and (min-device-width : 320px) -and (max-device-width : 1024px) -and (orientation : portrait) -{ - .header { - display: table; - height: 70%; - width: 100%; - position: relative; - background: url(../img/desk-mini.jpg) no-repeat; - background-size: 100% 100%; - z-index: 99999; - background-color: black; - } -} - -@media only screen -and (min-device-width : 320px) -and (max-device-width : 1024px) -and (orientation : landscape) { - .header { - display: table; - height: 70%; - width: 100%; - position: relative; - background: url(../img/desk-long.jpg) no-repeat; - background-size: 100% 100%; - z-index: 99999; - background-color: black; - } -} - -.header .btn { +.header a.btn { margin: 10px; -} - -#main { - z-index: 99999; - position: relative; - background: rgb(255, 255, 255); - box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); -} - -.header .btn { font-weight: 100; } -/* Intro */ - -.counterpoint { - padding: 50px 0; - background-color: rgb(255, 252, 244); -} +/* intro */ -.point { - background: rgb(96,210,211); - padding: 50px 0; - color: #ffffff; -} - - -.point h2, .counterpoint h2 { - font-size: 32pt; - line-height: 1.7; +a:hover { + color: rgb(52, 73, 94); } - -i.callout-icon, i.point-icon, i.lead-icon { - border-radius: 50%; +i.callout-icon, i.lead-icon, i.point-icon { display: inline-block; - font-size: 56px; + vertical-align: middle; + text-align: center; width: 140px; height: 140px; + font-size: 56px; line-height: 136px; - vertical-align: middle; - text-align: center; + border-radius: 50%; -webkit-transition: box-shadow 0.2s; -moz-transition: box-shadow 0.2s; transition: box-shadow 0.2s; } - -i.lead-icon { - border: 3px solid #222; +div.counterpoint { + background-color: rgb(255, 252, 244); } - -i.point-icon, i.callout-icon { - border: 3px solid #ffffff; +div.counterpoint, div.point { + padding: 50px 0; +} +div.counterpoint a, div.point a { + color: rgb(7,162,166); +} +div.counterpoint h2, div.point h2 { + line-height: 1.7; + font-size: 32pt; +} +a.icon-2x { + font-size: 200%; +} +i.lead-icon { + border: 3px solid #222222; } - i.lead-icon:hover { - color: #fff; border: 3px solid black; background: black; + color: #ffffff; } - -i.point-icon:hover { - color: rgb(22, 203, 230); - border: 3px solid #fff; - background: #fff; +div.point { + background: rgb(96,210,211); + color: #ffffff; } - -a:hover { - color: rgb(52, 73, 94); +div.point h2 > i { + color:#FF4088; } - - - -.icon-2x { - font-size: 200%; +i.point-icon { + border: 3px solid #ffffff; +} +i.point-icon:hover { + background: #ffffff; + color: rgb(22, 203, 230); } -/* Callout */ +/* callout */ -.callout { - color: #ffffff; +div.callout { display: table; table-layout: fixed; - height: 420px; wi |