Some responsive positions

src/components/d-abstract.js

@@ -7,7 +7,7 @@ const T = Template('d-abstract', `
     display: block;
     font-size: 1.2rem;
     line-height: 1.8em;
-    margin-bottom: 1.5em;
+    padding-bottom: 1.5em;
     color: rgba(0, 0, 0, 0.8);
     font-weight: 300;
     font-family: "Merriweather", georgia, serif;
@@ -16,7 +16,7 @@ const T = Template('d-abstract', `
   ::slotted(p) {
     margin-top: 0;
     margin-bottom: 0;
-    grid-column: text-start / span 9;
+    grid-column: text-start / middle-end;
   }
   ${body('d-abstract')}
 </style>

src/components/d-article.js

@@ -55,7 +55,7 @@ d-article .marker:hover span {
 }
 
 d-article h2 {
-  grid-column-end: span 10;
+  grid-column-end: page-end;
   font-weight: 700;
   font-size: 24px;
   line-height: 1.25em;

src/components/d-byline.js

@@ -8,8 +8,8 @@ d-byline {
 }
 
 d-byline .byline {
-  grid-template-columns: repeat(5, 1fr);
-  grid-column: text-start / page-end;
+  grid-template-columns: repeat(4, 1fr);
+  grid-column: text;
 }
 
 d-byline h3 {

src/components/d-title.js

@@ -3,7 +3,7 @@ import { Template } from '../mixins/template';
 const T = Template('d-title', `
 <style>
   :host {
-    margin-top: 64px;
+    padding-top: 64px;
     contain: content;
     display: block;
   }
@@ -15,11 +15,11 @@ const T = Template('d-title', `
     margin: 0 0 10px;
   }
   .status {
+    margin-top: 15px;
     font-size: 12px;
     color: #009688;
-    opacity: 0.7;
+    opacity: 0.8;
     grid-column: kicker;
-    margin-top: 19px;
   }
   .status span {
     line-height: 1;