improve accessibility and add search form

README.md

@@ -136,8 +136,6 @@ layout: post
 
 ### Icons
 
-
-
 The [JSON Feed spec](https://jsonfeed.org/version/1) states that feeds should include an icon. To add your icon, add the following line in your site's `_config.yml` file:
 
 ```
@@ -146,8 +144,6 @@ feed_icon: /assets/images/icon-512.png
 
 Then, replace the `/assets/images/icon-512.png` file with your own image.
 
-
-
 ### Credits
 
 The theme credits that appear at the bottom of each page can be turned off by including the following line in your site's `_config.yml` file:
@@ -156,6 +152,14 @@ The theme credits that appear at the bottom of each page can be turned off by in
 hide_credits: true
 ```
 
+### Search
+
+The theme uses a [custom DuckDuckGo Search Form](https://patdryburgh.com/blog/adding-a-custom-duckduckgo-search-bar-to-your-site/) that can be turned off by including the following line in your site's `_config.yml` file: 
+
+```
+hide_search: true
+```
+
 ### Font
 
 I spent a good amount of time trying to identify the font used on the front cover of the trade paperback version of Arguably. Unfortunately, I failed to accurately identify the exact font used. If you happen to know what font is used on the book cover, I would appreciate you [letting me know](mailto:hello@patdryburgh.com) :)

_includes/menu.html

@@ -1,7 +1,7 @@
 {% assign menu = site.data.menu %}
 
 {% if menu %}
-  <nav class="site-navigation">
+  <nav class="site-navigation" role="navigation">
     <ul>
       <li>
         <a href="{{ '/' | prepend: site.baseurl }}">

_includes/search.html

@@ -0,0 +1,8 @@
+<form method="get" id="search" action="https://duckduckgo.com/">
+  <input type="hidden" name="sites" value="{{ site.url }}"/>
+  <input type="hidden" name="k8" value="#222222"/>
+  <input type="hidden" name="k9" value="#dc4b3c"/>
+  <input type="hidden" name="kt" value="h"/>
+  <input type="text" id="search__input" name="q" placeholder="Search&hellip;"/ autocomplete="off">
+  <button type="submit" class="btn btn-bordered" tabindex="-1">Search</button>
+</form>

_layouts/default.html

@@ -31,6 +31,10 @@
 
     {{ content }}
 
+    {% unless site.hide_search %}
+      {% include search.html %}
+    {% endunless %}
+
     {% include menu.html %}
 
     {% unless site.hide_credits %}

_layouts/home.html

@@ -22,7 +22,7 @@ <h2>
   </header>
 {% endif %}
 
-<main class="home" aria-label="Content" id="main">
+<main class="home" id="main" role="main" aria-label="Content">
 
   <h1 class="content-title divided">
     {% if site.paginate and site.paginate_path and paginator.page > 1 %}

_layouts/post.html

@@ -8,7 +8,7 @@
   {% include back-link.html %}
 {% endif %}
 
-<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting" id="main">
+<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting" id="main" role="article" aria-label="Content">
 
   {% if page.title != "" %}
     <h1 class="post-title divided p-name" itemprop="name headline">

_sass/_base.scss

@@ -1,6 +1,6 @@
 body {
   color: $text-color;
-  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
+  font-family: $font-family;
   font-size: 1.3125em;
   line-height: 1.5;
 }

_sass/_menu.scss

@@ -1,5 +1,6 @@
 .site-navigation {
   margin-top: 2rem;
+  padding: 0 1rem;
 }
 
 .site-navigation ul {

_sass/_search.scss

@@ -0,0 +1,20 @@
+#search {
+  margin: 0 auto;
+  padding: 0 1rem;
+  text-align: center;
+}
+
+#search__input {
+  border: 0;
+  font: 1em $font-family;
+  padding: .5em;
+  color: $text-color;
+  text-align: center;
+  &:focus {
+    outline: 1px dashed $text-color;
+  }
+}
+
+#search button[type="submit"] {
+  display: none;
+}

_sass/_variables.scss

@@ -1,6 +1,7 @@
 $brand-color:         #f2e300;
 $text-color:          #0b0404;
 $muted-text-color:    #79785b;
+$font-family:         "EB Garamond", Garamond, "Times New Roman", serif;
 
 $on-bigphone:         375px;
 $on-tablet:           768px;

assets/css/main.scss

@@ -16,5 +16,6 @@ $asset_url: '{{ '/assets' | absolute_url }}';
   "menu",
   "post-list",
   "article",
-  "footnotes"
+  "footnotes",
+  "search"
 ;