layout.css

/*
# Layout

## Header

ヘッダー、レスポンシブ対応はangular material に任せるので、
ここでは静的なマークアップのみ実装する。

```
<header class="header row z3 bottom">
  <div class="flex flex-xs-auto">
    <div class="brand"><span>H</span>untching</div>
  </div>
  <div class="flex flex-xs-auto">
  </div>
  <div class="flex flex-xs-1 hunt">
    <i class="fa fa-dot-circle-o"></i>
  </div>
</header>
```
*/

header.header{
  height: 64px;
  color: white;
  background-color: #3f51b5;
  padding: 8px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  z-index: 100;
}
header.header:after {
  display: block;
  right: 120px;
  position: absolute;
  content: "";
  right: 20;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  background-color: #42A5F5;
  border: solid 1px white;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);
  z-index: 8;
}
header.header .hunt{
  z-index: 8;
  text-align: center;
  font-size: 26px;
}
header.header .brand{
  -webkit-font-smoothing: antialiased;
  padding: 0px 8px;
}
header.header .brand span{
  font-size: 24px;
}




/*
## Card

valueに関してはこのようにして取得するイメージ。
動的化はジェネレータの都合上割愛。
back 500 float 700 bar 800
ruby,php,c#,javascript ロゴあり

```
<div class="row">
  <div class="flex flex-lg-auto flex-fluid-sm-33">
    <div class="frame z1 card aspectwrapper-2by3 ruby">
      <div class="content">
        <div class="top z2 aspectwrapper-3by2">
          <div class="content image" style="background-image: url('http://www.tag.co.jp/blog/wp-content/uploads/2013/10/3d06df5ec936d0132a9c911eafd6dc7f.jpg')"></div>
          <a href="#" class="float-button z2">>></a>
        </div>
        <div class="status column between">
          <div class="flex flex-xs-auto">
            <div class="skill"><span>特技:</span> Web開発</div>
          </div>
          <div class="row bottom">
            <div class="flex flex-xs-auto">
              <div class="bars-title">使用言語</div>
              <div class="bar-name">Ruby</div>
              <div class="bar v100" data-value="100"></div>
              <div class="bar-name">Php</div>
              <div class="bar v80" data-value="80"></div>
              <div class="bar-name">C++</div>
              <div class="bar v40" data-value="40"></div>
            </div>
            <div class="flex flex-xs-auto">
              <img src="./img/lang_icon/ruby.png" class="fav-logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-lg-auto flex-fluid-sm-33">
    <div class="frame z1 card aspectwrapper-2by3 php">
      <div class="content">
        <div class="top z2 aspectwrapper-3by2">
          <div class="content image" style="background-image: url('http://i.imgur.com/M3TkdAU.jpg')"></div>
          <a href="#" class="float-button z2">>></a>
        </div>
        <div class="status column between">
          <div class="flex flex-xs-auto">
            <div class="skill"><span>特技:</span> CMSツール運用</div>
          </div>
          <div class="row bottom">
            <div class="flex flex-xs-auto">
              <div class="bars-title">使用言語</div>
              <div class="bar-name">Wordpress</div>
              <div class="bar v100" data-value="100"></div>
              <div class="bar-name">Php</div>
              <div class="bar v60" data-value="60"></div>
              <div class="bar-name">HTML</div>
              <div class="bar v60" data-value="60"></div>
            </div>
            <div class="flex flex-xs-auto">
              <img src="./img/lang_icon/php.png" class="fav-logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-lg-auto flex-fluid-sm-33">
    <div class="frame z1 card aspectwrapper-2by3 csharp">
      <div class="content">
        <div class="top z2 aspectwrapper-3by2">
          <div class="content image" style="background-image: url('http://livedoor.blogimg.jp/nizigami/imgs/5/8/58ad4183.jpg')"></div>
          <a href="#" class="float-button z2">>></a>
        </div>
        <div class="status column between">
          <div class="flex flex-xs-auto">
            <div class="skill"><span>特技:</span> Androidアプリ</div>
          </div>
          <div class="row bottom">
            <div class="flex flex-xs-auto">
              <div class="bars-title">使用言語</div>
              <div class="bar-name">C#</div>
              <div class="bar v100" data-value="100"></div>
              <div class="bar-name">C</div>
              <div class="bar v80" data-value="80"></div>
              <div class="bar-name">C++</div>
              <div class="bar v50" data-value="50"></div>
            </div>
            <div class="flex flex-xs-auto">
              <img src="./img/lang_icon/csharp.png" class="fav-logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-lg-auto flex-fluid-sm-33">
    <div class="frame z1 card aspectwrapper-2by3 javascript">
      <div class="content">
        <div class="top z2 aspectwrapper-3by2">
          <div class="content image" style="background-image: url('http://animewallpaperstock.com/wallpaper/03sa/steins-gate/steins-gate0118.jpg')"></div>
          <a href="#" class="float-button z2">>></a>
        </div>
        <div class="status column between">
          <div class="flex flex-xs-auto">
            <div class="skill"><span>特技:</span>sqlインジェクション</div>
          </div>
          <div class="row bottom">
            <div class="flex flex-xs-auto">
              <div class="bars-title">使用言語</div>
              <div class="bar-name">Javascript</div>
              <div class="bar v100" data-value="100"></div>
              <div class="bar-name">go</div>
              <div class="bar v60" data-value="60"></div>
              <div class="bar-name">F</div>
              <div class="bar v20" data-value="20"></div>
            </div>
            <div class="flex flex-xs-auto">
              <img src="./img/lang_icon/javascript.png" class="fav-logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-lg-auto flex-fluid-sm-33">
    <div class="frame z1 card aspectwrapper-2by3 html">
      <div class="content">
        <div class="top z2 aspectwrapper-3by2">
          <div class="content image" style="background-image: url('http://blogs.c.yimg.jp/res/blog-f7-4a/sa_tocchi/folder/1216720/55/37230855/img_6?1353240158')"></div>
          <a href="#" class="float-button z2">>></a>
        </div>
        <div class="status column between">
          <div class="flex flex-xs-auto">
            <div class="skill"><span>特技:</span> Androidアプリ</div>
          </div>
          <div class="row bottom">
            <div class="flex flex-xs-auto">
              <div class="bars-title">使用言語</div>
              <div class="bar-name">C#</div>
              <div class="bar v100" data-value="100"></div>
              <div class="bar-name">C</div>
              <div class="bar v80" data-value="80"></div>
              <div class="bar-name">C++</div>
              <div class="bar v50" data-value="50"></div>
            </div>
            <div class="flex flex-xs-auto">
              <img src="./img/lang_icon/html.png" class="fav-logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="flex flex-lg-auto flex-fluid-sm-33">
    <div class="frame z1 card aspectwrapper-2by3 css">
      <div class="content">
        <div class="top z2 aspectwrapper-3by2">
          <div class="content image" style="background-image: url('http://pic.prepics-cdn.com/0257f6e8ae96d/27590357.jpeg')"></div>
          <a href="#" class="float-button z2">>></a>
        </div>
        <div class="status column between">
          <div class="flex flex-xs-auto">
            <div class="skill"><span>特技:</span> CSSアニメーション</div>
          </div>
          <div class="row bottom">
            <div class="flex flex-xs-auto">
              <div class="bars-title">使用言語</div>
              <div class="bar-name">CSS</div>
              <div class="bar v100" data-value="100"></div>
              <div class="bar-name">C</div>
              <div class="bar v80" data-value="80"></div>
              <div class="bar-name">C++</div>
              <div class="bar v50" data-value="50"></div>
            </div>
            <div class="flex flex-xs-auto">
              <img src="./img/lang_icon/css.png" class="fav-logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-lg-auto flex-fluid-sm-33">
    <div class="frame z1 card aspectwrapper-2by3 photoshop">
      <div class="content">
        <div class="top z2 aspectwrapper-3by2">
          <div class="content image" style="background-image: url('http://sifblog.net/wp-content/uploads/2015/03/1426341217-4de2ae7ba882f2a6f090e450f323afc4.jpg')"></div>
          <a href="#" class="float-button z2">>></a>
        </div>
        <div class="status column between">
          <div class="flex flex-xs-auto">
            <div class="skill"><span>特技:</span> photoshop</div>
          </div>
          <div class="row bottom">
            <div class="flex flex-xs-auto">
              <div class="bars-title">使用言語</div>
              <div class="bar-name">photoshop</div>
              <div class="bar v100" data-value="100"></div>
              <div class="bar-name">C</div>
              <div class="bar v80" data-value="80"></div>
              <div class="bar-name">C++</div>
              <div class="bar v50" data-value="50"></div>
            </div>
            <div class="flex flex-xs-auto">
              <img src="./img/lang_icon/photoshop.png" class="fav-logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-lg-auto flex-fluid-sm-33">
    <div class="frame z1 card aspectwrapper-2by3 illustrator">
      <div class="content">
        <div class="top z2 aspectwrapper-3by2">
          <div class="content image" style="background-image: url('http://daikaibou.com/wp-content/uploads/2015/04/dc5d5465cdea660233b1e2c48ff11876_21151.jpg')"></div>
          <a href="#" class="float-button z2">>></a>
        </div>
        <div class="status column between">
          <div class="flex flex-xs-auto">
            <div class="skill"><span>特技:</span> illustrator</div>
          </div>
          <div class="row bottom">
            <div class="flex flex-xs-auto">
              <div class="bars-title">使用言語</div>
              <div class="bar-name">illustrator</div>
              <div class="bar v100" data-value="100"></div>
              <div class="bar-name">C</div>
              <div class="bar v80" data-value="80"></div>
              <div class="bar-name">C++</div>
              <div class="bar v50" data-value="50"></div>
            </div>
            <div class="flex flex-xs-auto">
              <img src="./img/lang_icon/illustrator.png" class="fav-logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-lg-auto flex-fluid-sm-33">
    <div class="frame z1 card aspectwrapper-2by3 swift">
      <div class="content">
        <div class="top z2 aspectwrapper-3by2">
          <div class="content image" style="background-image: url('http://blog-imgs-37.fc2.com/t/e/l/teleani/smile03_00.jpg')"></div>
          <a href="#" class="float-button z2">>></a>
        </div>
        <div class="status column between">
          <div class="flex flex-xs-auto">
            <div class="skill"><span>特技:</span> swift</div>
          </div>
          <div class="row bottom">
            <div class="flex flex-xs-auto">
              <div class="bars-title">使用言語</div>
              <div class="bar-name">swift</div>
              <div class="bar v100" data-value="100"></div>
              <div class="bar-name">C</div>
              <div class="bar v80" data-value="80"></div>
              <div class="bar-name">C++</div>
              <div class="bar v50" data-value="50"></div>
            </div>
            <div class="flex flex-xs-auto">
              <img src="./img/lang_icon/swift.png" class="fav-logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-lg-auto flex-fluid-sm-33">
  </div>
</div>
```
*/
.frame.card{
  margin: 0 auto;
  height: 375px;
  min-height: 375px;
  width: 235px;
  max-width: 235px;
}
.frame.card.ruby{
  background-color: #E91E63;
}
.frame.card.php, .frame.card.photoshop{
  background-color: #3f51b5;
}
.frame.card.csharp{
  background-color: #9c27b0;
}
.frame.card.javascript, .frame.card.illustrator{
  background-color: #ff9800;
}
.frame.card.html{
  background-color: #F44336;
}
.frame.card.css{
  background-color: #8BC34A;
}
.frame.card.swift{
  background-color: #FFC107;
}
.frame.card .status .bar.v100{
  width: 100%;
}
.frame.card .status .bar.v90{
  width: 90%;
}
.frame.card .status .bar.v80{
  width: 80%;
}
.frame.card .status .bar.v70{
  width: 70%;
}
.frame.card .status .bar.v60{
  width: 60%;
}
.frame.card .status .bar.v50{
  width: 50%;
}
.frame.card .status .bar.v40{
  width: 40%;
}
.frame.card .status .bar.v30{
  width: 30%;
}
.frame.card .status .bar.v20{
  width: 20%;
}
.frame.card .status .bar.v10{
  width: 10%;
}
.frame.card .status .bar.v0{
  width: 0%;
}

