From 3a643ab7adea6a8197b3f7c79c4715232991968c Mon Sep 17 00:00:00 2001
From: Ludwig Schubert <ludwigschubert@google.com>
Date: Tue, 14 Nov 2017 12:52:34 -0800
Subject: [PATCH 1/4] Style fixes; moving away from contain: content to avoid
 cutting off hover boxes.

---
 package.json                               |  2 +-
 src/components/d-appendix.js               |  3 +--
 src/components/d-citation-list.js          |  3 +--
 src/components/d-cite.js                   | 19 ++++++++++++++-
 src/components/d-footnote-list.js          |  3 +--
 src/components/d-hover-box.js              |  4 ++--
 src/components/d-toc.js                    |  2 +-
 src/distill-components/distill-appendix.js |  3 +--
 src/distill-components/distill-header.js   |  8 ++-----
 src/helpers/citation.js                    |  2 +-
 src/styles/d-article.css                   | 28 ++++++++++++++++------
 src/styles/d-byline.css                    |  3 ++-
 src/styles/d-title.css                     |  6 ++---
 src/styles/styles-base.css                 |  3 ++-
 14 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index a7fdd35..f6264fa 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "url": "https://github.com/distillpub/distill-template/issues"
   },
   "scripts": {
-    "start": "rollup -c rollup.config.dev.js -w",
+    "dev": "rollup -c rollup.config.dev.js -w",
     "serve": "python3 -m http.server --bind 127.0.0.1 8888",
     "test": "mocha",
     "lint": "eslint",
diff --git a/src/components/d-appendix.js b/src/components/d-appendix.js
index 3056550..475f444 100644
--- a/src/components/d-appendix.js
+++ b/src/components/d-appendix.js
@@ -1,11 +1,10 @@
 import { Template } from '../mixins/template';
-import { body } from '../helpers/layout';
 
 const T = Template('d-appendix', `
 <style>
 
 d-appendix {
-  contain: content;
+  contain: layout style;
   font-size: 0.8em;
   line-height: 1.7em;
   margin-top: 60px;
diff --git a/src/components/d-citation-list.js b/src/components/d-citation-list.js
index 124e05b..7243255 100644
--- a/src/components/d-citation-list.js
+++ b/src/components/d-citation-list.js
@@ -2,8 +2,7 @@ import { bibliography_cite } from '../helpers/citation';
 
 const styles = `
 d-citation-list {
-  contain: content;
-  overflow: hidden;
+  contain: layout style;
 }
 
 d-citation-list .references {
diff --git a/src/components/d-cite.js b/src/components/d-cite.js
index 78f1128..332ee3d 100644
--- a/src/components/d-cite.js
+++ b/src/components/d-cite.js
@@ -38,6 +38,21 @@ d-hover-box {
   margin-top: 1.9em;
 }
 
+ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+ul li {
+  padding: 15px 10px 15px 10px;
+  border-bottom: 1px solid rgba(0,0,0,0.1)
+}
+
+ul li:last-of-type {
+  border-bottom: none;
+}
+
 </style>
 
 <d-hover-box id="hover-box"></d-hover-box>
@@ -106,7 +121,9 @@ export class Cite extends T(HTMLElement) {
 
   set entries(entries) {
     if (this.hoverBox) {
-      this.hoverBox.innerHTML = entries.map(hover_cite).join('<br><br>');
+      this.hoverBox.innerHTML = `<ul>
+      ${entries.map(hover_cite).map(html => `<li>${html}</li>`).join('\n')}
+      </ul>`;
     }
   }
 
diff --git a/src/components/d-footnote-list.js b/src/components/d-footnote-list.js
index fd59340..488300c 100644
--- a/src/components/d-footnote-list.js
+++ b/src/components/d-footnote-list.js
@@ -4,8 +4,7 @@ const T = Template('d-footnote-list', `
 <style>
 
 d-footnote-list {
-  contain: content;
-  overflow: hidden;
+  contain: layout style;
 }
 
 d-footnote-list > * {
diff --git a/src/components/d-hover-box.js b/src/components/d-hover-box.js
index 99ec733..2d15e8c 100644
--- a/src/components/d-hover-box.js
+++ b/src/components/d-hover-box.js
@@ -20,6 +20,8 @@ const T = Template('d-hover-box', `
 
 .panel {
   position: absolute;
+  font-size: 1rem;
+  line-height: 1.5em;
   top: 0;
   left: 0;
   width: 100%;
@@ -27,11 +29,9 @@ const T = Template('d-hover-box', `
   background-color: rgb(250, 250, 250);
   box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
-  padding: 10px;
   box-sizing: border-box;
 }
 
-
 </style>
 
 <div class="container">
diff --git a/src/components/d-toc.js b/src/components/d-toc.js
index 8648e06..c892fe8 100644
--- a/src/components/d-toc.js
+++ b/src/components/d-toc.js
@@ -20,7 +20,7 @@ export function renderTOC(element, headings) {
   <style>
 
   d-toc {
-    contain: content;
+    contain: layout style;
     display: block;
   }
 
diff --git a/src/distill-components/distill-appendix.js b/src/distill-components/distill-appendix.js
index f219a1b..dfcc827 100644
--- a/src/distill-components/distill-appendix.js
+++ b/src/distill-components/distill-appendix.js
@@ -3,8 +3,7 @@ import { serializeFrontmatterToBibtex } from '../helpers/bibtex';
 const styles = `
 <style>
   distill-appendix {
-    contain: content;
-    overflow: hidden;
+    contain: layout style;
   }
 
   distill-appendix .citation {
diff --git a/src/distill-components/distill-header.js b/src/distill-components/distill-header.js
index 8e4cb2a..a02076b 100644
--- a/src/distill-components/distill-header.js
+++ b/src/distill-components/distill-header.js
@@ -72,18 +72,14 @@ distill-header .nav a {
     ${logo}
     Distill
   </a>
-  <div class="nav">
+  <nav class="nav">
     <a href="/about/">About</a>
     <a href="/prize/">Prize</a>
     <a href="/journal/">Submit</a>
-  </div>
+  </nav>
 </div>
 `, false);
 
-// <div class="nav">
-//   <a href="https://github.com/distillpub">GitHub</a>
-//   <!-- https://twitter.com/distillpub -->
-// </div>
 
 export class DistillHeader extends T(HTMLElement) {
 
diff --git a/src/helpers/citation.js b/src/helpers/citation.js
index 3d1ff2f..1f98bf7 100644
--- a/src/helpers/citation.js
+++ b/src/helpers/citation.js
@@ -146,7 +146,7 @@ export function bibliography_cite(ent, fancy){
 export function hover_cite(ent){
   if (ent){
     var cite = '';
-    cite += '<b>' + ent.title + '</b>';
+    cite += '<strong>' + ent.title + '</strong>';
     cite += link_string(ent);
     cite += '<br>';
 
diff --git a/src/styles/d-article.css b/src/styles/d-article.css
index 79707c9..c372ba1 100644
--- a/src/styles/d-article.css
+++ b/src/styles/d-article.css
@@ -1,9 +1,9 @@
 d-article {
-  contain: content;
+  contain: layout style;
+  overflow-x: hidden; // allow overflow y for e.g. hover boxes
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 2rem;
   color: rgba(0, 0, 0, 0.8);
-  overflow: hidden;
 }
 
 d-article > * {
@@ -169,14 +169,29 @@ d-article span.equation-mimic {
 d-article > d-code,
 d-article section > d-code  {
   display: block;
-  overflow-x: scroll;
-
 }
 
 d-article > d-math[block],
 d-article section > d-math[block]  {
   display: block;
-  overflow-x: scroll;
+}
+
+@media (max-width: 768px) {
+  d-article > d-code,
+  d-article section > d-code,
+  d-article > d-math[block],
+  d-article section > d-math[block] {
+      overflow-x: scroll;
+      -ms-overflow-style: none;  // IE 10+
+      overflow: -moz-scrollbars-none;  // Firefox
+  }
+
+  d-article > d-code::-webkit-scrollbar,
+  d-article section > d-code::-webkit-scrollbar,
+  d-article > d-math[block]::-webkit-scrollbar,
+  d-article section > d-math[block]::-webkit-scrollbar {
+    display: none;  // Safari and Chrome
+  }
 }
 
 d-article .citation {
@@ -190,8 +205,7 @@ d-include {
 }
 
 d-figure {
-  contain: content;
-  overflow: hidden;
+  contain: layout style;
 }
 
 /* KaTeX */
diff --git a/src/styles/d-byline.css b/src/styles/d-byline.css
index 1596fa7..2f79d97 100644
--- a/src/styles/d-byline.css
+++ b/src/styles/d-byline.css
@@ -1,6 +1,7 @@
 d-byline {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
   contain: content;
+  overflow: hidden;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
   font-size: 0.8rem;
   line-height: 1.8em;
   padding: 1.5rem 0;
diff --git a/src/styles/d-title.css b/src/styles/d-title.css
index 598c960..894687a 100644
--- a/src/styles/d-title.css
+++ b/src/styles/d-title.css
@@ -1,7 +1,7 @@
 d-title {
   padding: 2rem 0 1.5rem;
-  contain: content;
-  overflow: hidden;
+  contain: layout style;
+  overflow-x: hidden;
 }
 
 @media(min-width: 768px) {
@@ -52,4 +52,4 @@ d-title .status span {
   border-bottom: 1px solid #80cbc4;
   font-size: 11px;
   text-transform: uppercase;
-}
\ No newline at end of file
+}
diff --git a/src/styles/styles-base.css b/src/styles/styles-base.css
index f34712d..73ac5e2 100644
--- a/src/styles/styles-base.css
+++ b/src/styles/styles-base.css
@@ -131,7 +131,8 @@ figcaption a {
   color: rgba(0, 0, 0, 0.6);
 }
 
-figcaption b {
+figcaption b,
+figcaption strong, {
   font-weight: 600;
   color: rgba(0, 0, 0, 1.0);
 }

From 010eed6280856208a37af617eaf467f429d620f2 Mon Sep 17 00:00:00 2001
From: Ludwig Schubert <ludwigschubert@google.com>
Date: Tue, 14 Nov 2017 12:52:42 -0800
Subject: [PATCH 2/4] 2.2.11

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 85f4181..d8c7599 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.10",
+  "version": "2.2.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index f6264fa..24079e8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.10",
+  "version": "2.2.11",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.v2.js",
   "bin": {

From b25fd66fd7d93824e21f02b086e3815439a5b472 Mon Sep 17 00:00:00 2001
From: Ludwig Schubert <ludwigschubert@users.noreply.github.com>
Date: Tue, 14 Nov 2017 22:52:36 -0800
Subject: [PATCH 3/4] Remove stray comment in CSS

---
 src/styles/d-article.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/d-article.css b/src/styles/d-article.css
index c372ba1..9f76b95 100644
--- a/src/styles/d-article.css
+++ b/src/styles/d-article.css
@@ -1,6 +1,6 @@
 d-article {
   contain: layout style;
-  overflow-x: hidden; // allow overflow y for e.g. hover boxes
+  overflow-x: hidden;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 2rem;
   color: rgba(0, 0, 0, 0.8);

From be585691c53c0f06db2b6dd0f218905825bc57ae Mon Sep 17 00:00:00 2001
From: Ludwig Schubert <ludwigschubert@google.com>
Date: Wed, 15 Nov 2017 11:50:01 -0800
Subject: [PATCH 4/4] 2.2.12

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d8c7599..e78f50b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.11",
+  "version": "2.2.12",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 24079e8..c5777b7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.11",
+  "version": "2.2.12",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.v2.js",
   "bin": {