Style css adjust

app/assets/javascripts/ddscrollspy.js

@@ -0,0 +1,225 @@
+/*
+* DD ScrollSpy Menu Script (c) Dynamic Drive (www.dynamicdrive.com)
+* Last updated: Aug 1st, 14'
+* Visit http://www.dynamicdrive.com/ for this script and 100s more.
+*/
+
+// Aug 1st, 14': Updated to v1.2, which supports showing a progress bar inside each menu item (except in iOS devices). Other minor improvements.
+
+if (!Array.prototype.filter){
+  Array.prototype.filter = function(fun /*, thisp */){
+    "use strict";
+
+    if (this == null)
+      throw new TypeError();
+
+    var t = Object(this);
+    var len = t.length >>> 0;
+    if (typeof fun != "function")
+      throw new TypeError();
+
+    var res = [];
+    var thisp = arguments[1];
+    for (var i = 0; i < len; i++){
+      if (i in t){
+        var val = t[i]; // in case fun mutates this
+        if (fun.call(thisp, val, i, t))
+          res.push(val);
+      }
+    }
+
+    return res;
+  };
+}
+
+(function($){
+
+	var defaults = {
+		spytarget: window,
+		scrolltopoffset: 0,
+		scrollbehavior: 'smooth',
+		scrollduration: 500,
+		highlightclass: 'selected',
+		enableprogress: '',
+		mincontentheight: 30
+	}
+
+	var isiOS = /iPhone|iPad|iPod/i.test(navigator.userAgent) // detect iOS devices
+
+	function inrange(el, range, field){ // check if "playing field" is inside range
+		var rangespan = range[1]-range[0], fieldspan = field[1]-field[0]
+		if ( (range[0]-field[0]) >= 0 && (range[0]-field[0]) < fieldspan ){ // if top of range is on field
+			return true
+		}
+		else{
+			if ( (range[0]-field[0]) <= 0 && (range[0]+rangespan) > field[0] ){ // if part of range overlaps field
+				return true
+			}
+		}
+		return false
+	}
+
+	$.fn.ddscrollSpy = function(options){
+		var $window = $(window)
+		var $body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
+
+
+		return this.each(function(){
+			var o = $.extend({}, defaults, options)
+			o.enableprogress = (isiOS)? '' : o.enableprogress // disable enableprogress in iOS
+			var targets = [], curtarget = ''
+			var cantscrollpastindex = -1 // index of target content that can't be scrolled past completely when scrollbar is at the end of the doc
+			var $spytarget = $( o.spytarget ).eq(0)
+			var spyheight = $spytarget.outerHeight()
+			var spyscrollheight = (o.spytarget == window)? $body.get(0).scrollHeight : $spytarget.get(0).scrollHeight
+			var $menu = $(this)
+			var totaltargetsheight = 0 // total height of target contents
+			function spyonmenuitems($menu){
+				var $menuitems = $menu.find('a[href^="#"]')
+				targets = []
+				curtarget = ''
+				totaltargetsheight = 0
+				$menuitems.each(function(i){
+					var $item = $(this)
+					var $target = $( $item.attr('href') )
+					var target = $target.get(0)
+					var $progress = null // progress DIV that gets dynamically added inside menu A element if o.enableprogress enabled
+					if ($target.length == 0) // if no matching links found
+						return true
+					$item
+						.off('click.goto')
+						.on('click.goto', function(e){
+							if ( o.spytarget == window && (o.scrollbehavior == 'jump' || !history.pushState))
+								window.location.hash = $item.attr('href')
+							if (o.scrollbehavior == 'smooth' || o.scrolltopoffset !=0){
+								var $scrollparent = (o.spytarget == window)? $body : $spytarget
+								var addoffset = 1 // add 1 pixel to scrollTop when scrolling to an element to make sure the browser always returns the correct target element (strange bug)
+								if (o.scrollbehavior == 'smooth' && (history.pushState || o.spytarget != window)){
+									$scrollparent.animate( {scrollTop: targets[i].offsettop + addoffset}, o.scrollduration, function(){
+										if (o.spytarget == window && history.pushState){
+											//history.pushState(null, null, $item.attr('href'))
+										}
+									})
+								}
+								else{
+									$scrollparent.prop('scrollTop', targets[i].offsettop + addoffset)
+								}
+								e.preventDefault()
+							}
+						})
+					if (o.enableprogress){ // if o.enableprogress enabled
+						if ($item.find('div.' + o.enableprogress).length == 0){ //if no progress DIV found inside menu item
+							$item.css({position: 'relative', overflow: 'hidden'}) // add some required style to parent A element
+							$('<div class="' + o.enableprogress + '" style="position:absolute; left: -100%" />').appendTo($item)
+						}
+						$progress = $item.find('div.' + o.enableprogress)
+					}
+					var targetoffset = (o.spytarget == window)? $target.offset().top : (target.offsetParent == o.spytarget)? target.offsetTop : target.offsetTop - o.spytarget.offsetTop
+					targetoffset +=  o.scrolltopoffset
+					var targetheight = ( parseInt($target.data('spyrange')) > 0 )? parseInt($target.data('spyrange')) : ( $target.outerHeight() || o.mincontentheight)
+					var offsetbottom = targetoffset + targetheight
+					if (cantscrollpastindex == -1 && offsetbottom > (spyscrollheight - spyheight)){ // determine index of first target which can't be scrolled past
+						cantscrollpastindex = i
+					}
+					targets.push( {$menuitem: $item, $des: $target, offsettop: targetoffset, height: targetheight, $progress: $progress, index: i} )
+				})
+				if (targets.length > 0)
+					totaltargetsheight = targets[targets.length-1].offsettop + targets[targets.length-1].height
+			}
+
+			function highlightitem(){
+				if (targets.length == 0)
+					return
+				var prevtarget = curtarget
+				var scrolltop = $spytarget.scrollTop()
+				var cantscrollpasttarget = false
+				var shortlist = targets.filter(function(el, index){ // filter target elements that are currently visible on screen
+					return inrange(el, [el.offsettop, el.offsettop + el.height], [scrolltop, scrolltop + spyheight])
+				})
+				if (shortlist.length > 0){
+					curtarget = shortlist.shift() // select the first element that's visible on screen
+					if (prevtarget && prevtarget != curtarget)
+						prevtarget.$menuitem.removeClass(o.highlightclass)
+					if (!curtarget.$menuitem.hasClass(o.highlightclass)) // if there was a previously selected menu link and it's not the same as current
+						curtarget.$menuitem.addClass(o.highlightclass) // highlight its menu item
+					if (curtarget.index >= cantscrollpastindex && scrolltop >= (spyscrollheight - spyheight)){ // if we're at target that can't be scrolled past and we're at end of document
+						if (o.enableprogress){ // if o.enableprogress enabled
+							for (var i=0; i<targets.length; i++){ // highlight everything
+								targets[i].$menuitem.find('div.' + o.enableprogress).css('left', 0)
+							}
+						}
+						curtarget.$menuitem.removeClass(o.highlightclass)
+						curtarget = targets[targets.length-1]
+						if (!curtarget.$menuitem.hasClass(o.highlightclass))
+							curtarget.$menuitem.addClass(o.highlightclass)
+						return
+					}
+					if (o.enableprogress){ // if o.enableprogress enabled
+						var scrollpct = ((scrolltop-curtarget.offsettop) / curtarget.height) * 100
+						curtarget.$menuitem.find('div.' + o.enableprogress).css('left', -100 + scrollpct + '%')
+						for (var i=0; i<targets.length; i++){
+							if (i < curtarget.index){
+								targets[i].$menuitem.find('div.' + o.enableprogress).css('left', 0)
+							}
+							else if (i > curtarget.index){
+								targets[i].$menuitem.find('div.' + o.enableprogress).css('left', '-100%')
+							}
+						}
+					}
+				}
+				else if (scrolltop > totaltargetsheight){ // if no target content visible on screen but scroll bar has scrolled past very last content already
+					if (o.enableprogress){ // if o.enableprogress enabled
+						curtarget.$menuitem.removeClass(o.highlightclass)
+						for (var i=0; i<targets.length; i++){
+							targets[i].$menuitem.find('div.' + o.enableprogress).css('left', 0)
+						}
+					}
+				}
+			}
+
+			function updatetargetpos(){
+				if (targets.length == 0)
+					return
+				var $menu = targets[0].$menu
+				spyheight = $spytarget.outerHeight()
+				spyscrollheight = (o.spytarget == window)? $body.get(0).scrollHeight : $spytarget.get(0).scrollHeight
+				totaltargetsheight = 0
+				cantscrollpastindex = -1
+				for (var i = 0; i < targets.length; i++){
+					var $target = targets[i].$des
+					var target = $target.get(0)
+					var targetoffset = (o.spytarget == window)? $target.offset().top : (target.offsetParent == o.spytarget)? target.offsetTop : target.offsetTop - o.spytarget.offsetTop
+					targetoffset += o.scrolltopoffset
+					targets[i].offsettop = targetoffset
+					targets[i].height = ( parseInt($target.data('spyrange')) > 0 )? parseInt($target.data('spyrange')) : ( $target.outerHeight() || o.mincontentheight)
+					if (o.enableprogress){ // if o.enableprogress enabled
+						var offsetbottom = targetoffset + targets[i].height // recalculate cantscrollpastindex
+						if (cantscrollpastindex == -1 && offsetbottom > (spyscrollheight - spyheight)){
+							cantscrollpastindex = i
+						}
+					}
+				}
+				totaltargetsheight = targets[targets.length-1].offsettop + targets[targets.length-1].height
+			}
+
+			spyonmenuitems($menu)
+
+			$menu.on('updatespy', function(){
+				spyonmenuitems($menu)
+				highlightitem()
+			})
+
+			$spytarget.on('scroll resize', function(){
+				highlightitem()
+			})
+
+			highlightitem()
+
+			$window.on('load resize', function(){
+				updatetargetpos()
+			})
+
+		}) // end return
+	}
+
+})(jQuery);

