Docs: update readme test rendering to new PyPI layout, styles

docs/_readme/docutils.cfg

@@ -9,7 +9,6 @@
 [general]
 # Duplicate docutils config used by PyPA readme_renderer.
 # https://github.com/pypa/readme_renderer/blob/master/readme_renderer/rst.py
-# (This isn't exactly what's used on legacy PyPI, but it's close enough.)
 cloak_email_addresses = True
 doctitle_xform = True
 sectsubtitle_xform = True
@@ -27,5 +26,5 @@ halt_level = 2
 #       (We're not running inside readme_renderer, so *do* want to see warnings and errors.)
 # report_level = 5
 
-# Approximate PyPI's styles:
-stylesheet = docs/_readme/readme.css
+# Approximate PyPI's layout and styles:
+template = docs/_readme/template.txt

docs/_readme/readme.css

@@ -1,74 +0,0 @@
-/*
-    readme.css
-    Approximates PyPI package description rendering as of 3/2018,
-    using docutils rst2html output.
- */
-
-/* Borrow base docutils and pygments styles directly from PyPI: */
-@import url("https://pypi.python.org/static/css/docutils.css");
-@import url("https://pypi.python.org/static/css/pygments.css"); /* requires rst2html 'short' classnames */
-
-/* Subset of PyPI site styles applicable to package description: */
-HTML, BODY {
-    font-family: Arial, Verdana, Geneva, "Bitstream Vera Sans", Helvetica, sans-serif;
-    font-size: 103%;
-    color: #000;
-    background-color: #FFF;
-}
-H1, H2, H3, H4, H5 {
-    font-family: Georgia, "Bitstream Vera Serif", "New York", Palatino, serif;
-    font-weight: normal;
-    line-height: 1em;
-}
-H1 {
-    font-size: 160%;
-    color: #234764;
-    margin: 0.7em 0;
-    text-decoration: none;
-}
-H2 {
-    font-size: 140%;
-    color: #366D9C;
-    margin: 0.7em 0 0.7em 0;
-}
-IMG {
-    border: 0;
-}
-A:link {
-    color: #00A;
-}
-A:visited {
-    color: #551A8B;
-}
-P A:link, P A:visited,
-UL A:link, UL A:visited,
-OL A:link, OL A:visited {
-    text-decoration: none;
-    border-bottom: 1px dashed #ccc;
-}
-
-/* Additional styles, to account for not having all of PyPI's wrapper and navigation divs: */
-body {
-    line-height: 1.5;
-    font-size: 14.6px; /* ~computed font-size in PyPI's div#content */
-}
-h1.title {
-    text-align: left;
-}
-ul, li {
-    margin-left: 1em;
-    padding-left: 0;
-}
-pre {
-    padding: 10px;
-    font-size: 11.9px; /* ~computed font-size in PyPI's div#content pre */
-}
-
-/* Give the page a little breathing room: */
-.document {
-    max-width: 960px;
-    margin: 0 auto;
-}
-body {
-    padding: 1em;
-}

docs/_readme/template.txt

@@ -0,0 +1,51 @@
+%(head_prefix)s
+<!--
+  This approximates PyPI.org project page styling as of 8/2019
+  (and relies on their compiled CSS that was available at that time).
+
+  Base template is ${SITE_PACKAGES}/docutils/writers/html5_polyglot/template.txt
+-->
+
+<base href="https://pypi.org/">
+%(head)s
+<!-- template (stylesheet) omitted -->
+
+<link rel="stylesheet" href="/static/css/warehouse.a1809af1.css">
+<link rel="stylesheet" href="/static/css/fontawesome.4b73fd92.css">
+<link rel="stylesheet" href="/static/css/regular.19624371.css">
+<link rel="stylesheet" href="/static/css/solid.f478cfb1.css">
+<link rel="stylesheet" href="/static/css/brands.1ea560bf.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,700,700italic|Source+Code+Pro:500">
+<link rel="icon" href="/static/images/favicon.6a76275d.ico" type="image/x-icon">
+
+%(body_prefix)s
+
+<main id="#content">
+
+  <section class="banner">
+    <div class="package-header">
+    <div class="package-header__left">
+      %(body_pre_docinfo)s
+      %(docinfo)s
+    </div>
+    </div>
+  </section>
+
+  <section>
+    <div class="tabs-container">
+    <div class="vertical-tabs">
+    <div class="vertical-tabs__panel">
+    <div id="description" class="vertical-tabs__content">
+    <h2 class="page-title">Project description</h2>
+
+    <div class="project-description">
+      %(body)s
+    </div>
+    </div>
+    </div>
+    </div>
+    </div>
+  </section>
+
+</main>
+%(body_suffix)s