tidy up language switching

css/index.scss

@@ -5,7 +5,7 @@ ul#i18n li {
 	list-style: none;
 	width: 3em;
 	font-size: 0.7em;
-	background-color: #505050;
+	background-color: #202020;
 	text-align: center;
 	margin-left: 0;
 	border: 0.05em solid #555555;
@@ -16,13 +16,13 @@ ul#i18n li {
 	overflow: hidden;
 	display: flex;
 	float: right;
-	box-shadow: inset 0 0 0.1em 0.1em rgba(128,128,128,0.75);
+	box-shadow: inset 0 0 0.4em 0.4em rgba(128,128,128,0.75);
 	margin: 0 0 0.75em 0.75em;
 	padding: 0;
 }
 
 #i18n li.active {
-	box-shadow: 0 0 0.1em 0.1em rgba(16,16,16,0.85);
+	box-shadow: 0 0 0.4em 0.4em rgba(16,16,16,0.85);
 	background-color: #606060;
 	z-index: 1000;
 	border-radius: 0.1em;
@@ -36,3 +36,7 @@ ul#i18n li {
 .inactive {
 	display: none;
 }
+
+.jp {
+	margin: none;
+}

index.md

@@ -2,24 +2,19 @@
 title: About Me
 pagestyle: index
 script: index
-description: Who am I?
+description: Call me Muru.
 ---
 
 - {:#en .active} En
-- {:#ml} മ
 - {:#jp} 日
 {:#i18n}
 
 Call me Muru.
 {:.en .active}
-
-<span lang="ja" class="jp inactive" markdown="1"> ムッラセレル ムルケシュと申します。
+<span lang="ja" markdown="1"> ムッラセレル ムルケシュと申します。
 ムルと呼んでください。
 宜しくお願い致します。</span>
-
-<span lang="ml" class="ml inactive" markdown="1">
-എന്റെ പേര് മുരുകേഷ്. എന്നെ മുരു എന്ന് വിളിക്കൂ..
-</span>
+{: .jp .inactive}
 
 I know English, മലയാളം (Malayalam), हिंदी  (Hindi),	日本語 (Japanese) and a smattering of  मराठी  (Marathi).
 

js/index.js

 (
  function(m) {
-	 var currentButton = 'en';
-	 var swapClass = function (classList, del, add) {
-	 }
-	 m.SwitchTo = function (id) {
-		if (id == currentButton) {
-			return;
-		}
-		var next_el = document.getElementById(id);
-		var curr_el = document.getElementById(currentButton);
-		next_el.className = 'active';
-		curr_el.className = 'inactive';
-		to_hide = document.getElementsByClassName(currentButton);
-		to_show = document.getElementsByClassName(id);
-			Array.prototype.forEach.call(to_hide, function(elem){
-			elem.classList.remove('active');
-			elem.classList.add('inactive');
-		});
-		Array.prototype.forEach.call(to_show, function(elem){
-			elem.classList.remove('inactive');
-			elem.classList.add('active');
-		});
+   var currentButton = 'en';
+   var swapClass = function (classList, del, add) {
+   }
+   m.SwitchTo = function (id) {
+    if (id == currentButton) {
+      return;
+    }
+    var next_el = document.getElementById(id);
+    var curr_el = document.getElementById(currentButton);
+    next_el.className = 'active';
+    curr_el.className = 'inactive';
+    to_hide = document.getElementsByClassName(currentButton);
+    to_show = document.getElementsByClassName(id);
+      Array.prototype.forEach.call(to_hide, function(elem){
+      elem.classList.remove('active');
+      elem.classList.add('inactive');
+    });
+    Array.prototype.forEach.call(to_show, function(elem){
+      elem.classList.remove('inactive');
+      elem.classList.add('active');
+    });
 
-		currentButton = id;
-	 };
-	 window.onload = function () {
-	 	document.getElementById('i18n').childNodes.forEach(
-			function(elem) {
-				if (elem.tagName == "LI") {
-					console.log(elem.id);
-					elem.onclick = function() {
-						m.SwitchTo(elem.id);
-					};
-				}
-			}
-		 );
-	 };
+    currentButton = id;
+   };
+   window.onload = function () {
+    document.getElementById('i18n').childNodes.forEach(
+      function(elem) {
+        if (elem.tagName == "LI") {
+          console.log(elem.id);
+          elem.onclick = function() {
+            m.SwitchTo(elem.id);
+          };
+        }
+      }
+     );
+   };
  }(window.M = window.M || {})
- );
+);