Welcomeページのデザイン作成

app/assets/stylesheets/basic.css.scss

+@import url(http://fonts.googleapis.com/css?family=Flamenco:300,400);
+@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
+p, h1, h2, h3, h4, h5, h6, span {
+  font-family: 'メイリオ', 'meiryo', hiragino kaku go;
+  letter-spacing: 2pt;
+  line-height: 150%;
+  margin: 0;
+  padding: 0;
+}

app/assets/stylesheets/btn.css.scss

+$set_prefix: -webkit-, -moz-, -ms-, -o-, '';
+$main-color: #75b3c8;
+
+@mixin background_color($bg_value: $main-color) {
+  background-color: $bg_value;
+  color: #fff;
+}
+
+@mixin border_radius($br_value: 4px) {
+  @each $prefix in $set_prefix {
+    #{$prefix}border-radius: $br_value
+  }
+}
+
+@mixin transition($transition_value: 0.3s, $move_type: ease-in-out) {
+  @each $prefix in $set_prefix {
+    #{$prefix}transition: all $transition_value $move_type
+  }
+}
+@import url(http://fonts.googleapis.com/css?family=Flamenco:300,400);
+@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
+.btn-original {
+  background: transparent!important;
+  border: 1px solid #fff;
+  font-family: 'Quicksand', sans-serif;
+  font-weight: 300;
+  font-size: 24px;
+  &:hover {
+    border: 1px solid #75b3c8;
+    background-color: #75b3c8!important;
+    @include transition;
+  }
+}

app/assets/stylesheets/welcome.css.scss

+@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
+$main-color: #75b3c8;
+.background-image {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-image: image-url("compass.jpg");
+  background-size: cover;
+}
+
+.background-mask {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(#000, .5);
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.login {
+  .container.marketing {
+    h2.title {
+      font-family: 'Quicksand', sans-serif;
+      font-weight: 300;
+      font-size: 62px;
+      color: #fff;
+    }
+    p {
+      color: #fff;
+    }
+  }
+  .welcome-box {
+    text-align: center;
+    .btn-original {
+      margin-top: 140px;
+    }
+    .zigexn {
+      margin-top: 20px;
+    }
+  }
+  .featurette {
+    .featurette-heading {
+      margin-top: 0;
+      color: #ddd;
+      line-height: 150%;
+      font-family: 'Quicksand','メイリオ', 'meiryo', hiragino kaku go;
+    }
+    .text-muted {
+      color: #ccc;
+      font-family: 'Quicksand','メイリオ', 'meiryo', hiragino kaku go;
+    }
+    .featurette-image {
+      box-shadow: 1px 1px 1px #ccc;
+      border-radius: 5px;
+    }
+  }
+}

app/views/welcome/login.html.slim

 /! view:welcome/login
+.background-image
+.background-mask
 .login
   .container.marketing
     .row style=("margin-top: 40px")
-      .col-lg-4
-      .col-lg-4
-        img.img-circle alt=("Generic placeholder image") src="http://placehold.it/140x140&text=Rendezvous" /
-        h2 Rendezvous
+      .col-lg-12.welcome-box
+        h2.title Rendezvous
         p
-          | Rendezvousはチームの`Stock`と`Flow`の
-          br>/
+          | RendezvousはチームのStockとFlowの
           | 2種類の情報を蓄積・検索・共有する
-          br>/
           | オープンソースのソフトウェアです。
         p
-          a.btn.btn-lg.btn-primary href=user_omniauth_authorize_path(:google_oauth2) role="button"  Sign up with Google
-      .col-lg-4
+          a.btn.btn-lg.btn-primary.btn-original href=user_omniauth_authorize_path(:google_oauth2) role="button"  Sign up with Google
+        p.zigexn powerd by ZIGExN
 
     hr.featurette-divider/
     .row.featurette
       .col-md-7
         h2.featurette-heading
           | Stock all you have done.
-          span.text-muted It may be priceless for others.
-        p.lead Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
+          span.text-muted  It may be priceless for others.
       .col-md-5
-        img.featurette-image.img-responsive alt="Stock" src="http://placehold.it/500x400&text=Stock" /
+        = image_tag "font.jpg", class: "featurette-image img-responsive"
     hr.featurette-divider/
     .row.featurette
       .col-md-5
-        img.featurette-image.img-responsive alt="Flow" src="http://placehold.it/500x400&text=Flow" /
+        = image_tag "paper.jpg", class: "featurette-image img-responsive"
       .col-md-7
         h2.featurette-heading
           | Flow anything member have come up with.
-          span.text-muted Which accelerate your PDCA.
-        p.lead Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
+          span.text-muted  Which accelerate your PDCA.
     hr.featurette-divider/
     .row.featurette
       .col-md-7
         h2.featurette-heading
           | Collaborate with other team on documents.
-          span.text-muted Making more and more generic plans.
-        p.lead Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
+          span.text-muted  Making more and more generic plans.
       .col-md-5
-        img.featurette-image.img-responsive alt="Collaboration" src="http://placehold.it/500x400&text=Collaboration" /
+        = image_tag "pc.jpg", class: "featurette-image img-responsive"
     hr.featurette-divider/