トップページのデザインを変更

hyoshida · Jan 10, 2014 · a37eff4 · a37eff4
1 parent 2801b3f
commit a37eff4
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 0 deletions.
diff --git a/app/assets/stylesheets/clips.css.scss b/app/assets/stylesheets/clips.css.scss
@@ -139,6 +139,7 @@ $info_box_width: $clip_width - $image_box_width - $margin;
 #clip .image_box {
   margin: 0;
   text-align: center;
+  background-color: #fff;
   border: 1px solid #ccc;
 
   img {
@@ -201,6 +202,7 @@ h2.title {
   margin-bottom: $margin;
   width: $info_box_width - $padding * 2;
   padding: $padding;
+  background-color: #fff;
   border: 1px solid #ccc;
 
   .count {

diff --git a/app/assets/stylesheets/home.css.scss b/app/assets/stylesheets/home.css.scss
@@ -65,3 +65,58 @@
     }
   }
 }
+
+// introduction
+#introduction {
+  color: #333;
+  margin: 30px auto 40px;
+  padding-bottom: 40px;
+  width: $contents_width;;
+  text-align: center;
+  border-bottom: 1px solid #ccc;
+}
+
+#introduction h1 {
+  margin: 0.5em 5px;
+  font-size: xx-large;
+  font-family: $font_gothic;
+
+  .s1 {
+    font-weight: bold;
+  }
+
+  .s2 {
+    font-weight: normal;
+  }
+}
+
+#introduction p {
+  line-height: 250%;
+  font-family: $font_gothic;
+  color: #666;
+
+  i {
+    margin: 0 0.5em;
+    @include opacity(0.75);
+  }
+
+  .btn-reclip {
+    color: #000;
+    @include icon(paper-clip);
+    @include btn-reclip;
+  }
+
+  .btn-like {
+    @include icon(heart-empty);
+    @include btn-like;
+  }
+
+  .tip {
+    color: #333;
+    margin: 0 3px;
+    padding: 3px 6px;
+    background-color: #eee;
+    border: 1px dotted #aaa;
+    @include border-radius(4px);
+  }
+}
diff --git a/app/assets/stylesheets/scaffolds.css.scss b/app/assets/stylesheets/scaffolds.css.scss
@@ -61,6 +61,10 @@ div {
 html,
 body {
   font-family: sans-serif !important;
+  background-color: #f5f5ef;
+}
+
+table {
   background-color: #fff;
 }
 

diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim
@@ -1,3 +1,20 @@
+#introduction
+  h1
+    span.s1 イラスト
+    span.s2 まとめ！
+  p
+    | あなたのお気に入りのイラストを
+    span.tip 探して
+    span.tip 集めて
+    span.tip まとめる
+    | ことができるサービスです。
+  p
+    | 気に入ったイラストがあれば
+    i.btn-reclip リクリップ
+    | か
+    i.btn-like いいね
+    | を押してみましょう。
+
 #home
   .matomes
     h2 新着まとめ
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,6 +61,10 @@ div { @@
     html,
     body {
       font-family: sans-serif !important;
+      background-color: #f5f5ef;
+    }
+    table {
       background-color: #fff;
     }
@@ Expand Down @@