From 548bf0198e74a69e286b55f7a039bc543a3e379b Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Wed, 9 May 2018 17:23:39 -0400
Subject: [PATCH] Use refactored CSS

Assumes the filenames in https://github.com/whatwg/whatwg.org/pull/200
---
 .../boilerplate/whatwg/defaults-RD.include    |   1 +
 bikeshed/boilerplate/whatwg/header-RD.include | 105 +-----------------
 bikeshed/boilerplate/whatwg/header.include    |   2 +-
 3 files changed, 4 insertions(+), 104 deletions(-)

diff --git a/bikeshed/boilerplate/whatwg/defaults-RD.include b/bikeshed/boilerplate/whatwg/defaults-RD.include
index a672d2d27b..54d69343de 100644
--- a/bikeshed/boilerplate/whatwg/defaults-RD.include
+++ b/bikeshed/boilerplate/whatwg/defaults-RD.include
@@ -4,6 +4,7 @@
   "No Editor": "true",
   "Boilerplate": "omit style-md-lists, omit style-autolinks, omit style-selflinks, omit style-counters, omit style-syntax-highlighting, omit feedback-header, omit conformance, omit issues-index",
   "Complain About": "missing-example-ids yes, accidental-2119 yes",
+  "Informative Classes": "domintro",
   "Metadata Include": "Translations no",
   "Slim Build Artifact": "true"
 }
diff --git a/bikeshed/boilerplate/whatwg/header-RD.include b/bikeshed/boilerplate/whatwg/header-RD.include
index 895d74def8..d8edf3f444 100644
--- a/bikeshed/boilerplate/whatwg/header-RD.include
+++ b/bikeshed/boilerplate/whatwg/header-RD.include
@@ -4,111 +4,10 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="theme-color" content="#3c790a">
 <title>[TITLE]</title>
+<link href="https://resources.whatwg.org/standard-common.css" rel="stylesheet">
+<link href="https://resources.whatwg.org/review-draft.css" rel="stylesheet">
 <link href="[LOGO]" rel="icon">
 
-<style>
- /* TODO move this all to an external file, and maybe refactor common pieces with existing files */
- .head .logo img {
-  position: absolute;
-  top: 1em;
-  right: 1em;
-  border: none;
- }
-
- .toc, .toc li {
-  list-style: none;
- }
-
- pre.idl::before { content: 'IDL:'; }
- pre.asn::before { content: 'ASN:'; }
- pre.css::before { content: 'CSS:'; }
- dl.domintro::before { content: 'For web developers (non-normative):'; }
- .note::before { content: 'Note:'; }
- .warning::before { content: 'Warning:'; }
- .example::before { content: 'Example:'; }
-
- pre.idl, pre.asn, pre.css, dl.domintro, .note, .warning, .example {
-  border: 1px solid black;
- }
-
- pre.idl::before, pre.asn::before, pre.css::before, dl.domintro::before, .note::before, .warning::before, .example::before {
-  display: block; font-weight: bold;
- }
-
- body {
-  margin-bottom: 3em;
- }
-
-  /* Floating-but-collapsible annoying warning for snapshots */
-  details.annoying-warning {
-    font-family: sans-serif;
-    background-color: #920800;
-    background-image: linear-gradient(transparent 40%, rgba(255, 255, 255, 0.2));
-    border: solid rgba(0, 0, 0, 0.4);
-    border-radius: 3px;
-    border-width: 1px 1px 0 1px;
-    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
-    color: rgba(255, 255, 255, 0.95);
-    opacity: .95;
-    position: fixed;
-    left: 5%;
-    margin: 0 auto;
-    right: 5%;
-    z-index: 10;
-  }
-
-  details.annoying-warning[open] {
-    top: 10%;
-    top: calc(5vw + 5vh);
-    max-width: 1024px;
-    outline: solid 10000px rgba(255, 255, 255, 0.6);
-  }
-
-  details.annoying-warning:not([open]) {
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-radius: 0;
-  }
-
-  details.annoying-warning > summary {
-    display: list-item; /* polyfill */
-    font-size: 0.875em;
-    font-weight: bold;
-    letter-spacing: 0.02em;
-    padding: 10px 5px;
-    text-align: center;
-    text-transform: uppercase;
-    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.85);
-    cursor: default;
-  }
-
-  details.annoying-warning > summary::after {
-    content: " Expand";
-    position: absolute;
-    top: 0;
-    right: 5px;
-    font-size: smaller;
-    font-weight: bold;
-  }
-
-  details.annoying-warning[open] > summary::after {
-    content: " Collapse";
-  }
-
-  details.annoying-warning p {
-    padding: 0 7.5% 1em;
-    line-height: 1.4;
-    margin: 0;
-    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.85);
-  }
-
-  details.annoying-warning a {
-    color: white;
-    text-decoration: underline;
-  }
-</style>
-
 <body class="h-entry status-[STATUS]">
 <div class="head">
   <p data-fill-with="logo"></p>
diff --git a/bikeshed/boilerplate/whatwg/header.include b/bikeshed/boilerplate/whatwg/header.include
index 263aae7ef0..94ef7e24e5 100644
--- a/bikeshed/boilerplate/whatwg/header.include
+++ b/bikeshed/boilerplate/whatwg/header.include
@@ -4,8 +4,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="theme-color" content="#3c790a">
 <title>[TITLE]</title>
+<link href="https://resources.whatwg.org/standard-common.css" rel="stylesheet">
 <link href="https://resources.whatwg.org/standard.css" rel="stylesheet">
-<link href="https://resources.whatwg.org/bikeshed.css" rel="stylesheet">
 <link href="[LOGO]" rel="icon">
 <script src=https://resources.whatwg.org/file-issue.js async></script>
 <script src=https://resources.whatwg.org/commit-snapshot-shortcut-key.js async></script>