diff --git a/examples/article.html b/examples/article.html index e2beedf..172cc9c 100644 --- a/examples/article.html +++ b/examples/article.html @@ -28,7 +28,7 @@ -
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. +
A popular method for exploring high-dimensional data is something called t-SNE. 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.
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.
This is the first paragraph of the article. Test a long — dash -- here it is.
Test for owner's possessive. Test for "quoting a passage." And another sentence. Or two. Some flopping fins; for diving.
diff --git a/src/components/d-byline.js b/src/components/d-byline.js index cb368d6..1c5662d 100644 --- a/src/components/d-byline.js +++ b/src/components/d-byline.js @@ -1,15 +1,13 @@ export const style = ` d-byline { - font-size: 13px; - line-height: 20px; - color: rgba(0, 0, 0, 0.6); - padding-bottom: 20px; contain: content; } d-byline .byline { grid-column: margin-left / page; + font-size: 13px; line-height: 1.8em; + color: rgba(0, 0, 0, 0.6); } d-byline .byline::after { @@ -17,7 +15,8 @@ d-byline .byline::after { display: block; border-bottom: solid 1px #999; width: 40px; - margin-top: 60px; + margin-top: 48px; + margin-bottom: 48px; } d-byline a, diff --git a/src/components/d-title.js b/src/components/d-title.js index ec61b51..e54ef96 100644 --- a/src/components/d-title.js +++ b/src/components/d-title.js @@ -8,12 +8,12 @@ const T = Template('d-title', ` box-sizing: border-box; display: block; width: 100%; - margin-bottom: 36px; } ::slotted(h1) { padding-top: 16px; padding-bottom: 0; - margin: 0; + margin-top: 0; + margin-bottom: 12px; line-height: 1.15; font-size: 32px; font-weight: 700; @@ -26,8 +26,8 @@ const T = Template('d-title', ` padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.5em !important; - margin-top: 12px !important; - margin-bottom: 0 !important; + margin-top: 0 !important; + margin-bottom: 18px !important; } @media screen and (min-width: 768px), print { diff --git a/src/styles/styles-article.css b/src/styles/styles-article.css index 2bbd3be..0c73176 100644 --- a/src/styles/styles-article.css +++ b/src/styles/styles-article.css @@ -69,12 +69,8 @@ d-article a { d-article p, d-article ul, d-article ol { - margin-bottom: 18px; -} -d-article p b, -d-article ul b, -d-article ol b { - -webkit-font-smoothing: antialiased; + margin-top: 0; + margin-bottom: 36px; } d-article a { border-bottom: 1px solid rgba(0, 0, 0, 0.4);