diff --git a/source/javascripts/all.js b/source/javascripts/all.js
index 1f112fa..5b5eee1 100644
--- a/source/javascripts/all.js
+++ b/source/javascripts/all.js
@@ -19,7 +19,7 @@ window.addEventListener('load', function() {
 
 // macho.js
 
-$('p').macho();
+$('.content p').macho();
 
 // justfont
 
diff --git a/source/javascripts/app.coffee b/source/javascripts/app.coffee
index fd66b92..bbd0d16 100644
--- a/source/javascripts/app.coffee
+++ b/source/javascripts/app.coffee
@@ -13,8 +13,13 @@ showHero = (id) ->
   # $('.hero .item').css 'display', 'none'
   $('.hero .item:nth-child(' + id + ')').css? 'opacity', '0'
   $('.hero .item:nth-child(' + id + ')').css? 'display', 'block'
-  $('#hero-trigger').attr 'href', $('.hero .item:nth-child(' + id + ')').attr? 'data-link'
-  $('#hero-trigger').attr 'target', '_blank'
+  link = $('.hero .item:nth-child(' + id + ')').attr? 'data-link'
+  if link != ''
+    $('#hero-trigger').attr 'href', link
+    $('#hero-trigger').attr 'target', '_blank'
+  else
+    $('#hero-trigger').attr 'href', '#'
+    $('#hero-trigger').attr 'target', ''
   setTimeout ->
     $('.hero .item:nth-child(' + id + ')').css? 'opacity', 'auto'
   , 10
@@ -33,10 +38,21 @@ refreshViev = () ->
   nvh = $('.main-menu').height() + 18
   cmh = nvh if cmh < nvh
   $('.content').css 'min-height', cmh
+  # 如果 pull-right 撞上 Nav ...
+  navBottomPosition = $('.main-menu').offset().top + $('.main-menu').height()
+  $('.pull-left').each ->
+    if $(this).offset().top < navBottomPosition + 100
+      $(this).addClass('not-raised')
+    else
+      $(this).removeClass('not-raised')
   # 重新調整基線旋律
   refreshBaseline()
   # 為包著圖片的元素加上 class
   $('.content p:has(img), .content div:has(img)').addClass 'img'
+  # CSS3 Fallbacks (Modernizr feature-detects include 在 modernizr.js)
+  if not Modernizr.cssvwunit
+    1
+  # ...
 
 refreshViev()
 
diff --git a/source/javascripts/baseline.js b/source/javascripts/baseline.js
index 2149cbb..35cae0e 100644
--- a/source/javascripts/baseline.js
+++ b/source/javascripts/baseline.js
@@ -35,6 +35,9 @@
      */
 
     function _setBase (element) {
+
+      if (!element) return;
+
       var height = element.offsetHeight,
           current, old;
 
diff --git a/source/javascripts/modernizr.js b/source/javascripts/modernizr.js
index 3d4f08f..b17e0a2 100644
--- a/source/javascripts/modernizr.js
+++ b/source/javascripts/modernizr.js
@@ -1 +1,2 @@
 //= require modernizr/modernizr.js
+//= require modernizr/feature-detects/css-vwunit.js
diff --git a/source/partials/_fb-likeBox.erb b/source/partials/_fb-likeBox.erb
new file mode 100644
index 0000000..925bce6
--- /dev/null
+++ b/source/partials/_fb-likeBox.erb
@@ -0,0 +1 @@
+<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FGuoLiTaiWanKeJiDaXueDianZiXueShiBanXiXueHui&amp;width&amp;height=62&amp;colorscheme=dark&amp;show_faces=false&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=132913846761101" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:62px;" allowTransparency="true"></iframe>
diff --git a/source/partials/_footer.haml b/source/partials/_footer.haml
index 5fb0161..8fa201f 100644
--- a/source/partials/_footer.haml
+++ b/source/partials/_footer.haml
@@ -1,3 +1,16 @@
-%ul
-  %li this an that
-  = partial "partials/nav"
+%nav.footer-nav
+  %h1 Footer Navigation
+  %ul
+    = partial "partials/nav"
+    %li
+      %a{:href => 'https://www.facebook.com/GuoLiTaiWanKeJiDaXueDianZiXueShiBanXiXueHui', :target => '_blank'}
+        %small Facebook
+%article.about{'itemscope' => '', 'itemtype' => 'http://data-vocabulary.org/Organization'}
+  %h1{'itemprop' => 'name'} 國立臺灣科技大學電資學士班
+  %p{'itemprop' => 'address', 'itemscope' => '', 'itemtype' => 'http://data-vocabulary.org/Address'}
+    %span{'itemprop' => 'country-name'} 臺灣
+    %span{'itemprop' => 'postal-code'} 106
+    %span{'itemprop' => 'region'} 台北市
+    %span{'itemprop' => 'street-address'} 大安區基隆路四段 43 號 電資館
+  %p{'itemprop' => 'url'} ece.ntust.co
+.fb-likebox= partial "partials/fb-likeBox"
diff --git a/source/partials/_hero.haml b/source/partials/_hero.haml
index 95b2608..4344d9d 100644
--- a/source/partials/_hero.haml
+++ b/source/partials/_hero.haml
@@ -1,9 +1,9 @@
 -data.heroes.each do |item|
+  -data_link = item.link
+  -data_link = '#' if !data_link
   .item{:style => 'display: none; background-image: url(\'/' + images_dir.to_s + '/' + item.img + '\')', 'data-link' => item.link}
     .inner
       .title= item.title
       .sub-title= item.subTitle
       -if item.credit
         .credit= item.credit
-
-
diff --git a/source/partials/_nav.haml b/source/partials/_nav.haml
index 1b6d130..910b53b 100644
--- a/source/partials/_nav.haml
+++ b/source/partials/_nav.haml
@@ -1,8 +1,9 @@
-= nav_link '首頁<small>Home</small>', '/'
-= nav_link '系介紹<small>About ECE</small>', '/about/'
-= nav_link '家族直屬<small>Family</small>', '/family/'
-= nav_link '系學會<small>SA</small>', '/SA/'
-= nav_link '活動<small>Events</small>', '/events/'
-= nav_link '經驗談<small>Blog</small>', '/articles/'
-= nav_link '學生專區<small>For Students</small>', '/ece/'
-= nav_link '測試<small>For test</small>', '/test_page/'
+= nav_link '<span>首頁</span><small>Home</small>', '/'
+= nav_link '<span>系介紹</span><small>About ECE</small>', '/about/'
+= nav_link '<span>家族直屬</span><small>Family</small>', '/family/'
+= nav_link '<span>系學會</span><small>SA</small>', '/SA/'
+= nav_link '<span>活動</span><small>Events</small>', '/events/'
+= nav_link '<span>經驗談</span><small>Blog</small>', '/articles/'
+= nav_link '<span>學生專區</span><small>For Students</small>', '/ece/'
+= nav_link '<span>電資學院</span><small>ECCES</small>', 'http://www.ceecs.ntust.edu.tw/'
+= nav_link '<span>測試</span><small>For test</small>', '/test_page/'
diff --git a/source/stylesheets/core/_content.scss b/source/stylesheets/core/_content.scss
index 08fcd58..eee0cb1 100644
--- a/source/stylesheets/core/_content.scss
+++ b/source/stylesheets/core/_content.scss
@@ -32,11 +32,18 @@ p, blockquote, code, dl, ol, ul {
 
 #{headings(1,2)} {
 	overflow: hidden;
+	// font-weight: 700;
 	font-family: "xingothic-tc-w8", $base-fontFamily;
+
+	small {
+		// font-weight: 600;
+		font-family: "xingothic-tc-w6", $base-fontFamily;
+	}
 }
 
 #{headings(3,6)} {
 	overflow: hidden;
+	// font-weight: 600;
 	font-family: "xingothic-tc-w6", $base-fontFamily;
 }
 
@@ -116,6 +123,7 @@ blockquote {
 }
 
 strong {
+	// font-weight: 600;
 	font-family: "xingothic-tc-w6", $base-fontFamily;
 }
 
@@ -131,13 +139,25 @@ code, .code, .content-box, %content-box {
 //   輔助元素
 // -------------------------------------
 
+%inverse {
+	background-color: $black;
+	color: $white;
+
+	* { color: $white; }
+}
+
 .lazyload { // 應該移動到 moudle?
 	display: none;
 }
 
 .c-light, %c-light {
 	font-family: "xingothic-tc-w3", $base-fontFamily;
-	font-weight: 300;
+	// font-weight: 300;
+}
+
+.c-avenir, %c-avenir {
+	font-family: "Avenir Next", "Avenir", "xingothic-tc-w3", $base-fontFamily;
+	// font-weight: 300;
 }
 
 p.img {
@@ -151,9 +171,14 @@ p.img {
 //   -> 印刷品般的漢字網頁排版框架
 // -------------------------------------
 
-// ----- 不會影響垂直旋律的強調點 ----- //
+// ----- 漢拉間隙不要打亂垂直旋律 ----- //
+html.han-la hanla:after {
+	line-height: 0.1px;
+}
 
 em:lang(zh), em:lang(ja) {
+
+	// ----- 不會影響垂直旋律的強調點 ----- //
 	@include experimental(text-emphasis, none, -moz, -webkit, -o, -ms, -khtml, official);
 
 	.char.cjk {
@@ -172,6 +197,16 @@ em:lang(zh), em:lang(ja) {
 	.char.latin {
 		font-style: italic;
 	}
+
+	// ----- 首行清單不要縮那麼多 ----- //
+	h1 + ol, h1 + ul,
+	h2 + ol, h2 + ul,
+	h3 + ol, h3 + ul,
+	h4 + ol, h4 + ul,
+	h5 + ol, h5 + ul,
+	h6 + ol, h6 + ul {
+		padding-left: 1em;
+	}
 }
 
 // ----- poem-like ----- //
diff --git a/source/stylesheets/core/_helpers.scss b/source/stylesheets/core/_helpers.scss
index 64d754c..dee2b58 100644
--- a/source/stylesheets/core/_helpers.scss
+++ b/source/stylesheets/core/_helpers.scss
@@ -49,6 +49,12 @@
 //   Functions
 // -------------------------------------
 
+// ----- strip units ----- //
+
+@function strip-units($number) {
+	@return $number / ($number * 0 + 1);
+}
+
 // ----- em ----- //
 
 @function em($target, $context: $base-fontSize) {
diff --git a/source/stylesheets/core/_layout.scss b/source/stylesheets/core/_layout.scss
index 119dac4..ea87b43 100644
--- a/source/stylesheets/core/_layout.scss
+++ b/source/stylesheets/core/_layout.scss
@@ -56,6 +56,7 @@ body {
 .container {
 	@include container($total-columns, $tablet, $desktop);
 	@include pie-clearfix;
+	position: relative;
 
 	// ----- Tablet + ----- //
 	@include at-breakpoint($tablet) {
@@ -66,23 +67,12 @@ body {
 
 		footer {
 			position: relative;
-			z-index: 10;
+			z-index: 2;
 
 			> * {
 				position: relative;
 				z-index: 10;
 			}
-
-			&::after {
-				content: " ";
-				position: absolute;
-				z-index: -1;
-				width: $infinite;
-				height: 100%;
-				background-color: #19f;
-				top: 0;
-				left: -9999px;
-			}
 		}
 
 		nav {
@@ -161,7 +151,120 @@ header {
 // -------------------------------------
 
 footer {
+	@extend %inverse;
+	@extend %c-avenir;
+	color: darken($white, 18%);
+	font-size: 90%;
+	text-align: center;
+	padding-bottom: 28px;
+
+	* {
+		color: darken($white, 18%);
+		@include transition-property(color, text-shadow);
+		@include transition-delay(0s, 0s);
+	}
+
+	li:hover {
+		color: $white;
+		text-shadow: 0 0 6px $white;
+	}
+
+	> .footer-nav {
+
+		h1 {
+			display: none;
+		}
+
+		ul {
+			padding: 0;
+			margin: 0;
+			text-align: center;
+		}
+
+		li {
+			display: inline-block;
+
+			a > * {
+				display: none;
+			}
+
+			a > small {
+				display: inline;
+				font-size: 100%;
+			}
+		}
+	}
+
+	> article.about, > article.about * {
+		@extend %c-avenir;
+		color: darken($white, 45%);
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 16px !important;
+		padding: 0;
+		margin: 0;
+	}
+
+	> .fb-likebox {
+		@include opacity(.6);
+		display: none;
+	}
+
+	@include at-breakpoint($tablet) {
+
+		> *, > .footer-nav {
+			@include span-columns($tablet-columns);
+		}
+
+		> .footer-nav {
+			padding: 28px 0 24px;
+
+			li {
+
+				&::before {
+					content: " ";
+					font-weight: 300;
+					width: 15px;
+					margin: 0 8px;
+					height: 0.34em;
+					display: inline-block;
+					border-top: 1px solid darken($white, 60%);
+					@include transition-property(border);
+					@include transition-delay(0.5s);
+					@include transition-duration(0.2s);
+				}
+
+				&:first-child::before {
+					content: "";
+					display: none;
+				}
+
+				&:hover::before, &:hover + li::before {
+					border-top: 1px solid darken($white, 8%);
+				}
+			}
+		}
+	}
+
+	@include at-breakpoint($desktop) {
+
+		> *, > .footer-nav {
+			@include span-columns($desktop-columns);
+		}
+	}
 
+	// ----- Full Background ----- //
+	&::before {
+		content: " ";
+		position: absolute;
+		z-index: -1;
+		width: $infinite;
+		height: 100%;
+		background-color: $black;
+		top: 0;
+		left: - $infinite/2;
+		@include box-shadow($content-shadow);
+	}
 }
 
 // -------------------------------------
@@ -236,6 +339,10 @@ html:lang(jp) nav.main-menu {
 				left: 0;
 			}
 
+			&.cross-domin::before {
+				background-color: $green;
+			}
+
 			&:hover {
 				background-color: rgba(0,0,0, .1);
 			}
@@ -356,6 +463,10 @@ html:lang(jp) nav.main-menu {
 
 .content {
 
+	h1 {
+		border-bottom: 1px solid rgba(0,0,0, .18);
+	}
+
 	// ----- Tablet + ----- //
 	@include respond-to($tablet-min-width) {
 
@@ -363,11 +474,11 @@ html:lang(jp) nav.main-menu {
 		overflow: visible;
 		background-color: $content-bgc;
 		margin-top: $base-line-height/2;
-		padding-top: $base-line-height/2;
+		padding-top: strip-units($header-height) % strip-units($base-line-height) + $base-line-height/2;
 		z-index: 5;
 
 		&::before {
-			@include box-shadow(0 0 18px rgba($black, .7));
+			@include box-shadow($content-shadow);
 			content: " ";
 			position: absolute;
 			background-color: $content-bgc;
@@ -391,7 +502,7 @@ html:lang(jp) nav.main-menu {
 		overflow: visible;
 		background-color: transparent;
 		margin-top: 0;
-		padding-top: $base-line-height;
+		padding-top: $base-line-height*2 - (strip-units($header-height) % strip-units($base-line-height));
 		z-index: 5;
 
 		&::before {
@@ -464,6 +575,11 @@ html:lang(jp) nav.main-menu {
 			margin-right: - space(1, 8);
 			padding-right: 48px;
 		}
+
+		.pull-left.not-raised {
+			@include span-columns(4, 8);
+			margin-left: 0;
+		}
 	}
 
 	// ----- XL Desktop + ----- //
@@ -486,7 +602,7 @@ html:lang(jp) nav.main-menu {
 	.item {
 		@include transition-property(opacity, filter, background-position);
 		@include transition-duration(.5s, .5s, .5s);
-		@include transition-delay(0s, 0s, 1.4s);
+		@include transition-delay(0s, 0s, 0s);
 		position: fixed;
 		width: 100%;
 		height: 100%;
@@ -494,6 +610,7 @@ html:lang(jp) nav.main-menu {
 		background-position: 50% 83%;
 		opacity: .28;
 		@include filter(grayscale(36%));
+		@include filter(none !important);
 
 		.inner {
 			@include container($total-columns, $tablet, $desktop);
@@ -570,12 +687,6 @@ html:lang(jp) nav.main-menu {
 	}
 }
 
-body.index .hero, #hero-trigger:hover ~ .hero {
-	.item {
-		background-position: 50% 60%;
-	}
-}
-
 // ----- 背景 ----- //
 
 // .wrapper::before {
@@ -632,13 +743,18 @@ body {
 body.non-touch {
 
 	#hero-trigger ~ .container {
-		@include transition-property(opacity);
-		@include transition-delay(.8s);
-		@include transition-duration(1.4s);
+		@include transition-property(opacity, left);
+		@include transition-delay(0s, 0s);
+		@include transition-duration(1.4s, 1.4s);
+		left: 0;
 	}
 
 	#hero-trigger:hover ~ .container {
 		@include opacity(0);
+		@include transition-property(opacity, left);
+		@include transition-delay(.8s, .8s);
+		@include transition-duration(1.4s, 1.4s);
+		left: -1200px;
 	}
 
 	#hero-trigger:hover ~ .hero {
@@ -647,7 +763,11 @@ body.non-touch {
 
 		.item {
 			opacity: 1 !important;
+			background-position: 50% 60%;
 			@include filter(grayscale(0%) !important);
+			@include transition-property(opacity, filter, background-position);
+			@include transition-duration(.5s, .5s, .5s);
+			@include transition-delay(0s, 0s, 1.4s);
 		}
 	}
 }
diff --git a/source/stylesheets/core/_settings.scss b/source/stylesheets/core/_settings.scss
index 829076a..bd4a3a0 100644
--- a/source/stylesheets/core/_settings.scss
+++ b/source/stylesheets/core/_settings.scss
@@ -67,6 +67,7 @@ $header-height: 280px;
 $index-header-height: 72vh;
 $index-header-height-fallback: 460px;
 $container-maxWidth: 1200px;
+$content-shadow: 0 0 18px rgba($black, .7);
 
 // ----- Responsive Breakpoints ----- //