From 5bb56dc3bc8d0dfe9337f4565da52bed38965ea5 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Mon, 4 Sep 2017 11:38:12 +0800
Subject: [PATCH] phoenix: update style

---
 _sass/2017/components/push-button.scss   | 33 +-----------------
 _sass/2017/markdown/code.scss            |  3 +-
 _sass/2017/markdown/p.scss               | 44 ++++++++++++++++++++++++
 _sass/2017/placeholders/push-button.scss | 34 ++++++++++++++++++
 _sass/2017/style.scss                    |  2 ++
 phoenix.md                               | 17 +++++----
 6 files changed, 91 insertions(+), 42 deletions(-)
 create mode 100644 _sass/2017/markdown/p.scss
 create mode 100644 _sass/2017/placeholders/push-button.scss

diff --git a/_sass/2017/components/push-button.scss b/_sass/2017/components/push-button.scss
index cf9d89383..52c941f6b 100644
--- a/_sass/2017/components/push-button.scss
+++ b/_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;
 }
diff --git a/_sass/2017/markdown/code.scss b/_sass/2017/markdown/code.scss
index 39d31ae37..a31846b28 100644
--- a/_sass/2017/markdown/code.scss
+++ b/_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;
 }
 
diff --git a/_sass/2017/markdown/p.scss b/_sass/2017/markdown/p.scss
new file mode 100644
index 000000000..35022ed4d
--- /dev/null
+++ b/_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;
+    }
+  }
+}
diff --git a/_sass/2017/placeholders/push-button.scss b/_sass/2017/placeholders/push-button.scss
new file mode 100644
index 000000000..92d81c45d
--- /dev/null
+++ b/_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;
+  }
+}
diff --git a/_sass/2017/style.scss b/_sass/2017/style.scss
index 653cbfe2d..98080754d 100644
--- a/_sass/2017/style.scss
+++ b/_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';
diff --git a/phoenix.md b/phoenix.md
index fc76735d6..76520af59 100644
--- a/phoenix.md
+++ b/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 \