Merge pull request #22 from yuki540net/feature/memories-page

Feature/memories page

public/index.html

@@ -443,6 +443,7 @@
               <div></div><div></div><div></div><div></div>
               <h2>思い出</h2>
             </section>
+            <memories-box />
           </section>
         </article>
       </section>

src/scripts/app.js

@@ -4,10 +4,12 @@ import * as util from './lib/util'
 import preload_json from './config/preload'
 import history_json from './config/history'
 import product_json from './config/product'
+import memories_json from './config/memories'
 
 // components
 import './components/history-box.tag'
 import './components/product-box.tag'
+import './components/memories-box.tag'
 
 // init
 util.setRingSize()
@@ -24,3 +26,4 @@ util.startLoading(() => {
 // render
 riot.mount('history-box', { historys: history_json })
 riot.mount('product-box', { products: product_json })
+riot.mount('memories-box', { memories: memories_json })

src/scripts/components/memories-box.tag

@@ -0,0 +1,9 @@
+<memories-box>
+  <div class="memories-box">
+    <a each={ me, key in opts.memories } href={ me.link } target="_blank">
+      <img src={ me.thumb } alt={ me.title } />
+      <h4 class="title">{ me.title }</h4>
+      <small class="date">{ me.date }</span>
+    </a>
+  </div>
+</memories-box>

src/scripts/config/memories.js

@@ -0,0 +1,62 @@
+export default [
+  {
+    "title": "英語できないことが界隈に広まる",
+    "thumb": "./images/memories/issue.png",
+    "link": "https://togetter.com/li/1188562",
+    "date": "2018/01/10"
+  },
+  {
+    "title": "satella.ioがMOONGIFTで紹介される",
+    "thumb": "./images/memories/moongift.png",
+    "link": "https://www.moongift.jp/2017/12/satella-io-%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B9%E7%89%88live2d%EF%BC%81/",
+    "date": "2017/12/29"
+  },
+  {
+    "title": "面白法人カヤックにてアルバイト",
+    "thumb": "./images/memories/kayac_job.jpg",
+    "link": "https://twitter.com/eriri_jp/status/909941616508526592",
+    "date": "2017/09/19"
+  },
+  {
+    "title": "Pixivのサマーインターンが終了しました！",
+    "thumb": "./images/memories/pixiv_intern.jpg",
+    "link": "http://yuki540.hatenablog.jp/entry/2017/09/14/%E3%83%94%E3%82%AF%E3%82%B7%E3%83%96%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%B3%E3%82%92%E7%B5%82%E3%81%88%E3%81%A6",
+    "date": "2017/09/18"
+  },
+  {
+    "title": "株式会社ドワンゴのサマーインターン終了！",
+    "thumb": "./images/memories/dwango_intern.jpg",
+    "link": "https://twitter.com/eriri_jp/status/901036007738327040",
+    "date": "2017/08/25"
+  },
+  {
+    "title": "株式会社はてなに会社見学に行ってきました！",
+    "thumb": "./images/memories/hatena.png",
+    "link": "https://twitter.com/eriri_jp/status/887906419462164480",
+    "date": "2017/07/20"
+  },
+  {
+    "title": "面白法人カヤックのインターンを終えて",
+    "thumb": "./images/memories/kayac_intern.png",
+    "link": "http://yuki540.hatenablog.jp/entry/2017/07/16/%E9%9D%A2%E7%99%BD%E6%B3%95%E4%BA%BA%E3%82%AB%E3%83%A4%E3%83%83%E3%82%AF%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%B3%E3%82%92%E7%B5%82%E3%81%88%E3%81%A6",
+    "date": "2017/07/16"
+  },
+  {
+    "title": "Pixivの脆弱性を報告し、5000円&5pts獲得",
+    "thumb": "./images/memories/pixiv_xss.png",
+    "link": "http://yuki540.hatenablog.jp/entry/2017/07/03/Pixiv%E3%81%AE%E8%84%86%E5%BC%B1%E6%80%A7%28Reflected_XSS%29%E3%82%92%E8%A6%8B%E3%81%A4%E3%81%91%E3%81%A6%E3%80%815000%E5%86%86%E8%B2%B0%E3%81%A3%E3%81%9F%E8%A9%B1",
+    "date": "2017/06/20"
+  },
+  {
+    "title": "LiveDライクなオープンソースソフトウェアの開発",
+    "thumb": "./images/memories/live2d_like.png",
+    "link": "http://niconare.nicovideo.jp/watch/kn2342",
+    "date": "2017/02/26"
+  },
+  {
+    "title": "日本最大の図書館検索サイト カーリルの脆弱性を報告",
+    "thumb": "./images/memories/calil.png",
+    "link": "https://twitter.com/eriri_jp/status/794745927856635904",
+    "date": "2016/11/04"
+  }
+]

src/scss/modules/pc/_memories-page.scss

@@ -0,0 +1,54 @@
+@include pc-layout {
+  .memories-page {}
+
+  .memories-box {
+    width: 600px;
+    margin: 0 auto;
+    margin-top: 50px;
+    padding-bottom: 50px;
+
+    a {
+      position: relative;
+      float: left;
+      display: block;
+      width: 290px; height: 250px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      background-color: $theme-light-purple;
+      overflow: hidden;
+      padding: 5px;
+      box-sizing: border-box;
+      transition: all 0.35s ease 0s;
+
+      img {
+        width: 100%;
+        display: block;
+      }
+
+      .title {
+        font-size: 16px;
+        color: $theme-bg;
+        padding: 5px;
+        box-sizing: border-box;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .date {
+        position: absolute;
+        bottom: 0; right: 0;
+        font-size: 12px;
+        color: #ccc;
+        text-align: right;
+        display: block;
+        padding: 5px;
+        box-sizing: border-box;
+      }
+    }
+    a:nth-child(2n) { margin-right: 0; }
+    a:hover { background-color: $theme-pink; }
+
+    &:after { content: ""; display: block; clear: both; }
+  }
+}

src/scss/modules/sp/_memories-page.scss

@@ -0,0 +1,46 @@
+@include sp-layout {
+  .memories-page {}
+
+  .memories-box {
+    margin-top: 50px;
+    padding-bottom: 50px;
+
+    a {
+      position: relative;
+      display: block;
+      width: 90%;
+      margin: 0 auto;
+      margin-bottom: 20px;
+      background-color: $theme-light-purple;
+      overflow: hidden;
+      padding: 5px;
+      box-sizing: border-box;
+      transition: all 0.35s ease 0s;
+
+      img {
+        width: 100%;
+        display: block;
+      }
+
+      .title {
+        font-size: 15px;
+        color: $theme-bg;
+        padding: 10px 5px;
+        box-sizing: border-box;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .date {
+        font-size: 12px;
+        color: #ccc;
+        text-align: right;
+        display: block;
+        padding: 5px;
+        box-sizing: border-box;
+      }
+    }
+    a:hover { background-color: $theme-pink; }
+  }
+}

src/scss/modules/tablet/_memories-page.scss

@@ -0,0 +1,46 @@
+@include tablet-layout {
+  .memories-page {}
+
+  .memories-box {
+    margin-top: 50px;
+    padding-bottom: 50px;
+
+    a {
+      position: relative;
+      display: block;
+      width: 80%;
+      margin: 0 auto;
+      margin-bottom: 40px;
+      background-color: $theme-light-purple;
+      overflow: hidden;
+      padding: 5px;
+      box-sizing: border-box;
+      transition: all 0.35s ease 0s;
+
+      img {
+        width: 100%;
+        display: block;
+      }
+
+      .title {
+        font-size: 18px;
+        color: $theme-bg;
+        padding: 10px 5px;
+        box-sizing: border-box;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .date {
+        font-size: 14px;
+        color: #ccc;
+        text-align: right;
+        display: block;
+        padding: 5px;
+        box-sizing: border-box;
+      }
+    }
+    a:hover { background-color: $theme-pink; }
+  }
+}