:new: staff creditにデザインを当てる

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -11,7 +11,15 @@ export default class StaffCredit extends React.Component {
 
   render() {
     return (
-      <div className="text-center">staff credit</div>
+      <div className="text-center credit-curtain">
+        <div className="credit-body">
+          <p className="title my-5">Growi Soncho</p>
+          <span className="dev-position">1st</span>
+          <p className="dev-name mb-5">Sou Mizobuchi</p>
+          <span className="dev-position">2nd</span>
+          <p className="dev-name mb-5">Yusuke Takizawa</p>
+        </div>
+      </div>
     );
   }
 

src/client/styles/scss/_staff_credit.scss

@@ -1,12 +1,37 @@
 // Staff Credit
 
 #staff-credit {
-  div {
-    @font-face {
-      font-family: 'PressStart2P';
-      src: url(../../../../public/fonts/press-start-2p/PressStart2P.ttf) format('truetype');
-    }
-    z-index: 100;
-    font-family: 'PressStart2P', $basefont1;
+  @font-face {
+    font-family: 'PressStart2P';
+    src: url(../../../../public/fonts/press-start-2p/PressStart2P.ttf) format('truetype');
+  }
+
+  font-family: 'PressStart2P', $basefont1;
+  color: white;
+
+  .credit-curtain {
+    position: absolute;
+    // TODO:削除: navbarによって一番上が隠れてしまうので上から少しズラす、スクロールできるようになったら0%にする
+    top: 5%;
+    left: 25%;
+    width: 50%;
+    height: 100%;
+    background-color: black;
+  }
+
+  .credit-body {
+    // TODO: 上下にアニメーションする仕組み
+  }
+
+  .title {
+    font-size: 1.8em;
+  }
+
+  .dev-position {
+    font-size: 1.3em;
+  }
+
+  .dev-name {
+    font-size: 2.5em;
   }
 }

src/server/views/layout/layout.html

@@ -229,7 +229,7 @@
 </div><!-- /#wrapper -->
 
 <!-- /#staff-credit -->
-<div class="credit-mode" id="staff-credit"></div>
+<div id="staff-credit"></div>
 
 {% include '../modal/shortcuts.html' %}