tweaks

examples/article.html

@@ -60,16 +60,6 @@
   <a class="marker" href="#section-1.1" id="section-1.1"><span>1.1</span></a>
   <h3>Citations</h3>
   <p>We can<d-cite key="mercier2011humans"></d-cite> also cite <d-cite key="gregor2015draw,mercier2011humans"></d-cite> external publications. <d-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></d-cite>. We should also be testing footnotes<d-footnote>This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote.</d-footnote>. There are multiple footnotes, and they appear in the appendix<d-footnote>Given I have coded them right. Also, here's math in a footnote: <d-math>c = \sum_0^i{x}</d-math>. Also, a citation. Box-ception<d-cite key='gregor2015draw'></d-cite>!</d-footnote> as well.</p>
-  <table>
-    <thead>
-      <tr><th>First</th><th>Second</th><th>Third</th></tr>
-    </thead>
-    <tbody>
-      <tr><td>23</td><td>654</td><td>23</td></tr>
-      <tr><td>14</td><td>54</td><td>34</td></tr>
-      <tr><td>234</td><td>54</td><td>23</td></tr>
-    </tbody>
-  </table>
   <a class="marker" href="#section-2" id="section-2"><span>2</span></a>
   <h2>Displaying code snippets</h2>
   <p>Some inline javascript:<d-code language="javascript">var x = 25;</d-code>. And here's a javascript code block.</p>
@@ -88,6 +78,17 @@
           print(a, end=' ')
           a, b = b, a+b
   </d-code>
+  <p>And a table</p>
+  <table>
+      <thead>
+        <tr><th>First</th><th>Second</th><th>Third</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>23</td><td>654</td><td>23</td></tr>
+        <tr><td>14</td><td>54</td><td>34</td></tr>
+        <tr><td>234</td><td>54</td><td>23</td></tr>
+      </tbody>
+    </table>
   <d-figure id="last-figure"></d-figure>
   <script>
     const figure = document.querySelector("d-figure#last-figure");

src/components/d-abstract.js

@@ -5,7 +5,7 @@ const T = Template('d-abstract', `
 <style>
   :host {
     display: block;
-    font-size: 1.2rem;
+    font-size: 1.15rem;
     line-height: 1.8em;
     padding-bottom: 1.5em;
     color: rgba(0, 0, 0, 0.8);

src/components/d-article.js

@@ -5,8 +5,7 @@ export const style =`
 d-article {
   contain: content;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
-  padding-top: 1.5rem;
-  line-height: 1.7rem;
+  padding-top: 2rem;
   color: rgba(0, 0, 0, 0.8);
 }
 
@@ -23,6 +22,7 @@ d-article > * {
 @media(min-width: 1024px) {
   d-article {
     font-size: 0.9rem;
+    line-height: 1.9em;
   }
 }
 
@@ -35,8 +35,6 @@ d-article .marker {
   border: none;
   counter-reset: section;
   grid-column: kicker;
-  align-items: center;
-  display: flex;
   line-height: 1.7em;
 }
 
@@ -45,8 +43,10 @@ d-article .marker:hover {
 }
 
 d-article .marker span {
-  padding: 0 3px;
+  padding: 0 3px 4px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  position: relative;
+  top: 4px;
 }
 
 d-article .marker:hover span {
@@ -59,6 +59,7 @@ d-article h2 {
   font-weight: 700;
   font-size: 24px;
   line-height: 1.25em;
+  margin: 0 0 1rem 0;
 }
 
 @media(min-width: 1024px) {

src/components/d-byline.js

@@ -3,7 +3,7 @@ d-byline {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   contain: content;
   font-size: 0.7rem;
-  line-height: 1.5rem;
+  line-height: 2em;
   padding: 1.5rem 0;
 }
 

src/components/d-title.js

@@ -9,7 +9,7 @@ const T = Template('d-title', `
   }
   ::slotted(h1) {
     grid-column: text-start / page-end;
-    font-size: 40px;
+    font-size: 46px;
     font-weight: 700;
     line-height: 1.3em;
     margin: 0 0 10px;

src/styles/styles-layout.css

@@ -50,7 +50,7 @@ distill-footer {
   }
 }
 
-@media(min-width: 1200px) {
+@media(min-width: 1280px) {
   d-title,
   d-abstract,
   d-article,