Update

Gemfile

@@ -49,7 +49,7 @@ gem 'sass', github: "nex3/sass", tag: '3.3.5'
 gem "compass", "~> 1.0.0.alpha.18"
 gem "compass-rails", github: "Compass/compass-rails"
 # gem 'oulu-rails', :path => '../oulu-rails'
-gem 'oulu-rails', '~> 0.1.29', github: 'oulu/oulu-rails'
+gem 'oulu-rails', '~> 0.1.30', github: 'oulu/oulu-rails'
 
 group :doc do
   # bundle exec rake doc:rails generates the API under doc/api.

Gemfile.lock

@@ -39,9 +39,9 @@ GIT
 
 GIT
   remote: git://github.com/oulu/oulu-rails.git
-  revision: 194157cee05dc18e6ca4d54ccc3ecd24e67c8a14
+  revision: ffd22363cd8a76b1c16104a424a2686ab0de8dbe
   specs:
-    oulu-rails (0.1.29)
+    oulu-rails (0.1.30)
       SassyLists
       breakpoint
       ceaser-easing
@@ -414,7 +414,7 @@ DEPENDENCIES
   modernizr-rails
   nkss-rails!
   nokogiri
-  oulu-rails (~> 0.1.29)!
+  oulu-rails (~> 0.1.30)!
   owlcarousel-rails
   pg
   pry

app/assets/stylesheets/blocks/home/_home-access.css.sass

