diff --git a/.gitignore b/.gitignore
index ba359f8..f1360a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ Gemfile.lock
 
 _site
 _gh_pages
+.jekyll-metadata
diff --git a/_config.yml b/_config.yml
index 0862eaf..e671fc8 100644
--- a/_config.yml
+++ b/_config.yml
@@ -15,7 +15,32 @@ kramdown:
     input: GFM
     hard_wrap: false
     toc_levels: "2,3"
+    auto_ids: true
+    transliterated_header_ids: true
+    auto_id_stripping: true
 
-gems:
+plugins:
     - jekyll-redirect-from
     - jekyll-sitemap
+
+langs:
+    de:
+        de: Deutsch
+        en: German
+    en: 
+        en: English
+    ja:
+        ja: 日本語
+        en: Japanese
+    pt-BR:
+        pt-BR: Português (BR)
+        en: Portuguese - Brazil
+    ru:
+        ru: Русский
+        en: Russian
+    zh:
+        zh: 简体中文
+        en: Simplified Chinese
+    zh-TW:
+        zh-TW: 正體中文
+        en: Traditional Chinese
diff --git a/_includes/head.html b/_includes/head.html
deleted file mode 100644
index dafbb33..0000000
--- a/_includes/head.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<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 }}/de/" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-                <span itemprop="name" alternateName="de" title="Deutsch (German)" lang="de">Deutsch</span>
-            </a>
-            ·
-            <a href="{{ site.url }}" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-                <span itemprop="name" alternateName="en" title="English">English</span>
-            </a>
-            ·
-            <a href="{{ site.url }}/ja/" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-                <span itemprop="name" alternateName="ja" title="日本語 (Japanese)" lang="ja">日本語</span>
-            </a>
-            ·
-            <a href="{{ site.url }}/pt-br/" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-                <span itemprop="name" alternateName="pt-BR" title="Português (BR) (Portuguese - Brazil)" lang="pt-BR">Português (BR)</span>
-            </a>
-            ·
-            <a href="{{ site.url }}/ru/" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-                <span itemprop="name" alternateName="ru" title="Русский (Russian)" lang="ru">Русский</span>
-            </a>
-            ·
-            <a href="{{ site.url }}/zh/" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-                <span itemprop="name" alternateName="zh" title="简体中文 (Simplified Chinese)" lang="zh">简体中文</span>
-            </a>
-            ·
-            <a href="{{ site.url }}/zh-tw" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-                <span itemprop="name" alternateName="zh-TW" title="正體中文 (Traditional Chinese)" lang="zh-TW">正體中文</span>
-            </a>
-        </nav>
-    </div>
-</div>
-<header class="top">
-    <div class="wrap">
-        <h1 itemprop="name">{% if page.lang_title %}{{ page.lang_title }} · {% endif %}SQL Style Guide</h1>
-        <p class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">by
-            <a href="https://www.simonholywell.com/?utm_source=sqlstyle.guide-{{ site.domain }}&amp;utm_medium=link&amp;utm_campaign=header" itemprop="url"><span itemprop="name">Simon Holywell</span></a> &middot;
-            <a href="https://twitter.com/treffynnon">@Treffynnon</a>
-        </p>
-        <p class="twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}" data-text="SQL style guide by @treffynnon: {{ site.description }}" data-size="large" data-dnt="true">Tweet</a>
-        </p>
-    </div>
-</header>
diff --git a/_includes/foot.html b/_includes/layout_partials/foot.html
similarity index 67%
rename from _includes/foot.html
rename to _includes/layout_partials/foot.html
index e6cca9d..78f4a6c 100644
--- a/_includes/foot.html
+++ b/_includes/layout_partials/foot.html
@@ -2,33 +2,7 @@
     <hr/>
     <nav class="translation-nav">
         <span>Translations:</span>
