From d7217513c9fca9354d053a5a3e3e8102c50b5b8a Mon Sep 17 00:00:00 2001
From: Ines Montani <ines@ines.io>
Date: Wed, 27 Feb 2019 11:42:10 +0100
Subject: [PATCH] Merge branch 'spacy.io' into develop [ci skip]

---
 website/meta/site.json                    | 2 +-
 website/src/components/typography.js      | 8 ++++++--
 website/src/styles/button.module.sass     | 1 +
 website/src/styles/grid.module.sass       | 4 +++-
 website/src/styles/typography.module.sass | 8 ++++++++
 5 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/website/meta/site.json b/website/meta/site.json
index 2b65e1d84..4defdf913 100644
--- a/website/meta/site.json
+++ b/website/meta/site.json
@@ -29,7 +29,7 @@
     "spacyVersion": "2.1",
     "binderUrl": "ines/spacy-io-binder",
     "binderBranch": "nightly",
-    "binderVersion": "2.1.0a8",
+    "binderVersion": "2.1.0a9",
     "sections": [
         { "id": "usage", "title": "Usage Documentation", "theme": "blue" },
         { "id": "models", "title": "Models Documentation", "theme": "blue" },
diff --git a/website/src/components/typography.js b/website/src/components/typography.js
index 721521939..e23339758 100644
--- a/website/src/components/typography.js
+++ b/website/src/components/typography.js
@@ -94,9 +94,13 @@ const Headline = ({
 }) => {
     // This can be set via hidden="true" and as a prop, so we need to accept both
     if (hidden === true || hidden === 'true') return null
+    const hasAction = !!source || !!action
+    const headingClassNames = classNames(classes.heading, className, {
+        [classes.clear]: hasAction,
+    })
     const tags = tag ? tag.split(',').map(t => t.trim()) : []
     return (
-        <Component id={id} className={classNames(classes.heading, className)}>
+        <Component id={id} className={headingClassNames}>
             <Permalink id={id}>{children} </Permalink>
             {tags.map((tag, i) => (
                 <Tag spaced key={i}>
@@ -114,7 +118,7 @@ const Headline = ({
                 </Tag>
             )}
 
-            {(source || action) && (
+            {hasAction && (
                 <div className={classes.action}>
                     {source && (
                         <Button icon="code" to={github(source)}>
diff --git a/website/src/styles/button.module.sass b/website/src/styles/button.module.sass
index 2b824311b..35afe68ac 100644
--- a/website/src/styles/button.module.sass
+++ b/website/src/styles/button.module.sass
@@ -8,6 +8,7 @@
     transition: background-color, color 0.25s ease
     font: bold var(--font-size-xs)/var(--line-height-md) var(--font-secondary)
     text-transform: uppercase
+    white-space: nowrap
 
     &:hover
         border-color: var(--color-theme-dark)
diff --git a/website/src/styles/grid.module.sass b/website/src/styles/grid.module.sass
index c264d7930..63ea3d160 100644
--- a/website/src/styles/grid.module.sass
+++ b/website/src/styles/grid.module.sass
@@ -17,7 +17,6 @@ $flex-gap: 2rem
     flex-wrap: wrap
     justify-content: space-between
     grid-column-gap: $grid-gap-wide
-    grid-template-columns: 1fr
 
     & > *
         min-width: 0
@@ -27,6 +26,9 @@ $flex-gap: 2rem
         display: grid
 
 @include breakpoint(min, lg)
+    .root
+        grid-template-columns: 1fr
+
     @each $name, $cols in (half: 2, third: 3, quarter: 4)
         .#{$name}
             @include flex-fallback($cols, $flex-gap)
diff --git a/website/src/styles/typography.module.sass b/website/src/styles/typography.module.sass
index 586c8df01..f5b32f695 100644
--- a/website/src/styles/typography.module.sass
+++ b/website/src/styles/typography.module.sass
@@ -73,12 +73,20 @@
 .no-gutter
     margin-bottom: 0 !important
 
+.clear:after
+    content: ""
+    clear: both
+    display: table
+
 .action
     font: var(--font-size-xs)/var(--line-height-sm) var(--font-primary)
     color: var(--color-subtle-dark)
     float: right
     max-width: 33%
     text-align: right
+    position: relative
+    top: 0.4rem
+    margin-right: 1rem
 
 .help
     color: var(--color-dark)