@@ -1,17 +1,19 @@
-.home-access__heading
+$block: home-access
+
+.#{$block}__heading
   @media screen and (max-width: #{$break-point})
     +inline-block
-.home-access__address
+.#{$block}__address
   +text-block($md, 1.4, .8)
-.home-access__take-time
+.#{$block}__take-time
   +rem('font-size', $sm)
-.home-access__take-time-link
+.#{$block}__take-time-link
   color: $pink
   +hover-link
   +inline-block
   +rem('font-size', $xs)
   +rem('margin-left', $xs*.6)
-.home-access__direction
+.#{$block}__direction
   position: relative
   +rem('padding-left', 32px)
   margin-bottom: .6em
@@ -34,17 +36,10 @@
     &:nth-child(#{$i})
       &:before
         content: "#{$i}"
-.home-access__map-link-wrapper
-  @media screen and (max-width: #{$break-point})
-    +inline-block
-    float: none
-    width: auto
-    +text-block($lg, 1.4, .4)
-    +rem('margin-left', 6px)
-.home-access__map-link
+.#{$block}__map-link
   color: $black
-  display: block
-  text-align: center
+  +inline-block(bottom)
+  +rem('margin-left', 8px)
   i
     +rem('font-size', $xxl)
   &:hover

app/assets/stylesheets/blocks/home/_home-members.css.sass

@@ -1,34 +1,38 @@
-.home-members__member
+$block: home-members
+
+.#{$block}__member
   +inline-block
-  position: relative
+  +relative
   +rem('width', 240px)
   +box-sizing(border-box)
   +rem('padding-left', 96px)
   +rem('height', 80px)
-.home-members__member-name
+.#{$block}__member-name
   +tauri(bold)
   +text-block($sm, 1, .2)
   +rem('font-size', $sm)
-.home-members__member-icon-link
-  .home-members__member-icon-image
+.#{$block}__member-icon-link
+  .#{$block}__member-icon-image
     border: 2px solid transparent
   &:hover
-    .home-members__member-icon-image
+    .#{$block}__member-icon-image
       border: 2px solid $pink
-.home-members__member-icon-image
+.#{$block}__member-icon-image
   +box-sizing(border-box)
   +rem('width', 82px)
   display: block
   +border-radius(50%)
   +absolute(left, 0, top, 4px)
-.home-members__member-name-link
+.#{$block}__member-informations
+  +absolute(left, 90px, bottom, 0)
+.#{$block}__member-name-link
   +hover-link
   color: $black
   &:hover
     color: $pink
-.home-members__sns-icon
+.#{$block}__sns-icon
   +inline-block
-.home-members__sns-link
+.#{$block}__sns-link
   color: $black
   display: block
   +text-block($md)

app/assets/stylesheets/blocks/layouts/_articles-global-nav.css.sass

@@ -1,23 +1,29 @@
-.article-global-nav
-  +absolute(left, 0, top, 40px)
-.article-global-nav__logo
+$block: article-global-nav
+.#{$block}
+  +absolute(left, 0, top, 30px)
+.#{$block}__logo
   +inline-block
-.article-global-nav__logo-link
+.#{$block}__logo-link
   +tauri(bold)
   font-weight: bold
   text-decoration: none
   +text-block(30px, 30px)
   color: $black
-  +rem('margin-right', 20px)
+  +rem('margin-right', 24px)
 
-.article-global-nav__ul
+.#{$block}__items
   +inline-block(bottom)
-.article-global-nav__li
+.#{$block}__item
   +inline-block(bottom)
-  +rem('margin-right', 10px)
-.article-global-nav__link
+  +rem('margin-right', 24px)
+.#{$block}__link
   +tauri(bold)
   font-weight: bold
   text-decoration: none
   +text-block(16px, 30px)
   color: $black
+  &:hover
+    color: $pink
+  &:active
+    color: $pink
+    +top(2px)

app/assets/stylesheets/blocks/layouts/_footer.css.sass

@@ -1,4 +1,6 @@
-.footer
+$block: footer
+
+.#{$block}
   padding-top: 2em
   padding-bottom: 2em
   clear: both
@@ -7,13 +9,13 @@
   +rem('font-size', 12px)
   +rem('margin-bottom', 40px)
 
-.footer__wrapper
+.#{$block}__wrapper
   +relative
   +rem('padding-right', 260px)
   @media screen and (max-width: #{$break-point})
     padding-right: 0
 
-.footer__copyright
+.#{$block}__copyright
   display: block
   text-align: center
   +rem('font-size', $lg)

app/assets/stylesheets/blocks/layouts/_page.css.sass

@@ -1,4 +1,5 @@
-.page__title
+$block: page
+.#{$block}__title
   background-color: $black
   +rem('margin-top', 60px)
   +rem('margin-bottom', 28px)
@@ -12,9 +13,9 @@
     +rem('margin-top', 120px)
     @media screen and (max-width: #{$break-point})
       +rem('margin-top', 20px)
-.page__title-wrapper
+.#{$block}__title-wrapper
   position: relative
-.page__first-heading
+.#{$block}__first-heading
   background-color: $yellow
   +inline-block
   +text-block($xl, 3)

app/assets/stylesheets/blocks/layouts/_two-column-content.css.sass

@@ -1,18 +1,20 @@
-.two-column-content
+$block: two-column-content
+
+.#{$block}
   +rem('padding-left', 178px)
   +clearfix
   position: relative
   @media screen and (max-width: #{$break-point})
     padding-left: 0
   &:last-child
-    .two-column-content__inner
+    .#{$block}__inner
       margin-bottom: 0
       padding-bottom: 0
-  .two-column-content__inner
+  .#{$block}__inner
     *:last-child
       margin-bottom: 0
 
-.two-column-content__inner
+.#{$block}__inner
   +border(left, 1px, solid, rgba(0, 0, 0, .1), white)
   +rem('padding-left', 32px)
   +rem('padding-bottom', 38px)
@@ -24,7 +26,7 @@
   p
     +text-block($md, 1.8, 1.4)
 
-.two-column-content__title-wrapper
+.#{$block}__title-wrapper
   +rem('width', 180px)
   +absolute(left, 0, top, 0)
   +rem('padding-right', 30px)
@@ -35,23 +37,23 @@
     position: static
     width: 100%
 
-.two-column-content__first-heading
+.#{$block}__first-heading
   background-color: $yellow
   +inline-block
   +text-block($xl, 3, false, bold, center)
   +rem('width', 180px)
   +tauri
   color: $black
 
-.two-column-content__second-heading
+.#{$block}__second-heading
   +tauri
   +text-block($lg, 1.4, .4, bold, center)
   @media screen and (max-width: #{$break-point})
     text-align: left
   &.members__member-name
     text-align: center
     margin-bottom: .6em
-.two-column-content__second-heading-link
+.#{$block}__second-heading-link
   +hover-link
   color: $black