Dev edition: add introduction, plus various tweaks

* Adds an "About this specification" introduction, like the previous version had. Closes whatwg#2780. * Fixes the header logo positioning; the recent introduction of the search box in cfb8b9e made the title spill onto multiple lines, causing the logo to no longer be centered. * Changes the <title> to "HTML Standard, Developer's Edition" to distinguish it better from the full standard. whatwg/wattsi#50 remains open for making the <title> more useful in general. * Adds the full standard's favicon to the developer's edition too. * Removes the useless Google fonts download, as we ended up deciding to serve Droid Serif ourselves.
alice · Jan 7, 2019 · d913298 · d913298
1 parent a5ae05d
commit d913298
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/dev/styles.css b/dev/styles.css
@@ -74,7 +74,7 @@ h1 {
   font-size: 300%;
 }
 
-h2:not(#dev-edition-h2) {
+h2:not(#dev-edition-h2):not(#about-dev-edition) {
   font-size: 160%;
   text-transform: uppercase;
   letter-spacing: 0.2em;
@@ -385,7 +385,6 @@ header#head h2 {
 header#head .logo {
   position: absolute;
   left: -120px;
-  top: -20px;
 }
 
 /* Search bar */
@@ -506,6 +505,13 @@ html:not(.index) ol.toc ol {
   margin: 0;
 }
 
+/* About */
+
+#about-dev-edition {
+  margin: 1.5em 0 1em 0;
+  font-size: 34px;
+}
+
 /* RESPONSIVE STYLES */
 
 @media screen and (max-width: 767px) {
@@ -577,7 +583,7 @@ ul.domTree, ul.domTree ul {
 }
 
 ul.domTree li {
-  padding: 0; 
+  padding: 0;
   margin: 0;
   list-style: none;
   position: relative;

diff --git a/source b/source
@@ -25,17 +25,17 @@
  <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <title>HTML Standard</title>
+  <title w-nodev>HTML Standard</title>
+  <title w-nohtml>HTML Standard, Developer's Edition</title>
   <meta name="theme-color" content="#3c790a">
   <link w-nodev rel="stylesheet" href="https://resources.whatwg.org/standard.css">
-  <link w-nohtml rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold">
   <link w-nohtml rel="stylesheet" href="styles.css">
+  <link rel="icon" href="https://resources.whatwg.org/logo.svg">
   <script>
    function toggleStatus(div) {
      div.parentNode.classList.toggle('wrapped');
    }
   </script>
-  <link w-nodev rel="icon" href="https://resources.whatwg.org/logo.svg">
   <style w-nodev>
    [hidden] { display: none; }
 
@@ -294,6 +294,28 @@
   </pre>
   -->
 
+  <div w-nohtml>
+
+  <h2 class="no-num no-toc" id="about-dev-edition">About this specification</h2>
+
+  <p>This specification is like no other — it has been processed with <em>you</em>, the humble web
+  developer, in mind.</p>
+
+  <p>The focus of this specification is readability and ease of access. Unlike the <a
+  href="/multipage/">full HTML Standard</a>, this "developer's edition" removes information that
+  only browser vendors need know. It is automatically produced from the full specification by our
+  build tooling, and thus always in sync with the latest developments in HTML.</p>
+
+  <p>To read about its conception, construction, and future, read the <a
+  href="http://web.archive.org/web/20150220020906/http://archive.germanforblack.com:80/articles/html5-for-web-developers">original
+  press release</a>, and the <a href="https://blog.whatwg.org/developers-edition-comeback">blog post
+  about its relaunch</a>.</p>
+
+  <p>Finally, feel free to <a href="https://github.com/whatwg/html/labels/dev%20edition">contribute
+  on GitHub</a> to make this edition better for everyone!</p>
+
+  </div>
+
   <h2 split-filename="introduction" id="introduction">Introduction</h2>
 
   <div w-nodev>