.frame.card .top{
  position: relative;
}

.frame.card .top .image{
  background-size: cover;
  background-position: center;
}
.frame.card.ruby .top .image{
  background-color: #AD1457;
}
.frame.card.php .top .image, .frame.card.photoshop .top .image{
  background-color: #283593;
}
.frame.card.csharp .top .image{
  background-color: #6a1b9a;
}
.frame.card.javascript .top .image, .frame.card.illustrator .top .image{
  background-color: #ef6c00;
}
.frame.card.html .top .image{
  background-color: #C62828;
}
.frame.card.swift .top .image{
  background-color: #FF8F00;
}
.frame.card .float-button {
  padding: 8px;
  border-radius: 50px;
  text-decoration: none;
  color: white;
  position: absolute;
  width: 40px;
  height: 40px;
  font-size: 18px;
  text-align: center;
  line-height: 2;
  letter-spacing: 6px;
  text-indent: 8px;
  right: 24px;
  bottom: -36px;
}

.frame.card.ruby .float-button {
  background-color: #C2185B;
}
.frame.card.php .float-button, .frame.card.photoshop .float-button {
  background-color: #303f9f;
}
.frame.card.csharp .float-button {
  background-color: #7b1fa2;
}
.frame.card.javascript .float-button, .frame.card.illustrator .float-button{
  background-color: #f57c00;
}
.frame.card.html .float-button {
  background-color: #D32F2F;
}
.frame.card.css .float-button {
  background-color: #689F38;
}
.frame.card.swift .float-button {
  background-color: #FFA000;
}
.frame.card .status{
  padding: 16px;
  font-size: 12px;
  color: white;
  -webkit-font-smoothing: antialiased;
}
.frame.card .status .skill{
  font-size: 16px;
  color: white;
  font-weight: bold;
}
.frame.card .status .skill span{
  font-size: 12px;
  font-weight: normal;
  display: block;
}
.frame.card .status .bar-name{
  font-weight: bold;
}
.frame.card .status .bar{
  margin: 4px 0px;
  height: 8px;
}
.frame.card.ruby .status .bar{
  background-color: #AD1457;
}
.frame.card.php .status .bar, .frame.card.photoshop .status .bar{
  background-color: #283593;
}
.frame.card.csharp .status .bar{
  background-color: #6a1b9a;
}
.frame.card.javascript .status .bar, .frame.card.illustrator .status .bar{
  background-color: #ef6c00;
}
.frame.card.html .status .bar{
  background-color: #C62828;
}
.frame.card.css .status .bar{
  background-color: #558B2F;
}
.frame.card.swift .status .bar{
  background-color: #FF8F00;
}


