From d7836fb9a3354997ac6e23c99e3f143d1cc06b1a Mon Sep 17 00:00:00 2001
From: Simon Holywell <treffynnon@php.net>
Date: Mon, 27 Feb 2017 12:04:22 +1000
Subject: [PATCH] Add a little translations bar to top of document

---
 _includes/foot.html | 11 ++++++++++-
 _includes/head.html | 13 +++++++++++++
 style.css           | 21 +++++++++++++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/_includes/foot.html b/_includes/foot.html
index 2bed3f7..6f32090 100644
--- a/_includes/foot.html
+++ b/_includes/foot.html
@@ -1,6 +1,15 @@
 <footer class="foot wrap">
     <hr/>
-    <p>Translations: <a href="{{ site.url }}">English</a> &middot; <a href="{{ site.url}}/jp">日本語</a></p>
+    <nav class="translation-nav">
+        <span>Translations:</span>
+        <a href="{{ site.url }}" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
+            <span itemprop="name" alternateName="en">English</span>
+        </a>
+        ·
+        <a href="{{ site.url }}/jp" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
+            <span itemprop="name" alternateName="ja">日本語</span>
+        </a>
+    </nav>
     <p>
         This guide is being discussed on Hacker News [
             <a href="https://news.ycombinator.com/item?id=9941150">1</a>,
diff --git a/_includes/head.html b/_includes/head.html
index deefddd..1e951e1 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,6 +1,19 @@
 <nav id="page-nav">
     <a href="#" id="to-top" class="toplink">↑</a>
 </nav>
+<div id="translation-bar">
+    <div class="wrap">
+        <nav class="translation-nav">
+            <a href="{{ site.url }}" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
+                <span itemprop="name" alternateName="en">English</span>
+            </a>
+            ·
+            <a href="{{ site.url }}/jp" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
+                <span itemprop="name" alternateName="ja">日本語</span>
+            </a>
+        </nav>
+    </div>
+</div>
 <header class="top">
     <div class="wrap">
         <h1 itemprop="name">SQL Style Guide</h1>
diff --git a/style.css b/style.css
index 2cf86f8..82e4f33 100644
--- a/style.css
+++ b/style.css
@@ -83,6 +83,27 @@ a:hover {
     border-color: #333;
 }
 
+#translation-bar {
+    background: linear-gradient(top,  #444,  #111);
+    background: -ms-linear-gradient(top,  #444,  #111);
+    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
+    background: -moz-linear-gradient(top,  #444,  #111);
+    text-align: right;
+    color: #999;
+}
+
+#translation-bar .wrap {
+    padding: .5% 10%;
+}
+
+#translation-bar nav {
+    font-size: .7em;
+}
+
+#translation-bar a {
+    color: inherit;
+}
+
 header.top {
     background: {{ primary_colour }};
     color: #333;