Merge pull request #953 from weseek/add-design-staff-credit

雛形に8bitクレジット風のスタイルを当てる

resource/cdn-manifests.js

@@ -87,6 +87,14 @@ module.exports = {
         integrity: '',
       },
     },
+    {
+      name: 'Press Start 2P',
+      url: 'https://fonts.googleapis.com/css?family=Press+Start+2P',
+      groups: ['basis'],
+      args: {
+        integrity: '',
+      },
+    },
     {
       name: 'font-awesome',
       url: 'https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css',

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

@@ -31,10 +31,19 @@ export default class StaffCredit extends React.Component {
   }
 
   render() {
-
     const isRender = this.state.userCommand.length === this.konamiCommand.length;
     if (isRender) {
-      return <div>スタッフロール</div>;
+      return (
+        <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>
+      );
     }
     return null;
   }

src/client/styles/scss/_staff_credit.scss

@@ -0,0 +1,44 @@
+// Staff Credit
+#staff-credit {
+  font-family: 'Press Start 2P', $basefont1;
+  color: white;
+
+  .credit-curtain {
+    position: absolute;
+    top: 0%;
+    left: 20vh;
+    width: 80vw;
+    height: 100vh;
+    overflow-y: hidden;
+    background-color: black;
+  }
+
+  .credit-body {
+    position: relative;
+    top: -30em;
+    animation-name: Credit;
+    animation-duration: 15s;
+    animation-timing-function: linear;
+  }
+
+  @keyframes Credit {
+    from {
+      top: 100%;
+    }
+    to {
+      top: -30rem;
+    }
+  }
+
+  .title {
+    font-size: 1.8em;
+  }
+
+  .dev-position {
+    font-size: 1.2em;
+  }
+
+  .dev-name {
+    font-size: 2.4em;
+  }
+}

src/client/styles/scss/style-app.scss

@@ -39,6 +39,7 @@
 @import 'user_growi';
 @import 'handsontable';
 @import 'wiki';
+@import 'staff_credit';
 @import 'tag';
 
 /*