app/assets/stylesheets/aboutme_welcome.scss

@@ -1,8 +1,11 @@
 .self-introduce {
-  margin-top: 2.2rem;
+  margin-top: 1.875rem;
 
   h1, h2, h3, h4, h5, h6 {
-    border-bottom: 1px solid #dddddd;
+  }
+
+  p, .aboutme-index {
+    color: #5D5D5D;
   }
 }
 

app/assets/stylesheets/blogs.scss

@@ -1,6 +1,5 @@
 .blog-title {
-  border-bottom: 1px solid #dddddd;
+  margin-top: 1rem;
-  padding: 0.5rem 0;
 }
 
 .ptag {
@@ -19,7 +18,7 @@
 }
 
 .content {
-  padding-top: 0.5rem;
+  padding-top: 1rem;
 }
 
 .read-more {
@@ -45,10 +44,11 @@
 .blog-over {
   margin-bottom: 1rem;
   margin-top: 2rem;
+  border-bottom: 1px solid #DCDCDC;
 }
 
 .recent-title {
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid #DCDCDC;
   margin-bottom: 1rem;
 }
 

app/views/blogs/index.html.slim

@@ -15,16 +15,17 @@
         = link_to t('home.read'), blog_path(@newest), class: 'read-more'
         p.published-at #{t('home.created_at')} #{format_date(@newest.created_at)}
 
+      - if @recent.present?
         h4.recent-title #{t('home.recent')}
         ul.recent-content
           - @recent.each do |re|
-          li = link_to "#{re.title}",blog_path(re)
+            li = link_to re.title,blog_path(re)
 
   .large-3.columns.large-offset-1.self-introduce.self-introduce-index
     /*Adjust it in common/welcome*/
     = render 'common/welcome'
     h4 #{t('subscribes.title')}
-    .row.ng-cloak ng-controller='AboutController'
+    .row
       .small-12.medium-6.large-12.columns
         ul.subscribe-ul
           li