external icon

_src/_assets/images/icon-arrowout.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16">
+  <g fill="none" stroke="#fff" stroke-width="2" stroke-opacity=".6" transform="translate(0 -4)">
+    <polyline points="19.585 4.069 12.542 11.147 5.464 4.069" transform="rotate(-135 12.525 7.608)"/>
+    <path d="M14,6 L1,19"/>
+  </g>
+</svg>

_src/_assets/styles/bigchain/_icons.scss

@@ -39,3 +39,7 @@
     stroke-width: 2px;
     stroke: currentColor;
 }
+
+.icon--external {
+    stroke: currentColor;
+}

_src/_assets/styles/bigchain/_typography.scss

@@ -90,6 +90,24 @@ a {
     }
 }
 
+// External links
+.dropdown,
+.content--page {
+    [rel='external'],
+    [target='_blank'] {
+        &:after {
+            content: '';
+            display: inline-block;
+            width: 9px;
+            height: 8px;
+            background: url('../img/icon-arrowout.svg') no-repeat center center;
+            background-size: contain;
+            transition: .15s ease-out;
+            margin-left: $spacer / 6;
+        }
+    }
+}
+
 
 //
 // Headings

_src/_data/menus.yml

@@ -11,6 +11,7 @@ main:
           url: /developers/guide/
         - title: Docs
           url: https://docs.bigchaindb.com/
+          external: true
     - title: Services
       url: /services/
 

_src/_includes/menu-main.html

@@ -41,7 +41,9 @@
                                         {% if page.url contains item.url %}
                                         {% assign active = 'active' %}
                                     {% endif %}
-                                    <a class="dropdown-item {{ active }}" href="{{ item.url }}">{{ item.title }}</a>
+                                    <a class="dropdown-item {{ active }}" href="{{ item.url }}" {% if item.external %}rel="external"{% endif %}>
+                                        {{ item.title }}
+                                    </a>
                                 {% endfor %}
                             </div>
                         </div>