update

gamerinshaft · May 31, 2015 · e39b788 · e39b788
1 parent a3a27b1
commit e39b788
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 24 deletions.
diff --git a/css/base-layout.css b/css/base-layout.css
@@ -5,7 +5,9 @@
 
 ## Container
 
-一番大きな枠組みのcontainer
+一番大きな枠組みのcontainer、
+ブラウザのwidthに合わせて、適宜大きさが変化する。
+基本的にトップレベルで使用する。
 
 ```
 <div class="container">
@@ -45,6 +47,10 @@
 /*
 ## フレキシブルデザイン
 
+twitter bootstrap と同じ要領で、
+flexを用いたマークアップで、行や列を表現できるようにしている。<br>
+col-*-autoは、*に当てはまる条件下において、余白部分を穴埋めしてくれるように働く。<br>
+もし複数 col-*-autoがある場合、それらで余白を埋めあえるよう個数で余白を割った大きさになる。
 ```
 <div class="row">
   <div class="flex flex-xs-auto">
@@ -292,6 +298,23 @@
 </div>
 
 ```
+
+## フレキシブルを用いて縦横中央に要素を配置する
+
+```
+<div class="testbox7">
+  <div class="row" style="height: 100%;">
+    <div class="flex flex-xs-auto"></div>
+    <div class="column">
+      <div class="flex flex-xs-auto"></div>
+      hello
+      <div class="flex flex-xs-auto"></div>
+    </div>
+    <div class="flex flex-xs-auto"></div>
+  </div>
+</div>
+```
+
 ## 特定の条件下で見えなくする
 
 ```

diff --git a/css/layout.css b/css/layout.css
@@ -1,20 +1,16 @@
 /*
 # Layout
 
-## 縦横中央に要素を配置する
+## Header
+
+ヘッダー、レスポンシブ対応はangular material に任せるので、
+ここでは静的なマークアップのみ実装する。
 
 ```
-<div class="testbox7">
-  <div class="row" style="height: 100%;">
-    <div class="flex flex-xs-auto"></div>
-    <div class="column">
-      <div class="flex flex-xs-auto"></div>
-      hello
-      <div class="flex flex-xs-auto"></div>
-    </div>
-    <div class="flex flex-xs-auto"></div>
-  </div>
-</div>
+<header class="header">
+  <div class=
+  <p></p>
+</header>
 ```
 
 ## Card
@@ -39,7 +35,7 @@ ruby,php,c#,javascript ロゴあり
           </div>
           <div class="row bottom">
             <div class="flex flex-xs-auto">
-              <div class="bars-title">使用頻度:</div>
+              <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>
@@ -68,7 +64,7 @@ ruby,php,c#,javascript ロゴあり
           </div>
           <div class="row bottom">
             <div class="flex flex-xs-auto">
-              <div class="bars-title">使用頻度:</div>
+              <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>
@@ -97,7 +93,7 @@ ruby,php,c#,javascript ロゴあり
           </div>
           <div class="row bottom">
             <div class="flex flex-xs-auto">
-              <div class="bars-title">使用頻度:</div>
+              <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>
@@ -122,11 +118,11 @@ ruby,php,c#,javascript ロゴあり
         </div>
         <div class="status column between">
           <div class="flex flex-xs-auto">
-            <div class="skill"><span>特技:</span>セッションハイジャック</div>
+            <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="bars-title">使用言語</div>
               <div class="bar-name">Javascript</div>
               <div class="bar v100" data-value="100"></div>
               <div class="bar-name">go</div>
@@ -155,7 +151,7 @@ ruby,php,c#,javascript ロゴあり
           </div>
           <div class="row bottom">
             <div class="flex flex-xs-auto">
-              <div class="bars-title">使用頻度:</div>
+              <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>
@@ -205,6 +201,7 @@ ruby,php,c#,javascript ロゴあり
 .frame.card .top .image{
   background-size: cover;
   background-position: center;
+  background-color: white;
 }
 .frame.card .float-button {
   padding: 8px;
@@ -310,7 +307,7 @@ cardの影がz1からz3に変わっていることに注意。ボタンは無く
                   </div>
                   <div class="row bottom">
                     <div class="flex flex-xs-auto">
-                      <div class="bars-title">使用頻度:</div>
+                      <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>

diff --git a/css/theme.css b/css/theme.css
@@ -30,10 +30,10 @@
 }
 
 .login-wrap.animate .visibleContent.testbox5, .login-wrap.animate .login-mask.testbox5, .login-wrap.animate .login-button.testbox5, .login-wrap.animate .login-button.testbox5:after .login-wrap.animate .visibleContent.testbox5{
-  animation-iteration-count: infinite !important;
-  -webkit-animation-iteration-count: infinite !important;
-  animation-duration: 8s !important;
-  -webkit-animation-duration: 8s !important;
+/*  animation-iteration-count: infinite !important;
+  -webkit-animation-iteration-count: infinite !important;*/
+  animation-duration: 0.2s !important;
+  -webkit-animation-duration: 0.2s !important;
   animation-direction: normal !important;
   -webkit-animation-direction: normal !important;
   animation-delay: 2s;