-        <a href="{{ site.url }}/de/" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-            <span itemprop="name" alternateName="de" title="Deutsch (German)" lang="de">Deutsch</span>
-        </a>
-        ·
-        <a href="{{ site.url }}" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-            <span itemprop="name" alternateName="en" title="English">English</span>
-        </a>
-        ·
-        <a href="{{ site.url }}/ja" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-            <span itemprop="name" alternateName="ja" title="日本語 (Japanese)" lang="ja">日本語</span>
-        </a>
-        ·
-        <a href="{{ site.url }}/pt-br/" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-            <span itemprop="name" alternateName="pt-BR" title="Português (BR) (Portuguese - Brazil)" lang="pt-BR">Português (BR)</span>
-        </a>
-        ·
-        <a href="{{ site.url }}/ru/" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-            <span itemprop="name" alternateName="ru" title="Русский (Russian)" lang="ru">Русский</span>
-        </a>
-        ·
-        <a href="{{ site.url }}/zh" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-            <span itemprop="name" alternateName="zh" title="简体中文 (Simplified Chinese)" lang="zh">简体中文</span>
-        </a>
-        ·
-        <a href="{{ site.url }}/zh-tw" itemprop="availableLanguage" itemscope itemtype="http://schema.org/Language">
-            <span itemprop="name" alternateName="zh-TW" title="正體中文 (Traditional Chinese)" lang="zh-TW">正體中文</span>
-        </a>
+        {% include layout_partials/languages.html %}
     </nav>
     <p>
         This guide is being discussed on Hacker News [
diff --git a/_includes/layout_partials/head.html b/_includes/layout_partials/head.html
new file mode 100644
index 0000000..6ec9c29
--- /dev/null
+++ b/_includes/layout_partials/head.html
@@ -0,0 +1,35 @@
+<nav id="page-nav">
+    <a href="#" id="to-top" class="toplink">↑</a>
+</nav>
+<div id="translation-bar">
+    <div class="wrap">
+        <select class="language-drop" id="language-drop">
+            {% include layout_partials/languages.html dropdown=true %}
+        </select>
+        <div class="language-ico">{% include static/language.svg %}</div>
+    </div>
+</div>
+<header class="top">
+    <div class="wrap">
+        <h1 itemprop="name">{% if page.lang_title %}{{ page.lang_title }} · {% endif %}SQL Style Guide</h1>
+        <p class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">by
+            <a href="https://www.simonholywell.com/?utm_source=sqlstyle.guide-{{ site.domain }}&amp;utm_medium=link&amp;utm_campaign=header" itemprop="url"><span itemprop="name">Simon Holywell</span></a> &middot;
+            <a href="https://twitter.com/treffynnon">@Treffynnon</a>
+        </p>
+        <p class="twitter">
+            <a href="https://twitter.com/share" class="twitter-share-button" 
+               data-url="{{ site.url }}" data-text="SQL style guide by @treffynnon: {{ site.description }}"
+               data-size="large" data-dnt="true">Tweet</a>
+        </p>
+        {% if page.contributors -%}
+            <p class="translator">Translated by: 
+            {% for user in page.contributors -%}
+                <a href="https://github.com/{{ user.user }}" title="{{ user.user }} - {{ user.type }}" rel="nofollow">
+                    {{- user.user -}}
+                </a>
+                {%- if forloop.last != true %} · {% endif -%}
+            {%- endfor %}
+            </p>
+        {%- endif %}
+    </div>
+</header>
diff --git a/_includes/layout_partials/language_dropdown_option.html b/_includes/layout_partials/language_dropdown_option.html
new file mode 100644
index 0000000..027ecc3
--- /dev/null
+++ b/_includes/layout_partials/language_dropdown_option.html
@@ -0,0 +1,4 @@
+<option value="{{ iso }}"
+    {%- if page.lang == iso %} selected="selected"{% endif %}>
+    {{ full }}
+</option>
\ No newline at end of file
diff --git a/_includes/layout_partials/language_nav_links.html b/_includes/layout_partials/language_nav_links.html
new file mode 100644
index 0000000..9cf9c00
--- /dev/null
+++ b/_includes/layout_partials/language_nav_links.html
@@ -0,0 +1,7 @@
+<a href="{{ url }}" itemprop="availableLanguage"
+   itemscope itemtype="http://schema.org/Language">
+    <span itemprop="name" alternateName="{{ iso }}"
+        title="{{ full }}"
+        lang="{{ iso }}">{{ local }}</span>
+</a>
+{%- if forloop.last != true %} · {% endif -%}
\ No newline at end of file
diff --git a/_includes/layout_partials/language_rel_alternate.html b/_includes/layout_partials/language_rel_alternate.html
new file mode 100644
index 0000000..7fcd5f0
--- /dev/null
+++ b/_includes/layout_partials/language_rel_alternate.html
@@ -0,0 +1 @@
+<link rel="alternate" hreflang="{{ iso }}" href="{{ url }}">
\ No newline at end of file
diff --git a/_includes/layout_partials/languages.html b/_includes/layout_partials/languages.html
new file mode 100644
index 0000000..3d35927
--- /dev/null
+++ b/_includes/layout_partials/languages.html
@@ -0,0 +1,21 @@
+{%- assign lpages=site.pages | where_exp:"page", "page contains 'lang'" | sort: 'lang' -%}
+
+{%- assign content_template="layout_partials/language_nav_links.html" -%}
+{%- if include.dropdown == true -%}
+    {%- assign content_template="layout_partials/language_dropdown_option.html" -%}
+{%- endif -%}
+{%- if include.rel_alternate == true -%}
+    {%- assign content_template="layout_partials/language_rel_alternate.html" -%}
+{%- endif -%}
+
+{% for l in lpages %}
+    {%- assign local=site.langs[l.lang][l.lang] -%}
+    {%- assign english=site.langs[l.lang]['en'] -%}
+    {%- assign iso=l.lang -%}
+    {%- assign url=l.url | absolute_url -%}
+    {%- capture full -%}
+        {{ local }}{% if l.lang_title %} ({{ english }}){% endif %}
+    {%- endcapture -%}
+
+    {% include {{ content_template }} %}
+{% endfor %}
\ No newline at end of file
diff --git a/_includes/anchor.min.js b/_includes/static/anchor.min.js
similarity index 100%
rename from _includes/anchor.min.js
rename to _includes/static/anchor.min.js
diff --git a/_includes/highlight.hybrid.css b/_includes/static/highlight.hybrid.css
similarity index 100%
rename from _includes/highlight.hybrid.css
rename to _includes/static/highlight.hybrid.css
diff --git a/_includes/highlight.pack.js b/_includes/static/highlight.pack.js
similarity index 100%
rename from _includes/highlight.pack.js
rename to _includes/static/highlight.pack.js
diff --git a/_includes/static/language.svg b/_includes/static/language.svg
new file mode 100644
index 0000000..22c7b16
--- /dev/null
+++ b/_includes/static/language.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2411.2 2794"><style>.st0{fill:#fff}.st1,.st2{fill-rule:evenodd;clip-rule:evenodd}.st2{fill:#fff}</style><g id="Layer_x5F_1_x5F_1"><path d="M1204.6 359.2L271.8 30v2030.1l932.8-301.8z"/><path d="M1182.2 358.1L2150.6 29v2030l-968.4-301.7z" class="st0"/><path d="M30 2415.4l1152.2-384V357.9L30 742z" class="st0"/><path d="M1707.2 2440.7l163.3 268.7 86.1-249.6zM421.7 934.8c-6.1-6 8 49.1 27.6 68.9 34.8 35.1 61.9 39.6 76.4 40.2 32 1.3 71.5-8 94.9-17.8 22.7-9.7 62.4-30 77.5-59.6 3.2-6.3 11.9-17 6.4-43.2-4.2-20.2-17-27.3-32.7-26.2-15.7 1.1-63.2 13.7-86.1 20.8-23 7-70.3 21.4-90.9 25.8-20.5 4.5-65.8-2-73.1-8.9zm581.4 658.9c-9.1-3.3-196.9-81.1-223.6-93.9-21.8-10.5-75.2-33.1-100.4-43.3 70.8-109.2 115.5-191.6 121.5-204.1 11-23 86-169.6 87.7-178.7 1.7-9.1 3.8-42.9 2.2-51-1.7-8.2-29.1 7.6-66.4 20.2-37.4 12.6-108.4 58.8-135.8 64.6-27.5 5.7-115.5 39.1-160.5 54-45 14.9-130.2 40.9-165.2 50.4-35.1 9.5-65.7 10.2-85.3 16.2 0 0 2.6 27.5 7.8 35.7 5.2 8.2 23.7 28.4 45.3 34.1 21.6 5.7 57.3 3.4 73.6-.3 16.3-3.8 44.4-17.5 48.2-23.6 3.8-6.1-2-24.9 4.5-30.6 6.5-5.6 92.2-25.7 124.6-35.4 32.4-10 156.3-52.6 173.1-50.5-5.3 17.7-105 215.1-137.1 274-32.1 58.9-218.6 318-258.3 363.6-30.1 34.7-103.2 123.5-128.5 143.6 6.4 1.8 51.6-2.1 59.9-7.2 51.3-31.6 136.9-138.1 164.4-170.5 81.9-96 153.8-196.8 210.8-283.4h.1c11.1 4.6 100.9 77.8 124.4 94 23.4 16.2 115.9 67.8 136 76.4 20 8.7 97.1 44.2 100.3 32.2 3-12.2-14.2-83.1-23.3-86.5z"/><path d="M569 2572c18 11 35 20 54 29 38 19 81 39 122 54 56 21 112 38 168 51 31 7 65 13 98 18 3 0 92 11 110 11h90c35-3 68-5 103-10 28-4 59-9 89-16 22-5 45-10 67-17 21-6 45-14 68-22 15-5 31-12 47-18 13-6 29-13 44-19 18-8 39-19 59-29 16-8 34-18 51-28 13-7 43-30 59-30 18 0 30 16 30 30 0 29-39 38-57 51-19 13-42 23-62 34-40 21-81 39-120 54-51 19-107 37-157 49-19 4-38 9-57 12-10 2-114 18-143 18h-132c-35-3-72-7-107-12-31-5-64-11-95-18-24-5-50-12-73-19-40-11-79-25-117-40-69-26-141-60-209-105-12-8-13-16-13-25 0-15 11-29 29-29 16 0 48 23 54 26zm582-563L61 2372V764l1090-363v1608zm61-1655v1680c-1 5-3 10-7 15-2 3-6 7-9 8-25 10-1151 388-1166 388-12 0-23-8-29-21 0-1-1-2-1-4V739c2-5 3-12 7-16 8-11 22-13 31-16 17-6 1126-378 1142-378 10 0 32 7 32 25z" class="st1"/><path d="M2120 2017l-907-282V380l907-308v1945zm61-1985v2023c-1 23-17 33-32 33-13 0-107-32-123-37-126-39-253-78-378-117-28-9-57-18-84-27-24-7-50-15-74-23-107-33-216-66-323-102-4-1-14-15-14-18V351c2-5 4-11 9-15 8-9 351-123 486-168 36-13 487-168 501-168 18 0 32 13 32 32z" class="st1"/><path d="M2411.2 2440.7l-1211.7-386.2 5.1-1681.3 1206.6 384z"/><path d="M1800.3 1124.6L1681.4 1412l218.6 66.3-99.7-353.7zM1729 853.2l156.1 47.3 284.4 1025-160.3-48.7-57.6-210.4-331.4-100.4-71.3 171.4-160.4-48.7L1729 853.2z" class="st2"/></g></svg>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index b26b7dc..ea1a103 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -6,10 +6,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
         <title property="og:title">{% if page.lang_title %}{{ page.lang_title }} · {% endif %}{{ site.name }}</title>
         <link href="http://fonts.googleapis.com/css?family=PT+Sans|Roboto+Slab|Droid+Sans+Mono" rel="stylesheet" type="text/css">
-        <link rel="stylesheet" href="{{ site.url }}/style.css">
+        <link rel="stylesheet" href="{{ site.url }}/static/style.css">
 
-        <link rel="icon" type="image/png" href="{{ site.url }}/favicon-32x32.png" sizes="32x32" />
-        <link rel="icon" type="image/png" href="{{ site.url }}/favicon-16x16.png" sizes="16x16" />
+        <link rel="icon" type="image/png" href="{{ site.url }}/static/favicon-32x32.png" sizes="32x32" />
+        <link rel="icon" type="image/png" href="{{ site.url }}/static/favicon-16x16.png" sizes="16x16" />
 
         <meta content="website" property="og:type">
         <meta content="{{ site.url }}" property="og:url">
@@ -31,31 +31,24 @@
 
         <link rel="canonical" href="{{ site.url }}{{ page.url | replace:'index.html',''}}">
         <link rel="alternate" hreflang="x-default" href="{{ site.url }}/">
-        <link rel="alternate" hreflang="en" href="{{ site.url }}/">
-        <link rel="alternate" hreflang="ja" href="{{ site.url }}/ja/">
-        <link rel="alternate" hreflang="zh" href="{{ site.url }}/zh/">
-        <link rel="alternate" hreflang="zh-TW" href="{{ site.url }}/zh-tw/">
-        <link rel="alternate" hreflang="pt-BR" href="{{ site.url }}/pt-br/">
-        <link rel="alternate" hreflang="ru" href="{{ site.url }}/ru/">
-        <link rel="alternate" hreflang="de" href="{{ site.url }}/de/">
+        {% include layout_partials/languages.html rel_alternate=true %}
     </head>
     <body itemscope itemtype="http://schema.org/TechArticle">
         <meta itemprop="wordCount" content="{{ content | number_of_words }}">
         <meta itemprop="about" content="{{ site.description }}">
         <meta itemprop="audience" content="SQL programmers">
         <meta itemprop="license" content="http://creativecommons.org/licenses/by-sa/4.0/">
-        <meta itemprop="version" content="1.0.0">
+        <meta itemprop="version" content="1.0.1">
         <meta itemprop="proficiencyLevel" content="Beginner">
         <meta itemprop="dependencies" content="SQL knowledge">
         <meta itemprop="copyrightHolder" content="Simon Holywell">
-        {% include head.html %}
+        {% include layout_partials/head.html %}
         <main class="article-body wrap" id="content" itemprop="articleBody" lang="{{ page.lang }}">
             {{ content }}
         </main>
-        {% include foot.html %}
+        {% include layout_partials/foot.html %}
         <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
-        <script src="{{ site.url }}/scripts.js"></script>
+        <script src="{{ site.url }}/static/scripts.js"></script>
         <script>
             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/de/index.md b/de/index.md
index 99a2d85..b47ae6f 100644
--- a/de/index.md
+++ b/de/index.md
@@ -2,6 +2,9 @@
 layout: default
 lang: de
 lang_title: SQL-Styleguide
+contributors:
+    - user: AStasyK
+      type: translator
 ---
 
 * TOC
diff --git a/ja/index.md b/ja/index.md
index ab9b0e2..139a298 100644
--- a/ja/index.md
+++ b/ja/index.md
@@ -3,6 +3,9 @@ layout: default
 redirect_from: "/jp"
 lang: ja
 lang_title: SQLスタイルガイド
+contributors:
+    - user: nkurigit
+      type: translator
 ---
 
 * TOC
diff --git a/pt-br/index.md b/pt-br/index.md
index 8b13423..11c5141 100644
--- a/pt-br/index.md
+++ b/pt-br/index.md
@@ -2,6 +2,9 @@
 layout: default
 lang: pt-BR
 lang_title: Guia de Estilo SQL
+contributors:
+    - user: pmarcus93
+      type: translator
 ---
 
 * TOC
diff --git a/ru/index.md b/ru/index.md
index 2bb21f5..e3adf40 100644
--- a/ru/index.md
+++ b/ru/index.md
@@ -2,6 +2,9 @@
 layout: default
 lang: ru
 lang_title: Руководство по стилю SQL
+contributors:
+    - user: denpatin
+      type: translator
 ---
 
 * TOC
diff --git a/favicon-16x16.png b/static/favicon-16x16.png
similarity index 100%
rename from favicon-16x16.png
rename to static/favicon-16x16.png
diff --git a/favicon-32x32.png b/static/favicon-32x32.png
similarity index 100%
rename from favicon-32x32.png
rename to static/favicon-32x32.png
diff --git a/static/language.svg b/static/language.svg
new file mode 100644
index 0000000..22d58da
--- /dev/null
+++ b/static/language.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2411.2 2794" style="enable-background:new 0 0 2411.2 2794;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<g id="Layer_2">
+</g>
+<g id="Layer_x5F_1_x5F_1">
+	<g>
+		<polygon points="1204.6,359.2 271.8,30 271.8,2060.1 1204.6,1758.3 		"/>
+		<polygon class="st0" points="1182.2,358.1 2150.6,29 2150.6,2059 1182.2,1757.3 		"/>
+		<polygon class="st0" points="30,2415.4 1182.2,2031.4 1182.2,357.9 30,742 		"/>
+		<polygon points="1707.2,2440.7 1870.5,2709.4 1956.6,2459.8 		"/>
+		<g>
+			<path d="M421.7,934.8c-6.1-6,8,49.1,27.6,68.9c34.8,35.1,61.9,39.6,76.4,40.2c32,1.3,71.5-8,94.9-17.8
+				c22.7-9.7,62.4-30,77.5-59.6c3.2-6.3,11.9-17,6.4-43.2c-4.2-20.2-17-27.3-32.7-26.2c-15.7,1.1-63.2,13.7-86.1,20.8
+				c-23,7-70.3,21.4-90.9,25.8C474.3,948.2,429,941.7,421.7,934.8z"/>
+			<path d="M1003.1,1593.7c-9.1-3.3-196.9-81.1-223.6-93.9c-21.8-10.5-75.2-33.1-100.4-43.3c70.8-109.2,115.5-191.6,121.5-204.1
+				c11-23,86-169.6,87.7-178.7c1.7-9.1,3.8-42.9,2.2-51c-1.7-8.2-29.1,7.6-66.4,20.2c-37.4,12.6-108.4,58.8-135.8,64.6
+				c-27.5,5.7-115.5,39.1-160.5,54c-45,14.9-130.2,40.9-165.2,50.4c-35.1,9.5-65.7,10.2-85.3,16.2c0,0,2.6,27.5,7.8,35.7
+				c5.2,8.2,23.7,28.4,45.3,34.1c21.6,5.7,57.3,3.4,73.6-0.3c16.3-3.8,44.4-17.5,48.2-23.6c3.8-6.1-2-24.9,4.5-30.6
+				c6.5-5.6,92.2-25.7,124.6-35.4c32.4-10,156.3-52.6,173.1-50.5c-5.3,17.7-105,215.1-137.1,274c-32.1,58.9-218.6,318-258.3,363.6
+				c-30.1,34.7-103.2,123.5-128.5,143.6c6.4,1.8,51.6-2.1,59.9-7.2c51.3-31.6,136.9-138.1,164.4-170.5
+				c81.9-96,153.8-196.8,210.8-283.4h0.1c11.1,4.6,100.9,77.8,124.4,94c23.4,16.2,115.9,67.8,136,76.4c20,8.7,97.1,44.2,100.3,32.2
+				C1029.4,1668,1012.2,1597.1,1003.1,1593.7z"/>
+		</g>
+		<path class="st1" d="M569,2572c18,11,35,20,54,29c38,19,81,39,122,54c56,21,112,38,168,51c31,7,65,13,98,18c3,0,92,11,110,11h90
+			c35-3,68-5,103-10c28-4,59-9,89-16c22-5,45-10,67-17c21-6,45-14,68-22c15-5,31-12,47-18c13-6,29-13,44-19c18-8,39-19,59-29
+			c16-8,34-18,51-28c13-7,43-30,59-30c18,0,30,16,30,30c0,29-39,38-57,51c-19,13-42,23-62,34c-40,21-81,39-120,54
+			c-51,19-107,37-157,49c-19,4-38,9-57,12c-10,2-114,18-143,18h-132c-35-3-72-7-107-12c-31-5-64-11-95-18c-24-5-50-12-73-19
+			c-40-11-79-25-117-40c-69-26-141-60-209-105c-12-8-13-16-13-25c0-15,11-29,29-29C531,2546,563,2569,569,2572z"/>
+		<path class="st1" d="M1151,2009L61,2372V764l1090-363V2009z M1212,354v1680c-1,5-3,10-7,15c-2,3-6,7-9,8c-25,10-1151,388-1166,388
+			c-12,0-23-8-29-21c0-1-1-2-1-4V739c2-5,3-12,7-16c8-11,22-13,31-16c17-6,1126-378,1142-378C1190,329,1212,336,1212,354z"/>
+		<path class="st1" d="M2120,2017l-907-282V380l907-308V2017z M2181,32v2023c-1,23-17,33-32,33c-13,0-107-32-123-37
+			c-126-39-253-78-378-117c-28-9-57-18-84-27c-24-7-50-15-74-23c-107-33-216-66-323-102c-4-1-14-15-14-18V351c2-5,4-11,9-15
+			c8-9,351-123,486-168c36-13,487-168,501-168C2167,0,2181,13,2181,32z"/>
+		<polygon points="2411.2,2440.7 1199.5,2054.5 1204.6,373.2 2411.2,757.2 		"/>
+		<g>
+			<path class="st2" d="M1800.3,1124.6L1681.4,1412l218.6,66.3L1800.3,1124.6z M1729,853.2l156.1,47.3l284.4,1025l-160.3-48.7
+				l-57.6-210.4L1620.2,1566l-71.3,171.4l-160.4-48.7L1729,853.2z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/scripts.js b/static/scripts.js
similarity index 53%
rename from scripts.js
rename to static/scripts.js
index 10be517..2e20ca9 100644
--- a/scripts.js
+++ b/static/scripts.js
@@ -2,34 +2,71 @@
 layout: nil
 ---
 
-{% include highlight.pack.js %}
+{% include static/highlight.pack.js %}
 hljs.initHighlightingOnLoad();
 
-{% include anchor.min.js %}
+{% include static/anchor.min.js %}
 anchors.add('h2,h3,h4,h5,h6');
 
-/*
- * ScrollTo code
- */
-$(document).ready(function(){
-    $('a[href^="#"]').on('click',function (e) {
-        e.preventDefault();
+function offset(el) {
+    var rect = el.getBoundingClientRect(),
+    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
+    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
+}
 
-        var target = this.hash.replace(/:/g,'\\$&');
-        var dest = 0;
-        if(target) {
-            var $target = $(target);
-            if($target.length) {
-                dest = $target.offset().top;
-            }
+function scrollTo(to, duration) {
+    var start = document.documentElement.scrollTop,
+        change = to - start,
+        currentTime = 0,
+        increment = 20;
+        
+    var animateScroll = function(){        
+        currentTime += increment;
+        var val = Math.easeInOutQuad(currentTime, start, change, duration);
+        document.documentElement.scrollTop = val;
+        if(currentTime < duration) {
+            setTimeout(animateScroll, increment);
         }
+    };
+    animateScroll();
+}
 
-        $('html, body').stop().animate({
-            'scrollTop': dest
-        }, 900, 'swing', function () {
-            window.location.hash = target;
-        });
+//t = current time
+//b = start value
+//c = change in value
+//d = duration
+Math.easeInOutQuad = function (t, b, c, d) {
+  t /= d/2;
+	if (t < 1) return c/2*t*t + b;
+	t--;
+	return -c/2 * (t*(t-2) - 1) + b;
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+    /*
+     * translation jump menu
+     */
+    document.getElementById('language-drop').addEventListener('change', e => {
+        var selected = e.target.selectedOptions[0].value + '/';
+        if (selected === 'en/') selected = '';
+        window.location.href = `{{ site.url }}/${selected}`;
     });
+
+    /*
+     * ScrollTo code
+     */
+    document.querySelectorAll('a[href^="#"]')
+        .forEach(x => x.addEventListener('click', e => {
+            e.preventDefault();
+            var target = decodeURI(e.target.hash.replace(/:/g,'\\$&'));
+            var dest = 0;
+            if(target && target.length) {
+                dest = offset(document.querySelector(target)).top;
+            }
+
+            scrollTo(dest, 900);
+        }));
 });
 
 // http://exisweb.net/link-tracking-universal-analytics
diff --git a/style.css b/static/style.css
similarity index 89%
rename from style.css
rename to static/style.css
index 82e4f33..978810b 100644
--- a/style.css
+++ b/static/style.css
@@ -104,6 +104,19 @@ a:hover {
     color: inherit;
 }
 
+#translation-bar .language-ico { display: inline }
+#translation-bar .language-ico svg {
+    width: 25px;
+    margin-bottom: -10px;
+    fill: {{ primary_colour }};
+    margin-left: 10px;
+}
+#translation-bar .language-drop {
+    height: 25px;
+    color: #999;
+    background-color: #222;
+}
+
 header.top {
     background: {{ primary_colour }};
     color: #333;
@@ -118,6 +131,10 @@ header.top p.author {
     margin-top: 0;
 }
 
+header.top p.translator {
+    font-size: smaller;
+}
+
 header.top a {
     color: #333;
     border-color: #333;
@@ -202,7 +219,7 @@ pre code {
     overflow-y: auto;
 }
 
-{% include highlight.hybrid.css %}
+{% include static/highlight.hybrid.css %}
 
 .anchorjs-link {
     color: {{ primary_colour }};
diff --git a/zh-tw/index.md b/zh-tw/index.md
index c0d9a43..f54e025 100644
--- a/zh-tw/index.md
+++ b/zh-tw/index.md
@@ -2,6 +2,11 @@
 layout: default
 lang: zh-TW
 lang_title: SQL樣式指南
+contributors:
+    - user: Leon0824
+      type: translator
+    - user: nimula
+      type: correction
 ---
 
 * TOC
diff --git a/zh/index.md b/zh/index.md
index a740490..24c18b0 100644
--- a/zh/index.md
+++ b/zh/index.md
@@ -2,6 +2,11 @@
 layout: default
 lang: zh
 lang_title: SQL样式指南
+contributors:
+    - user: wontoncoder
+      type: translator
+    - user: penghou620
+      type: correction
 ---
 
 * TOC