更新 layout #1

source/javascripts/all.js

@@ -19,7 +19,7 @@ window.addEventListener('load', function() {
 
 // macho.js
 
-$('p').macho();
+$('.content p').macho();
 
 // justfont
 

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()
 

source/javascripts/baseline.js

@@ -35,6 +35,9 @@
      */
 
     function _setBase (element) {
+
+      if (!element) return;
+
       var height = element.offsetHeight,
           current, old;
 

source/javascripts/modernizr.js

@@ -1 +1,2 @@
 //= require modernizr/modernizr.js
+//= require modernizr/feature-detects/css-vwunit.js

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>

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"

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
-
-

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/'

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 ----- //

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) {