Added search function with DuckDuckGo.

README.md

@@ -40,6 +40,8 @@ $ git clone https://github.com/frjo/hugo-theme-zen.git zen
 
 ## config.yaml example
 
+All the "params" are optional.
+
 ```
 baseurl: "https://example.org/"
 title: "SiteTitle"
@@ -47,12 +49,14 @@ title: "SiteTitle"
 params:
   copyright: "This site is licensed under a 
       [Creative Commons Attribution-ShareAlike 4.0 International License]
-      (https://creativecommons.org/licenses/by-sa/4.0/)."    # Optional
-  contact: "info@example.org"    # Optional
-  footer: "A [example.org](https://example.org/) production."    # Optional
-  poweredby: true    # Optional, show powered by hugo in footer
-  jquery: true    # Optional
-  slicknav: true    # Optional, activates a nice mobile menu.
+      (https://creativecommons.org/licenses/by-sa/4.0/)."
+  contact: "info@example.org"
+  footer: "A [example.org](https://example.org/) production."
+  poweredby: true    # Show powered by hugo in footer
+  jquery: true
+  slicknav: true    # Activates SlickNav, a nice mobile menu.
+  search: true    # Site search with DuckDuckGo.
+  searchSize: 20    # Search field size, default 20.
 ```
 
 

layouts/_default/baseof.html

@@ -14,6 +14,7 @@
 <h1 class="header__site-name">
 <a href="{{ .Site.BaseURL }}" title="Home" class="header__site-link" rel="home"><span>{{ .Site.Title }}</span></a>
 </h1>
+<div class="header__region region region-header">{{ if .Site.Params.search }}{{ partial "search.html" . }}{{ end }}</div>
 </header>
 
 <div class="layout-3col layout-swap">

layouts/partials/search.html

@@ -0,0 +1,6 @@
+{{ $domain := .Site.BaseURL | replaceRE "^https?://(www\\.)?([^/]+)/?" "$2" }}
+<form class="search-form" method="get" action="https://duckduckgo.com/">
+<input type="search" name="q" class="search-text" placeholder="Search this site…" title="Enter the terms you wish to search for." size="{{ .Site.Params.searchSize | default "20" }}" maxlength="128">
+<input type="hidden" name="sites" value="{{ $domain }}">
+<input type="submit" value="DuckDuckGo Search" class="hidden">
+</form>

sass/_zen.scss

@@ -117,7 +117,23 @@ body {
   }
 
   &__logo {
-    width: 100px;
+    @include respond-to(s) {
+      float: left;
+    }
+  }
+
+  &__site-name {
+    @include respond-to(s) {
+      float: left;
+    }
+  }
+
+  &__region {
+    @include respond-to(s) {
+      float: right;
+      width: 33%;
+      clear: none;
+    }
   }
 }
 
@@ -169,6 +185,22 @@ body {
   }
 }
 
+
+/* Search */
+
+.search-form {
+  @include padding-top(.5);
+  text-align: center;
+
+  @include respond-to(s) {
+    text-align: left;
+  }
+}
+
+.search-text {
+}
+
+
 /* Print. */
 
 aside,

static/js/script.js

@@ -3,11 +3,19 @@
  * A JavaScript file for the theme.
  */
 
-$(document).ready(function () {
+(function ($) {
+
+  'use strict';
+
+  // Add a js class to the html-tag when JavsScript is active.
+  $('html').addClass('js');
+
+  // Activate he SlickNav menu for small screens.
   if (window.matchMedia && $.isFunction($.fn.slicknav)) {
-    var mq = window.matchMedia("(max-width: 666px)");
+    var mq = window.matchMedia('(max-width: 666px)');
     if (mq.matches) {
       $('.main-menu').hide().find('.navbar').filter(':first').slicknav();
     }
   }
-});
+
+})(jQuery);