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

# Conflicts: # examples/article.html # src/components/d-byline.js # src/components/d-title.js
2026-07-09 23:12:15 +08:00 · 2017-08-29 11:00:50 -07:00
parent 80fd26b764 bdb7aa032c
commit 8cd7760dd2
4 changed files with 46 additions and 107 deletions
@@ -9,7 +9,7 @@
      title: Demo Title Attention and Augmented Recurrent Neural Networks
      published: Jan 10, 2017
      authors:
-      - Chris Olah:
+      - Chris Olah: http://shancarter.com
      - Shan Carter: http://shancarter.com
      affiliations:
      - Google Brain
@@ -21,17 +21,17 @@
 <body>
 <d-article>
  <d-title>
-    <h1>Attention and Augmented Recurrent Neural Networks</h1>
-    <h2>Some people want a deck</h2>
+    <h1>How to Use t-SNE Effectively</h1>
+    <h2>Although extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.</h2>
  </d-title>
  <d-byline></d-byline>
-  <d-abstract>
+  <!-- <d-abstract>
    <p>This is the first paragraph of the article. Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
-  </d-abstract>
+  </d-abstract> -->
+  <p>A popular method for exploring high-dimensional data is something called t-SNE, introduced by van der Maaten and Hinton in 2008 [1]. The technique has become widespread in the field of machine learning, since it has an almost magical ability to create compelling two-dimensonal “maps” from data with hundreds or even thousands of dimensions. Although impressive, these images can be tempting to misread. The purpose of this note is to prevent some common misreadings.
+  <p>Before diving in: if you haven’t encountered t-SNE before, here’s what you need to know about the math behind it. The goal is to take a set of points in a high-dimensional space and find a faithful representation of those points in a lower-dimensional space, typically the 2D plane. The algorithm is non-linear and adapts to the underlying data, performing different transformations on different regions. Those differences can be a major source of confusion.
  <p>This is the first paragraph of the article. Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
  <p>Test for owner's possessive. Test for "quoting a passage." And another sentence. Or two. Some flopping fins; for diving.</p>
-  <hr>
-  <div style="max-width: 800px; background-color: red; height: 100px; border-radius: 50px;"></div>
  <p>Here's a test of an inline equation <d-math>c = a^2 + b^2</d-math>. And then there's a block equation:</p>
  <d-math block>
      c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
@@ -2,17 +2,22 @@ export const style = `
 d-byline {
  font-size: 13px;
  line-height: 20px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6);
-  padding-top: 20px;
  padding-bottom: 20px;
  contain: content;
-  min-height: 42px;
 }

-d-byline .byline-container {
+d-byline .byline {
  grid-column: margin-left / page;
+  line-height: 1.8em;
+}
+
+d-byline .byline::after {
+  content: "";
+  display: block;
+  border-bottom: solid 1px #999;
+  width: 40px;
+  margin-top: 60px;
 }

 d-byline a,
@@ -29,100 +34,50 @@ d-article d-byline a:hover {

 d-byline .authors {
  text-align: left;
-  contain: content;
 }

-.author .name {
+d-byline .author {
+  margin-right: 12px;
+}
+
+d-byline .author .name {
  font-weight: 600;
  display: inline;
  text-transform: uppercase;
-  contain: content;
+  margin-right: 10px;
 }

-.author .affiliation {
+d-byline .author .affiliation {
  display: inline;
 }

 d-byline .date {
-  display: block;
+  display: inline;
  text-align: left;
-  margin-top: 8px;
+  margin-right: 12px;
 }

-.date .year, .date .month {
+d-byline .date .year,
+d-byline .date .month {
  display: inline;
 }

 d-byline .citation {
-  display: block;
+  display: inline;
  text-align: left;
 }

-.citation div {
+d-byline .citation div {
  display: inline;
 }

-@media screen and (min-width: 768px), print {

-  a:hover {
-    color: rgba(0, 0, 0, 0.9);
-  }
-
-  d-byline .authors {
-    display: inline-block;
-  }
-
-  .author {
-    display: inline-block;
-    margin-right: 12px;
-    /*padding-left: 20px;*/
-    /*border-left: 1px solid #ddd;*/
-  }
-
-  .affiliation {
-    display: block;
-  }
-
-  .author:last-child {
-    margin-right: 0;
-  }
-
-  .author .name {
-    display: block;
-  }
-
-  d-byline .date {
-
-    border-left: 1px solid rgba(0, 0, 0, 0.1);
-    padding-left: 15px;
-    margin-left: 15px;
-    margin-top: 0;
-    display: inline-block;
-  }
-  .date .year, .date .month {
-    display: block;
-  }
-
-  d-byline .citation {
-    align-self: flex-end;
-    border-left: 1px solid rgba(0, 0, 0, 0.15);
-    padding-left: 15px;
-    margin-left: 15px;
-    display: inline-block;
-  }
-  .citation div {
-    display: block;
-  }
-
-  .byline-container {
-    display: flex;
-  }
-}`;
+`;


 export function bylineTemplate(frontMatter) {
  return `
-<div class='byline-container'>
+<div class='byline'>
  <div class="authors">
    ${frontMatter.authors.map( author => `<div class="author">
      ${author.personalURL ?
@@ -142,7 +97,6 @@ export function bylineTemplate(frontMatter) {
    <div class="year">${frontMatter.publishedYear}</div>
  </div>
  <a class="citation" href="#citation">
-    <div>Citation:</div>
    <div>${frontMatter.concatenatedAuthors}, ${frontMatter.publishedYear}</div>
  </a>
 </div>
@@ -8,41 +8,42 @@ const T = Template('d-title', `
  box-sizing: border-box;
  display: block;
  width: 100%;
-  contain: content;
+  margin-bottom: 36px;
 }
-
-
 ::slotted(h1) {
  padding-top: 16px;
-  padding-bottom: 16px;
+  padding-bottom: 12px;
  margin: 0;
-  line-height: 1.3;
+  line-height: 1.15;
  font-size: 32px;
  font-weight: 700;
 }

 ::slotted(h2) {
  border-bottom: none !important;
-
+  font-size: 26px !important;
+  font-weight: 300 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  line-height: 1.5em !important;
+  margin-top: 0 !important;
+  margin-bottom: 24px !important;
 }

@media screen and (min-width: 768px), print {
  ::slotted(h1) {
    font-size: 42px;
-    padding-bottom: 32px;
  }
 }
@media(min-width: 1024px) {
  ::slotted(h1) {
-    padding-top: 0px;
-    padding-bottom: 32px;
-    font-size: 48px;
+    padding-top: 64px;
+    font-size: 42px;
  }
 }
@media(min-width: 1280px) {
  ::slotted(h1) {
-    padding-bottom: 32px;
-    font-size: 56px;
+    padding-top: 96px;
  }
 }

@@ -36,22 +36,6 @@ d-article h2 {
    font-size: 32px;
  }
 }
-d-article h1 + h2 {
-  font-weight: 300;
-  font-size: 20px;
-  line-height: 1.4em;
-  margin-top: 8px;
-  font-style: normal;
-}
-@media(min-width: 1080px) {
-  .centered h1 + h2 {
-    text-align: center;
-  }
-  d-article h1 + h2 {
-    margin-top: 12px;
-    font-size: 32px;
-  }
-}

 /* H3 */

@@ -85,7 +69,7 @@ d-article a {
 d-article p,
 d-article ul,
 d-article ol {
-  margin-bottom: 24px;
+  margin-bottom: 18px;
 }
 d-article p b,
 d-article ul b,