.frame.card .status .fav-logo{
  width: 90%;
  margin-right: 0;
  margin-left: auto;
  display: block;
}

/*

## User/profile

cardの影がz1からz3に変わっていることに注意。ボタンは無くなっている
```
<div class="test aspectwrapper-16by9">
  <div class="content">
    <div class="frame z1">
      <div class="flex frame z1 frame-top">
      </div>
      <div class="container">
        <div class="row">
          <div class="flex flex-xs-auto simple-profile">
            <div class="frame z3 card aspectwrapper-2by3 ruby">
              <div class="content">
                <div class="top z2 aspectwrapper-3by2">
                  <div class="content image" style="background-image: url('http://www.tag.co.jp/blog/wp-content/uploads/2013/10/3d06df5ec936d0132a9c911eafd6dc7f.jpg')"></div>
                </div>
                <div class="status column between">
                  <div class="flex flex-xs-auto">
                    <div class="skill"><span>特技:</span> Web開発</div>
                  </div>
                  <div class="row bottom">
                    <div class="flex flex-xs-auto">
                      <div class="bars-title">使用言語</div>
                      <div class="bar-name">Ruby</div>
                      <div class="bar v100" data-value="100"></div>
                      <div class="bar-name">Php</div>
                      <div class="bar v80" data-value="80"></div>
                      <div class="bar-name">C++</div>
                      <div class="bar v40" data-value="40"></div>
                    </div>
                    <div class="flex flex-xs-auto">
                      <img src="./img/lang_icon/ruby.png" class="fav-logo">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-xs-16">
            <div class="row">
              <div class="flex flex-xs-2">
                <div class="aspectwrapper-1by1">
                  <div class="frame z1 sns content">
                    <i class="fa fa-twitter"></i>
                  </div>
                </div>
              </div>
              <div class="flex flex-xs-2">
                <div class="aspectwrapper-1by1">
                  <div class="frame z1 sns content">
                    <i class="fa fa-github-alt"></i>
                  </div>
                </div>
              </div>
              <div class="flex flex-xs-2">
                <div class="aspectwrapper-1by1">
                  <div class="frame z1 sns content">
                    <i class="fa fa-facebook"></i>
                  </div>
                </div>
              </div>
              <div class="flex flex-xs-2">
                <div class="aspectwrapper-1by1">
                  <div class="frame z1 sns content">
                    <i class="fa fa-pinterest-p"></i>
                  </div>
                </div>
              </div>
              <div class="flex flex-xs-2">
                <div class="aspectwrapper-1by1">
                  <div class="frame z1 sns content">
                    <i class="fa fa-dribbble"></i>
                  </div>
                </div>
              </div>
              <div class="flex flex-xs-2">
                <div class="aspectwrapper-1by1">
                  <div class="frame z1 sns content">
                    <i class="fa fa-bitbucket"></i>
                  </div>
                </div>
              </div>
             <div class="flex flex-xs-2">
                <div class="aspectwrapper-1by1">
                  <div class="frame z1 sns content">
                    <i class="fa fa-google"></i>
                  </div>
                </div>
              </div>
             <div class="flex flex-xs-2">
                <div class="aspectwrapper-1by1">
                  <div class="frame z1 sns content">
                    <i class="fa fa-instagram"></i>
                  </div>
                </div>
              </div>
             <div class="flex flex-xs-2">
                <div class="aspectwrapper-1by1">
                  <div class="frame z1 sns content">
                    <i class="fa fa-slideshare"></i>
                  </div>
                </div>
              </div>
             <div class="flex flex-xs-2">
                <div class="aspectwrapper-1by1">
                  <div class="frame z1 sns content">
                    <i class="fa fa-vimeo-square"></i>
                  </div>
                </div>
              </div>
              <div class="flex flex-xs-12">
                <div class="frame z1 description padding-16">
                  こんにちは。たにしです。
                  得意言語はRubyで、主にフロントエンド開発を中心に活動しています。
                  面白い方とチームを是非組めたらと思っています。<br>
                  年上のお姉さんが好きで、世界のいたるところにいるお姉さんを求めて僕は今日も旅に出ます。
                </div>
              </div>
              <div class="flex flex-xs-8">
                <div class="frame z1 matrixgraph padding-16">
                  <div class="graph">
                    graphが表示される
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```
*/

.test .content > .frame{
  height: 100%;
  background-color: #eee;
}
.test .content > .frame .frame-top{
  height: 30%;
  background-color: #C2185B;
}
.test .content > .frame .simple-profile{
  margin-top: -5%;
}

.frame.sns{
  margin: 0 auto;
  font-size: 60px;
  color: #555;
}
.frame.sns i.fa{
  width: 100%;
  text-align: center;
}
.frame.description {
  font-size: 12px;
  color: #555;
}

.frame.matrixgraph .graph{
  width: 100%;
  border: solid 1px #555;
}