Fixing issues Aug (#4001)

Tidied up header mainly to address #3911

Author: iadawn

_includes/header.html

@@ -17,8 +17,7 @@
     <a class="minimal-header-link" href="{{ headerUrl }}about">About WCAG {{ headerLabel }}</a>
     <div class="minimal-header-logo">
       <a href="http://w3.org/" aria-label="W3C">
-        <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 91.968 44"
-          style="margin: 0.75em 0 0.75em 0.5em">
+        <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 91.968 44">
           <g fill-rule="evenodd" fill="none">
             <path fill="#015a9c" d="M-.231-.21h92.917v44.659H-.23z" />
             <g fill-rule="nonzero" fill="#fff">
@@ -29,8 +28,7 @@
         </svg>
       </a>
       <a href="http://w3.org/WAI/" aria-label="Web Accessibility Initiative">
-        <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 162.5 45.9"
-          style="margin: 0.75em 0 0.75em 0.5em">
+        <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 162.5 45.9">
           <g fill="none" fill-rule="evenodd">
             <path d="M0 0h162.5v45.9H0z" fill="#015a9c" />
             <path d="M1.2 24.5h160" stroke="#eed009" stroke-linecap="square" stroke-width="2" />

css/base.css

@@ -3,11 +3,15 @@ main {
 }
 
 .nav-container {
-	background-image: linear-gradient(#d0e1f1 0, #d0e1f1 50px, #fff 50px);
+}
+
+.nav {
+	overflow: inherit;
 }
 
 .nav__item a {
 	display: inline-block;
+	white-space: inherit;
 }
 
 .nav__item a svg {
@@ -162,6 +166,9 @@ padding: 1.75em 0 0 0;
 .minimal-header-logo img {
 margin: 1px 0 1px 0;
 }
+.minimal-header-logo svg {
+margin: 0.75em 0 0.75em 0.5em;
+}
 
 #site-header.minimal-header {
 margin: 1.2em 0;
@@ -282,13 +289,13 @@ align-items: center;
 .nav .standalone-resource-pager a,
 .nav .standalone-resource-pager span {
 margin-left: 0;
-margin-right: 1.5em;
+margin-right: 0;
 }
 
 .pager-icon {
 vertical-align: middle;
 padding: 0 0.15em 0.15em 0.15em;
-width: 1.65em;
+width: 1em;
 height: 2em;
 fill: #005A6A; /* when these are used as actual SVGs */
 }
@@ -393,4 +400,46 @@ margin-right:.8em;
 }
 #brief dl {
   margin-left: 2em;
+}
+
+@media (max-width: 35em) {
+	.nav-container {
+		padding: 0;
+	}
+	.nav a {
+		display: inline-block;
+		width: calc(100% - 2em);
+	}
+	@supports (display:gred) {
+		#site-header {
+			padding-left: 0;
+		}
+	}
+	.minimal-header {
+		display: block;
+	}
+	#site-header.minimal-header .minimal-header-name, #site-header.minimal-header .minimal-header-subtitle, #site-header.minimal-header .minimal-header-link {
+		display: block;
+	}
+	#site-header.minimal-header .minimal-header-subtitle {
+		display: none;
+	}
+	.minimal-header-name {
+		font-size: 160%;
+		margin-bottom: 0.5em;
+	}
+	.minimal-header-link {
+		margin-left: 0;
+		padding-left: 0;
+		border: none;
+	}
+	.minimal-header-logo {
+		display: block;
+	}
+	.minimal-header-logo > a {
+		display: inline-block;
+	}
+	.minimal-header-logo svg {
+		margin: 1em 0 0 0;
+	}
 }