Merge branch 'v2' of github.com:distillpub/template into v2

src/components/d-byline.js

@@ -3,20 +3,16 @@ import style from '../styles/d-byline.css';
 export function bylineTemplate(frontMatter) {
   return `
   <div class="byline grid">
-    <div class="authors">
+    <div class="authors-affiliations grid">
       <h3>Authors</h3>
+      <h3>Affiliations</h3>
       ${frontMatter.authors.map(author => `
         <p>
           ${author.personalURL
             ? `<a class="name" href="${author.personalURL}">${author.name}</a>`
             : `<div class="name">${author.name}</div>`
           }
-        </pdiv>
-      `).join("")}
-    </div>
-    <div class="affiliations">
-      <h3>Affiliations</h3>
-      ${frontMatter.authors.map(author => `
+        </p>
         <p>
           ${author.affiliationURL
             ? `<a class="affiliation" href="${author.affiliationURL}">${author.affiliation}</a>`

src/components/d-title.js

@@ -4,17 +4,17 @@ const T = Template('d-title', `
 <style>
 
   :host {
-    padding-top: 1rem;
+    padding: 4rem 0 1.5rem;
     contain: content;
     display: block;
   }
 
   ::slotted(h1) {
     grid-column: text;
-    font-size: 50px;
-    font-weight: 700;
+    font-size: 60px;
+    font-weight: 600;
     line-height: 1.05em;
-    margin: 0 0 0.5rem;
+    margin: 0 0 1rem;
   }
 
   ::slotted(p) {

src/styles/d-article.css

@@ -51,16 +51,17 @@ d-article .marker:hover span {
 }
 
 d-article h2 {
-  grid-column-end: page-end;
-  font-weight: 700;
+  font-weight: 600;
   font-size: 24px;
   line-height: 1.25em;
-  margin: 0 0 1rem 0;
+  margin: 2rem 0 1.5rem 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding-bottom: 1rem;
 }
 
 @media(min-width: 1024px) {
   d-article h2 {
-    font-size: 24px;
+    font-size: 36px;
   }
 }
 

src/styles/d-byline.css

@@ -8,12 +8,17 @@ d-byline {
 }
 
 d-byline .byline {
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: 2fr 1fr 1fr;
   grid-column: text;
 }
 
+d-byline .authors-affiliations {
+  grid-template-columns: 1fr 1fr;
+
+}
+
 d-byline h3 {
-  font-size: 0.55rem;
+  font-size: 0.6rem;
   font-weight: 400;
   color: rgba(0, 0, 0, 0.5);
   margin: 0;

src/ui/d-slider.js

@@ -121,6 +121,7 @@ export class Slider extends T(HTMLElement) {
 
 
   connectedCallback() {
+    this.connected = true;
     this.setAttribute("role", "slider");
     // Makes the element tab-able.
     if (!this.hasAttribute("tabindex")) { this.setAttribute("tabindex", 0); }
@@ -194,7 +195,11 @@ export class Slider extends T(HTMLElement) {
       this.max = +newValue;
       this.setAttribute("aria-valuemax", this.max);
     }
-    if (attr == "value") this.value = +newValue;
+    if (attr == "value") {
+      console.log("value update")
+      this.update(+newValue);
+
+    }
     if (attr == "step") {
       if (newValue > 0) {
         this.step = +newValue;
@@ -270,8 +275,10 @@ export class Slider extends T(HTMLElement) {
     }
     v = this.validateValueRange(this.min, this.max, v);
     if (this.value !== v) {
-      this.knob.style.left = this.scale(v) * 100 + "%";
-      this.trackFill.style.width = this.scale(v) * 100 + "%";
+      if (this.connected) {
+        this.knob.style.left = this.scale(v) * 100 + "%";
+        this.trackFill.style.width = this.scale(v) * 100 + "%";
+      }
       this.value = v;
       this.setAttribute("aria-valuenow", this.value);
       this.dispatchInput();