search and navigation fixes

_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>
 

_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
             });
 

_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
+    border-color: darken(#d9edf7, 5%)

_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
@@ -148,3 +148,4 @@ a.close,
 
     &:hover
         background: $link-color-hover
+        color: #fff

_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

_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
 /////////////////////////////////////

_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
+    p
-        @media $breakpoint2
+        margin-bottom: 0
-            width: 50%
+
-            float: left
+.search-link
-            font-size: $font-size-small
+    @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