Merge pull request #107 from jasalt/master

Improve mobile header

Author: Chemaclass

sass/_header.scss

@@ -11,7 +11,11 @@
     .site-header__container {
         display: flex;
         align-items: center;
-        padding: .2em 2em;
+		padding: .2em 2em;
+
+		@include tablet {
+			padding: .2em 1em;
+		}
 
         .site-header__mobile-menu {
             @include desktop {

sass/_search.scss

@@ -1,12 +1,17 @@
 .site-header__search {
   #search {
-    background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -10 184 130'><g><path d='M22.48,0h77.92c6.15,0,11.75,2.53,15.82,6.6c4.11,4.11,6.67,9.8,6.67,16.06v61.96c0,6.26-2.55,11.94-6.67,16.06 c-4.07,4.07-9.67,6.6-15.82,6.6H22.48c-6.15,0-11.75-2.53-15.82-6.6C2.55,96.56,0,90.88,0,84.62V22.65 c0-6.26,2.55-11.95,6.66-16.06C10.73,2.53,16.33,0,22.48,0L22.48,0z M44.29,53.94l11.1-0.7c0.24,1.8,0.73,3.17,1.47,4.1 c1.21,1.52,2.92,2.29,5.16,2.29c1.66,0,2.95-0.39,3.85-1.17c0.91-0.78,1.36-1.69,1.36-2.72c0-0.98-0.42-1.86-1.28-2.63 c-0.85-0.77-2.84-1.5-5.97-2.19c-5.13-1.14-8.77-2.68-10.96-4.59c-2.2-1.9-3.3-4.33-3.3-7.29c0-1.94,0.56-3.77,1.69-5.5 c1.13-1.74,2.82-3.09,5.08-4.08c2.26-0.99,5.36-1.48,9.3-1.48c4.84,0,8.52,0.9,11.05,2.7c2.54,1.8,4.04,4.66,4.53,8.59l-10.99,0.65 c-0.29-1.72-0.91-2.97-1.84-3.74c-0.94-0.78-2.24-1.17-3.88-1.17c-1.36,0-2.39,0.29-3.07,0.86c-0.69,0.57-1.03,1.28-1.03,2.1 c0,0.6,0.28,1.14,0.84,1.62c0.54,0.5,1.84,0.96,3.9,1.39c5.11,1.1,8.76,2.22,10.97,3.35c2.21,1.13,3.82,2.52,4.83,4.19 c1,1.66,1.51,3.53,1.51,5.6c0,2.42-0.67,4.66-2.01,6.71c-1.35,2.04-3.21,3.6-5.63,4.66c-2.4,1.06-5.43,1.59-9.1,1.59 c-6.43,0-10.89-1.24-13.36-3.72C46.02,60.9,44.62,57.76,44.29,53.94L44.29,53.94z M4.54,76.22c0.79,3.18,2.34,6.02,4.44,8.29 c3.09,3.33,7.35,5.4,12.05,5.4h80.83c0.19,0,0.38,0,0.57-0.01l1.15-0.08c4.01-0.44,7.62-2.39,10.33-5.31 c2.1-2.26,3.65-5.1,4.44-8.28V22.65c0-4.85-2-9.28-5.21-12.49c-3.26-3.26-7.76-5.28-12.73-5.28H22.48c-4.97,0-9.48,2.02-12.73,5.28 c-3.22,3.22-5.21,7.64-5.21,12.49V76.22L4.54,76.22z'/></g></svg>");
-    background-repeat: no-repeat;
-    border-color: transparent;
-    border-radius: 2px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    padding-left: 40px;
+	border-color: transparent;
+	border-radius: 2px;
+	padding-top: 5px;
+	padding-bottom: 5px;
+	margin-left: 10px;
+
+	// Hide "s" icon on small screens to avoid search-box overflow
+	@media (min-width: 400px) {
+	  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -10 184 130'><g><path d='M22.48,0h77.92c6.15,0,11.75,2.53,15.82,6.6c4.11,4.11,6.67,9.8,6.67,16.06v61.96c0,6.26-2.55,11.94-6.67,16.06 c-4.07,4.07-9.67,6.6-15.82,6.6H22.48c-6.15,0-11.75-2.53-15.82-6.6C2.55,96.56,0,90.88,0,84.62V22.65 c0-6.26,2.55-11.95,6.66-16.06C10.73,2.53,16.33,0,22.48,0L22.48,0z M44.29,53.94l11.1-0.7c0.24,1.8,0.73,3.17,1.47,4.1 c1.21,1.52,2.92,2.29,5.16,2.29c1.66,0,2.95-0.39,3.85-1.17c0.91-0.78,1.36-1.69,1.36-2.72c0-0.98-0.42-1.86-1.28-2.63 c-0.85-0.77-2.84-1.5-5.97-2.19c-5.13-1.14-8.77-2.68-10.96-4.59c-2.2-1.9-3.3-4.33-3.3-7.29c0-1.94,0.56-3.77,1.69-5.5 c1.13-1.74,2.82-3.09,5.08-4.08c2.26-0.99,5.36-1.48,9.3-1.48c4.84,0,8.52,0.9,11.05,2.7c2.54,1.8,4.04,4.66,4.53,8.59l-10.99,0.65 c-0.29-1.72-0.91-2.97-1.84-3.74c-0.94-0.78-2.24-1.17-3.88-1.17c-1.36,0-2.39,0.29-3.07,0.86c-0.69,0.57-1.03,1.28-1.03,2.1 c0,0.6,0.28,1.14,0.84,1.62c0.54,0.5,1.84,0.96,3.9,1.39c5.11,1.1,8.76,2.22,10.97,3.35c2.21,1.13,3.82,2.52,4.83,4.19 c1,1.66,1.51,3.53,1.51,5.6c0,2.42-0.67,4.66-2.01,6.71c-1.35,2.04-3.21,3.6-5.63,4.66c-2.4,1.06-5.43,1.59-9.1,1.59 c-6.43,0-10.89-1.24-13.36-3.72C46.02,60.9,44.62,57.76,44.29,53.94L44.29,53.94z M4.54,76.22c0.79,3.18,2.34,6.02,4.44,8.29 c3.09,3.33,7.35,5.4,12.05,5.4h80.83c0.19,0,0.38,0,0.57-0.01l1.15-0.08c4.01-0.44,7.62-2.39,10.33-5.31 c2.1-2.26,3.65-5.1,4.44-8.28V22.65c0-4.85-2-9.28-5.21-12.49c-3.26-3.26-7.76-5.28-12.73-5.28H22.48c-4.97,0-9.48,2.02-12.73,5.28 c-3.22,3.22-5.21,7.64-5.21,12.49V76.22L4.54,76.22z'/></g></svg>");
+	  background-repeat: no-repeat;
+	  padding-left: 40px;
+	}
   }
 
   li.selected, li:hover {