Style fixes; moving away from contain: content to avoid cutting off hover boxes.

Author: Ludwig Schubert

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",

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;

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 {

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>`;
     }
   }
 

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 > * {

src/components/d-hover-box.js

@@ -20,18 +20,18 @@ const T = Template('d-hover-box', `
 
 .panel {
   position: absolute;
+  font-size: 1rem;
+  line-height: 1.5em;
   top: 0;
   left: 0;
   width: 100%;
   border: 1px solid rgba(0, 0, 0, 0.1);
   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">

src/components/d-toc.js

@@ -20,7 +20,7 @@ export function renderTOC(element, headings) {
   <style>
 
   d-toc {
-    contain: content;
+    contain: layout style;
     display: block;
   }
 

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 {

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) {
 

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>';