phoenix: update style

_sass/2017/components/push-button.scss

@@ -1,34 +1,3 @@
 .push-button {
-  display: inline-block;
-  text-decoration: none;
-  padding: 8px 16px;
-  border-radius: 3px;
-
-  &,
-  &:visited {
-    background-color: $base-a;
-    background: $base-a-gradient;
-    color: white;
-  }
-
-  &:hover,
-  &:focus {
-    background: darken($base-a, 16%);
-    box-shadow: none;
-    color: white;
-  }
-}
-
-.push-button.-dark {
-  &,
-  &:visited {
-    background: darken($base-a, 16%);
-    color: white;
-  }
-
-  &:hover,
-  &:focus {
-    background: darken($base-a, 24%);
-    color: white;
-  }
+  @extend %push-button;
 }

_sass/2017/markdown/code.scss

@@ -57,7 +57,8 @@
 
 .MarkdownBody pre.-setup,
 .MarkdownBody p.-setup,
-.MarkdownBody ul.-setup {
+.MarkdownBody ul.-setup,
+.MarkdownBody p.-crosslink {
   background: $gray-bg;
 }
 

_sass/2017/markdown/p.scss

@@ -0,0 +1,44 @@
+/*
+ * Crosslink (eg, phoenix.md)
+ */
+
+.MarkdownBody p.-crosslink {
+  & > a {
+    display: block;
+    text-decoration: none;
+    color: $base-a;
+  }
+
+  & > a:visited {
+    color: $base-a;
+  }
+
+  & > a::before {
+    @include ion-icon('md-arrow-forward');
+    margin-right: 16px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    border-radius: 50%;
+  }
+
+  & > a,
+  & > a:visited {
+    &::before {
+      background: $base-a;
+      color: white;
+    }
+  }
+
+  & > a:hover,
+  & > a:focus {
+    & {
+      color: $base-a7;
+    }
+
+    &::before {
+      background: $base-a7;
+    }
+  }
+}

_sass/2017/placeholders/push-button.scss

@@ -0,0 +1,34 @@
+%push-button {
+  display: inline-block;
+  text-decoration: none;
+  padding: 8px 16px;
+  border-radius: 3px;
+
+  &,
+  &:visited {
+    background-color: $base-a;
+    background: $base-a-gradient;
+    color: white;
+  }
+
+  &:hover,
+  &:focus {
+    background: darken($base-a, 16%);
+    box-shadow: none;
+    color: white;
+  }
+}
+
+%push-button.-dark {
+  &,
+  &:visited {
+    background: darken($base-a, 16%);
+    color: white;
+  }
+
+  &:hover,
+  &:focus {
+    background: darken($base-a, 24%);
+    color: white;
+  }
+}

_sass/2017/style.scss

@@ -8,10 +8,12 @@
 @import './utils/heading-style';
 @import './utils/section-gutter';
 @import './utils/section-with-container';
+@import './placeholders/push-button';
 @include ion-font;
 @import './base/base';
 @import './markdown/code';
 @import './markdown/headings';
+@import './markdown/p';
 @import './markdown/table';
 @import './markdown/ul';
 @import './components/attribute-peg';

phoenix.md

@@ -54,8 +54,8 @@ See: [Adding pages](https://hexdocs.pm/phoenix/adding_pages.html) _(hexdocs.pm)_
 
 ### Migrations
 
-See [Ecto migrations cheatsheet](./phoenix-migrations).
-{: .-setup}
+[Ecto migrations cheatsheet](./phoenix-migrations)
+{: .-crosslink}
 
 ```bash
 $ mix ecto.gen.migration update_posts_table
@@ -76,8 +76,8 @@ end
 
 ### Routing
 
-See [Phoenix routing cheatsheet](./phoenix-routing).
-{: .-setup}
+[Phoenix routing cheatsheet](./phoenix-routing)
+{: .-crosslink}
 
 ```elixir
 get "/", PageController, :index
@@ -94,8 +94,8 @@ user_post_path(:show, 17, 12)  #=> /users/17/posts/12
 
 ### Conn
 
-See [Phoenix conn cheatsheet](./phoenix-conn).
-{: .-setup}
+[Phoenix conn cheatsheet](./phoenix-conn)
+{: .-crosslink}
 
 ```elixir
 conn.host          #=> "example.com"
@@ -118,9 +118,8 @@ conn
 
 ### Ecto
 
-
-See [Ecto cheatsheet](./phoenix-ecto).
-{: .-setup}
+[Ecto cheatsheet](./phoenix-ecto)
+{: .-crosslink}
 
 ```bash
 $ mix phx.gen.html \