Dev edition: adjust styling for smaller screens

Fixes whatwg#3284.

Author: annevk

dev/styles.css

@@ -63,7 +63,7 @@ body {
   line-height: 1.45em;
   font-family: "Droid Serif", Georgia, serif;
   color: #222;
-  width: 760px;
+  max-width: 760px;
   margin: 4em auto;
   padding: 0 1em;
 }
@@ -199,7 +199,7 @@ p {
 
 p, ul, ol, dl {
   margin-bottom: 1em;
-  width: 520px;
+  max-width: 520px;
 }
 
 hr {
@@ -306,7 +306,7 @@ var > var::after {
   (http://developers.whatwg.org/introduction.html#typographic-conventions)
 */
 .note, .example, .XXX, .warning, pre {
-  width: 580px;
+  max-width: 580px;
 }
 
 .note {
@@ -353,11 +353,14 @@ var > var::after {
 /* Header */
 
 header#head {
-  position: relative;
+  display: flex;
+  --logo-width: 100px;
+  --logo-margin: 20px;
+  margin-left: calc(-1 * (var(--logo-width) + var(--logo-margin)));
 }
 
 header#head hgroup {
-  width: 580px;
+  flex: 1;
 }
 
 header#head h1 {
@@ -390,18 +393,11 @@ header#head h2 {
 }
 
 header#head .logo {
-  position: absolute;
-  left: -120px;
+  margin-right: var(--logo-margin);
 }
 
 /* Search bar */
 
-#search {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
 #search, #search input {
   width: 150px;
 }
@@ -521,6 +517,12 @@ html:not(.index) ol.toc ol {
 
 /* RESPONSIVE STYLES */
 
+@media screen and (max-width: 1000px) {
+  header#head {
+    margin-left: 0;
+  }
+}
+
 @media screen and (max-width: 767px) {
   body {
     font-size: 110%;
@@ -532,6 +534,7 @@ html:not(.index) ol.toc ol {
 
   header#head {
     text-align: center;
+    display: block;
   }
 
   header#head .logo {
@@ -550,7 +553,7 @@ html:not(.index) ol.toc ol {
   }
 
   .note, .example, .XXX, .warning, pre {
-    width: 560px;
+    max-width: 560px;
   }
 
   pre {
@@ -565,9 +568,14 @@ html:not(.index) ol.toc ol {
     margin-left: 0.5em;
   }
 
+  h2 .secno {
+    position: static;
+    display: inline;
+  }
+
  .status {
-    left: auto;
-    right: -8.9em;
+    position: static;
+    margin: 0;
   }
 
   /* Search */