From cc8da26f92655b7d8cf61717ea9fe53286443fa4 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 13 Jul 2014 00:42:57 +0200
Subject: [PATCH] search and navigation fixes

---
 _src/_includes/header.html        |  2 +-
 _src/assets/js/app.js             |  2 +-
 _src/assets/styl/alerts.styl      |  7 +++----
 _src/assets/styl/buttons.styl     |  5 +++--
 _src/assets/styl/navigation.styl  | 13 ++++++-------
 _src/assets/styl/scaffolding.styl | 12 ++++++++++++
 _src/assets/styl/search.styl      | 32 +++++++++++++++++++++----------
 7 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/_src/_includes/header.html b/_src/_includes/header.html
index e007f325..50dcbf9d 100644
--- a/_src/_includes/header.html
+++ b/_src/_includes/header.html
@@ -23,7 +23,7 @@
             <a class="search-btn icon icon-search" href="#"></a>
             <div class="search-area">
                 <input type="search" class="form-control input-search search-field" placeholder="Search everything">
-                <a class="search-close close" href="#">x</a>
+                <a class="search-close close" href="#">&times;</a>
             </div>
         </section>
 
diff --git a/_src/assets/js/app.js b/_src/assets/js/app.js
index 43cee414..949162bb 100644
--- a/_src/assets/js/app.js
+++ b/_src/assets/js/app.js
@@ -30,7 +30,7 @@ var siteNavigation = {
             $searchfield.jekyllSearch({
                 searchResults       : $searchresults,
                 searchResultsTitle  : '',
-                template            : '<a class="nav-link" href="{url}" title="{title}">{title}</a>',
+                template            : '<a class="search-link" href="{url}" title="{title}">{title}</a>',
                 fuzzy               : true
             });
 
diff --git a/_src/assets/styl/alerts.styl b/_src/assets/styl/alerts.styl
index a235dd10..1061e70e 100644
--- a/_src/assets/styl/alerts.styl
+++ b/_src/assets/styl/alerts.styl
@@ -11,7 +11,6 @@
     font-size: $font-size-small
     border: 1px solid transparent
 
-    // alignment and spacing of inner content
     > p,
     > ul
         margin-bottom: 0
@@ -21,15 +20,15 @@
 .alert-success
     color: #468847
     background: #dff0d8
-    border-color: #b5c6a8
+    border-color: darken(#dff0d8, 5%)
 
 .alert-danger,
 .alert-error
     color: #b94a48
     background: #f2dede
-    border-color: #dcc5ca
+    border-color: darken(#f2dede, 5%)
 
 .alert-info
     color: #3a87ad
     background: #d9edf7
-    border-color: #a6ced8
\ No newline at end of file
+    border-color: darken(#d9edf7, 5%)
diff --git a/_src/assets/styl/buttons.styl b/_src/assets/styl/buttons.styl
index 91cb547d..3651ef19 100644
--- a/_src/assets/styl/buttons.styl
+++ b/_src/assets/styl/buttons.styl
@@ -10,6 +10,7 @@
     margin-bottom: 0
     font-weight: normal
     vertical-align: middle
+    touch-action: manipulation
     cursor: pointer
     background-image: none // Reset unusual Firefox-on-Android default style
     white-space: nowrap
@@ -133,7 +134,6 @@
 // Close button
 /////////////////////////////////////
 
-a.close,
 .close
     @extend .textcenter
     width: 16px
@@ -147,4 +147,5 @@ a.close,
     color: #fff
 
     &:hover
-        background: $link-color-hover
\ No newline at end of file
+        background: $link-color-hover
+        color: #fff
\ No newline at end of file
diff --git a/_src/assets/styl/navigation.styl b/_src/assets/styl/navigation.styl
index d856dda3..912c67f5 100644
--- a/_src/assets/styl/navigation.styl
+++ b/_src/assets/styl/navigation.styl
@@ -7,6 +7,7 @@
 .menu-btn,
 .search-btn
     @extend .textcenter
+    text-shadow: 0 1px 0 rgba(#fff, .5)
     line-height: 1em
     vertical-align: middle
     display: inline-block
@@ -15,12 +16,8 @@
     right: 0
     top: 0
 
-    // icons
-    &:before
-        color: $link-color
-
     &:hover:before
-        color: $link-color-hover
+        color: $link-color
 
     &:active:before
         transition: none
@@ -28,6 +25,7 @@
 
 .search-btn
     right: 50px
+    padding: .65em .85em
 
 
 // Main Navigation
@@ -53,13 +51,12 @@
 
 .nav-link
     @extend .h6, .alignleft, .textcenter
+    text-shadow: 0 1px 0 rgba(#fff, .5)
     padding: .5em 1em
     margin-bottom: 0
     width: 50%
     color: $text-color-dimmed
-    line-height: $line-height-computed
     text-transform: uppercase
-    font-size: $font-size-small
 
     @media $breakpoint2
         width: 33.3%
@@ -68,6 +65,7 @@
     &:before
         @extend .textcenter, .transition
         display: block
+        margin-bottom: 5px
         width: 100%
         font-size: 32px
         height: 32px
@@ -84,6 +82,7 @@
     &:active
         background: $link-color
         top: 0
+        color: #fff
 
     &:active:before
         color: #fff
diff --git a/_src/assets/styl/scaffolding.styl b/_src/assets/styl/scaffolding.styl
index 49e436b1..7cdf1c2f 100644
--- a/_src/assets/styl/scaffolding.styl
+++ b/_src/assets/styl/scaffolding.styl
@@ -16,6 +16,18 @@ body
     background: $body-bg
 
 
+// Reset fonts for relevant elements
+/////////////////////////////////////
+
+input,
+button,
+select,
+textarea
+    font-family: inherit
+    font-size: inherit
+    line-height: inherit
+
+
 // topbar and footer as fixed
 // site background
 /////////////////////////////////////
diff --git a/_src/assets/styl/search.styl b/_src/assets/styl/search.styl
index aadf1fd6..c25ad9de 100644
--- a/_src/assets/styl/search.styl
+++ b/_src/assets/styl/search.styl
@@ -11,16 +11,14 @@
         left: 0
         width: 100%
 
-.search-btn
-    padding: .65em .85em
-
 .search-close
     position: absolute
-    right: 1em
+    right: 32px
 
     &,
     &:active
-        top: 1em
+        top: 50%
+        margin-top: -8px
 
 .search-area
     @extend .transition
@@ -39,11 +37,25 @@
 .search-results
     @extend .clearfix
 
-    .nav-link
-        @media $breakpoint2
-            width: 50%
-            float: left
-            font-size: $font-size-small
+    p
+        margin-bottom: 0
+
+.search-link
+    @extend .h6
+    padding: .5em 1em
+    display: block
+    margin-top: 0
+    margin-bottom: ($line-height-computed/2)
+
+    &:active
+        color: #fff
+
+    @media $breakpoint2
+        width: 50%
+        float: left
+
+        &:nth-child(odd)
+            clear: both
 
 .popover
     position: absolute