HTML doc updates

A catchall commit for the following
doc updates:

Turn on anchor visibility

Make the anchors that link to headers
permanently visible. This will allow users
to press tab to jump to sections.

The stylistic properties of anchors were
also changed for aesthetic purposes since
they're now always visible.

Fix zoomed text cut-off

When HTML pages are zoomed in or the
window width is shortened, the text
is cut off on the left side because
the `body` is padded to the right by
pixels.

This PR resolves the issue by changing
the padding value to a percentage value
that looks similar to what we have now.
Since the padding is relative, the body
text will never be cut off.

We also need to break lines and words
to avoid 2-dimensional scrolling.

Reduce admonition font size

Reduce the font size of admonitions
such as Notes to avoid looking like
section headers.

Update sidebar logo alt text

Increase text contrast

Add label to search bar

Increase search bar contrast

Add language tag to docs

Disable search dropdown menu

Add title to GitHub star iframe

Darken navbar links

doc/source/_templates/layout.html

@@ -1,10 +1,10 @@
 {%- extends "!layout.html" %}
 
 {%- block nav_links %}
-<li><a href="{{ pathto(master_doc) }}">Home</a></li>
-<li><a href="https://docs.aws.amazon.com/cli/latest/userguide/">User Guide</a></li>
-<li><a href="https://forums.aws.amazon.com/forum.jspa?forumID=150">Forum</a></li>
-<li><a href="https://github.com/aws/aws-cli">GitHub</a></li>
+<li><a class="nav-link" href="{{ pathto(master_doc) }}">Home</a></li>
+<li><a class="nav-link" href="https://docs.aws.amazon.com/cli/latest/userguide/">User Guide</a></li>
+<li><a class="nav-link" href="https://forums.aws.amazon.com/forum.jspa?forumID=150">Forum</a></li>
+<li><a class="nav-link" href="https://github.com/aws/aws-cli">GitHub</a></li>
 {%- endblock %}
 
 {% block ga %}

doc/source/_templates/sidebarlogo.html

@@ -1,5 +1,5 @@
 <p class="logo left-bar-other">
   <a href="{{ pathto(master_doc) }}">
-    <img class="logo" src="{{ pathto('_static/logo.png', 1) }}" alt="Logo" height="63" />
+    <img class="logo" src="{{ pathto('_static/logo.png', 1) }}" alt="Amazon Web Services logo" height="63" />
   </a>
 </p>

doc/source/conf.py

@@ -89,6 +89,9 @@
 # A list of ignored prefixes for module index sorting.
 #modindex_common_prefix = []
 
+# Natural language of docs.
+language = 'en'
+
 
 # -- Options for HTML output ---------------------------------------------------
 

doc/source/guzzle_sphinx_theme/guzzle_sphinx_theme/layout.html

@@ -64,7 +64,8 @@
         {%- if theme_github_user and theme_github_repo %}
         <div class="pull-right" id="github-stars">
           <iframe src="https://ghbtns.com/github-btn.html?user={{ theme_github_user }}&repo={{ theme_github_repo }}&type=watch&count=true&size=small"
-                  allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"  sandbox="allow-scripts"></iframe>
+                  allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"  sandbox="allow-scripts"
+                  title="GitHub button showing the number of project stars."></iframe>
         </div>
         {%- endif %}
       </div>

doc/source/guzzle_sphinx_theme/guzzle_sphinx_theme/searchbox.html

@@ -2,7 +2,8 @@
 <div id="searchbox" style="display: none">
     <h3>{{ _('Quick search') }}</h3>
     <form class="form-search margin-top-1em" action="{{ pathto('search') }}" method="get">
-        <input type="text" name="q" style="width: 105px" class="input-small search-query" />
+        <label for="searchbox">Search box</label>
+        <input id="searchbox" type="search" name="q" style="width: 105px" class="input-small search-query" autocomplete="off" />
         <button type="submit" class="btn btn-small">Search</button>
         <input type="hidden" name="check_keywords" value="yes" />
         <input type="hidden" name="area" value="default" />

doc/source/guzzle_sphinx_theme/guzzle_sphinx_theme/static/guzzle.css_t

@@ -22,19 +22,30 @@ div.document {
 }
 
 .body {
-  width: 713px;
+  width: 74%;
   float: right;
+  word-wrap: break-word;
 }
 
 div.related {
   display: none;
 }
 
+a:link,
+a:hover,
+a:active {
+  color: #106C9B;
+}
+
+a:visited {
+  color: #6a329f;
+}
+
 a.headerlink {
-  visibility: hidden;
-  color: #ddd;
-  padding: 0 4px;
+  color: #106C9B;
+  padding: 0 6px;
   text-decoration: none;
+  font-size: 18px;
 }
 
 h1:hover > a.headerlink,
@@ -43,9 +54,6 @@ h3:hover > a.headerlink,
 h4:hover > a.headerlink,
 h5:hover > a.headerlink,
 h6:hover > a.headerlink,
-dt:hover > a.headerlink {
-  visibility: visible;
-}
 
 a.headerlink:hover {
   color: #444;
@@ -92,6 +100,7 @@ code, pre {
   color: #333333;
   line-height: 23px;
   margin: 20px 0;
+  white-space: pre-wrap;
 }
 
 div.highlight {
@@ -102,6 +111,10 @@ div.highlight {
   font-weight: bold;
 }
 
+.navbar .nav .nav-link {
+  color: #000000;
+}
+
 [class^="icon-"],
 [class*=" icon-"] {
   background-image: url("../_static/glyphicons-halflings.png");
@@ -131,6 +144,10 @@ a.internal em {
   font-style: normal;
 }
 
+label {
+  width:135px;
+}
+
 /* Sphinx sidebar
 -------------------------------------------------- */
 
@@ -200,7 +217,7 @@ div.sphinxsidebar ul ul {
 }
 
 div.sphinxsidebar input {
-  border: 1px solid #ccc;
+  border: 1px solid #6C6C6C;
   font-family: Helvetica, arial, freesans, clean, sans-serif;
   font-size: 1em;
 }
@@ -261,10 +278,6 @@ table.two-column {
   background-color: #fff;
 }
 
-.top-links a {
-  opacity: 0.7;
-}
-
 .footer-links {
   border-top: 1px solid #ccc;
   padding-top: 12px;
@@ -498,8 +511,8 @@ dd div.admonition {
 }
 
 div.admonition p.admonition-title {
-  font-weight: normal;
-  font-size: 22px;
+  font-weight: bold;
+  font-size: 15px;
   margin: 0 0 10px 0;
   padding: 0;
   line-height: 1;

requirements-docs.txt

@@ -4,7 +4,7 @@ jinja2<3.1
 
 
 docutils>=0.10,<0.17
-Sphinx==1.3.2
+Sphinx==1.4.9
 -e .
 # alabaster version 0.7.13 requires Sphinx>1.6
 alabaster>0.7,<0.7.13