Merge pull request #6 from cityofaustin/ui-tweaks

Update responsive and accessibility components

README.md

@@ -2,9 +2,9 @@
 
 Kocurek is a Jekyll theme for static sites published on GitHub Pages. It was developed for the Austin Convention Center Department for use on documentation sites.
 
-## Example
+## Theme Template
 
-The [Kocurek Jekyll Theme Example](https://github.com/mattlangan/jekyll-theme-kocurek-example) repository is a template that you can use to quickly create your own Github Pages site in minutes, _without the need for a developer_.
+The [Kocurek Jekyll Theme Template](https://github.com/cityofaustin/jekyll-theme-kocurek-template) repository is a template that you can use to quickly create your own Github Pages site in minutes, _without the need for a developer_.
 
 ## How it Works
 
@@ -20,21 +20,62 @@ Content is edited directly in markdown files in the `collections/` subdirectorie
 - Full site search (configuration required)
 - WAG Accessibility
 
-## Examples
+## Live Examples
 
-The following live sites are using Kocurek:
-
-- Austin Convention Center Operations Manual
+- Austin Convention Center Operations Manual  
   [https://ops.austinconventioncenter.com](https://ops.austinconventioncenter.com)
-- Palmer Events Center Operations Manual
+- Palmer Events Center Operations Manual  
   [https://ops.palmereventscenter.com](https://ops.palmereventscenter.com)
-- Austin Convention Center Web Publishing Guides
+- Austin Convention Center Web Publishing Guides  
   [https://webguides.austinconventioncenter.com](https://webguides.austinconventioncenter.com)
 
 ---
 
+## Quickstart
+
+Learn how to create your own Kocurek-powered microsite, or how to manage an existing one.
+
 ## Options
 
+The following options can be set in `_config.yml` in your project site.
+
+### Parent Site
+
+Specify a parent site to the microsite.
+
+- `title` (required): The name of the parent site, used as alternate text if a logo is not present
+- `url` (required): The web address of the parent site, linked from the parent site logo or title
+- `logo` (optional): An image representing the parent site
+
+```
+parent_site:
+  title: Austin Convention Center
+  url: https://www.austinconventioncenter.com
+  logo: acc-logo.png
+```
+
+### Printable
+
+Add a link to "Print This Page" on each section and sub-section to make it easy to download the page contents in PDF format.
+
+The entire site is accessible as a single PDF document at `/pdf`,so if the site URL is `ops.austinconventioncenter.com` then the PDF can be accessed at `ops.austinconventioncenter.com/pdf`.
+
+### Random Background Images
+
+You can supply any number of images to be used as full-page background images, randomly picked on each page load.
+
+Background images must:
+
+- Be named sequentially from 1 to the number you specify (`1.jpg`, `2.jpg`, etc...)
+- Be in JPG format
+- Be placed in `assets/images/backgrounds/`
+
 ### Search
 
-The theme includes support for site search via the [Jekyll Simple Site Search](https://github.com/christian-fei/Simple-Jekyll-Search) JavaScript library.
+Display a search box with typeahead atop the navigation panel. All site content is automatically indexed and made full-text-searchable. Set to `false` or remove to remove the 
+
+Search support is provided by the [Jekyll Simple Site Search](https://github.com/christian-fei/Simple-Jekyll-Search) JavaScript library.
+
+```
+searchable: true
+```

_includes/head.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width,maximum-scale=2">
   <script src="https://cdn.rawgit.com/christian-fei/Simple-Jekyll-Search/master/dest/simple-jekyll-search.min.js"></script>
   <script src="/assets/js/jquery.js"></script>
+  <script src="/assets/js/scripts.js"></script>
   <link rel="stylesheet" type="text/css" media="screen" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
   <link rel="stylesheet" type="text/css" media="print" href="{{ '/assets/css/print.css?v=' | append: site.github.build_revision | relative_url }}">
 </head>

_includes/navigation.html

@@ -1,5 +1,14 @@
 <a href="#main_content" id="skip_nav_link">Skip to content</a>
-<nav>
+<div id="menu_toggle_container">
+  <button class="hamburger" type="button" aria-label="Toggle the menu" aria-controls="navigation">
+    <span class="hamburger-box">
+      <span class="hamburger-inner"></span>
+    </span>
+    <span class="hamburger-label">Menu</span>
+  </button>
+</div>
+
+<nav role="navigation">
   <div>
     {%- if site.parent_site -%}
       <a href="{{site.parent_site.url}}" class="parent-site">
@@ -16,7 +25,8 @@
     {%- if site.searchable -%}
       <div id="ops_search">
         <div>
-          <input type="text" id="search-input" placeholder="Search this site" aria-label="Search the site">
+          <input type="text" id="search-input" placeholder="Search this site" aria-label="Enter a search term to generate realtime search results in the list below.">
+          <img class="clear-search-button" src="{{ site.url }}/assets/images/button-close.png" aria-label="Click to clear search query and results" />
           <ul id="results-container"></ul>
           <script>
             var sjs = SimpleJekyllSearch({