Change header and mobile view

muan · Sep 24, 2013 · effe68c · effe68c
1 parent 706bfbe
commit effe68c
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 80 deletions.
diff --git a/_assets/responsive.scss b/_assets/responsive.scss
@@ -1,34 +1,9 @@
 @media (max-width: 480px) {
 
   body {
-    padding: 0 0 10px;
-    .content {
-      padding: 10px;
-    }
+    padding: 10px;
     .site-header {
-      margin: 0;
-      padding: 15px;
-      background-color: #202020;
-      text-align: center;
-      .site-title {
-        color: #eee;
-        margin-bottom: 0;
-        margin-right: 20px;
-        font-size: 14px;
-        display: inline-block;
-        .firstname:after {
-          content: "'s";
-          color: #aaa;
-        }
-        .lastname {
-          display: none;
-        }
-      }
-      nav { display: inline-block; } 
-      a {
-        line-height: 1em;
-        border: 0;
-      }
+      margin-bottom: 10px;
     }
     .fork-me, .tip {
       display: none;

diff --git a/_assets/style.scss b/_assets/style.scss
@@ -6,7 +6,7 @@ body {
   color: #343434;
   line-height: 1.6em;
   font-family: Ubuntu;
-  padding: 20px 0;
+  padding: 20px 10px;
 }
 
 a {
@@ -26,28 +26,40 @@ hr { border: 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margi
   margin: auto;
 }
 
-.site-header, .site-footer {
-  padding: 25px;
+.site-footer {
   text-align: center;
+  padding: 25px;
 }
 
 .site-header {
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 20px;
-  nav a {
-    border-bottom: 2px solid #6ad;
-  }
+  text-align: right;
   .site-title {
+    &:hover {
+      .block { background-color: #6AD; }
+      .lastname { opacity: .7; color: #59b; }
+      color: #59b;
+    }
+    .block {
+      display: inline-block;
+      width: 30px;
+      height: 9px;
+      margin-top: 1px;
+      background-color: #ddd;
+      margin-right: 10px;
+      @include transition(.4s);
+    }
+    float: left;
     color: #676767;
     @include transition(.4s);
     text-transform: uppercase;
     display: block;
-    font-size: 30px;
-    margin-bottom: 25px;
+    margin-bottom: 5px;
     font-weight: bold;
     .firstname { margin-right: 5px; }
-    .lastname { opacity: .4 }
+    .lastname { opacity: .4; @include transition(.4s); }
   }
 }
 
@@ -109,7 +121,7 @@ hr { border: 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margi
   position: absolute;
   left: 10px;
   top: 10px;
-  border: 8px solid #eee;
+  border: 5px solid #eee;
   border-right-color: transparent;
   border-bottom-color: transparent;
   @include transition(.5s);

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,10 +1,11 @@
 <header class="site-header">
   <a href="/" class="site-title">
+    <div class="block"></div>
     <span class="firstname">Mu-An</span><span class="lastname">Chiou</strong>
   </a>
   <nav>
     {% for link in site.links %}
-      <a id="ind-{{ link.name | downcase }}" href="{{ link.url }}">{{ link.name }}</a>&nbsp;&nbsp;&nbsp;&nbsp;
+      <a id="ind-{{ link.name | downcase }}" href="{{ link.url }}">{{ link.name }}</a>
     {% endfor %}
   </nav>
 </header>

diff --git a/_layouts/index.html b/_layouts/index.html
@@ -6,15 +6,11 @@
   </head>
   <body>
     <div class="wrapper">
-      <header>
-        {% include header.html %}
-      </header>
+      {% include header.html %}
       <section class="content">
         {{ content }}
       </section>
-      <footer>
-        {% include footer.html %}
-      </footer>
+      {% include footer.html %}
     </div>
   </body>
 </html>
diff --git a/about.md b/about.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Woah a page dedicated to me
+title: Just an ordinary about page
 ---
 
 **Mu-An Chiou** <small>(**邱慕安**)</small>. 
@@ -9,7 +9,9 @@ I am a designer at [GitHub](https://github.com) and co-founder of [Zeczec](http:
 
 I am a **Taiwanese** from Taipei, have been in the UK for the past 5 years, currently based in **London**.
 
-I started (trying) to do what I do now when I was 11, got into **French** in university but quickly dropped out, studied **Product Design** later instead, then went back doing web after graduated, because on the internet you can **see the result much quicker** and I don't have patience. You can find some of my product design works [here](http://be.net/muan).
+I started (trying) to do what I do now when I was 11, got into **French** in university but quickly dropped out, studied **Product Design** later instead, then went back doing web after graduated. 
+
+I like web much more, because on the internet you **see the result much quicker**, and I don't have patience. You can find some of my product design works [here](http://be.net/muan).
 
 For my fellow internet dwellers, I'm on 
 [Twitter](https://twitter.com/muanchiou),

diff --git a/assets/responsive.css b/assets/responsive.css
@@ -1,29 +1,8 @@
 @media (max-width: 480px) {
   body {
-    padding: 0 0 10px; }
-    body .content {
-      padding: 10px; }
+    padding: 10px; }
     body .site-header {
-      margin: 0;
-      padding: 15px;
-      background-color: #202020;
-      text-align: center; }
-      body .site-header .site-title {
-        color: #eee;
-        margin-bottom: 0;
-        margin-right: 20px;
-        font-size: 14px;
-        display: inline-block; }
-        body .site-header .site-title .firstname:after {
-          content: "'s";
-          color: #aaa; }
-        body .site-header .site-title .lastname {
-          display: none; }
-      body .site-header nav {
-        display: inline-block; }
-      body .site-header a {
-        line-height: 1em;
-        border: 0; }
+      margin-bottom: 10px; }
     body .fork-me, body .tip {
       display: none; }
     body .pagination {

diff --git a/assets/style.css b/assets/style.css
@@ -4,7 +4,7 @@ body {
   color: #343434;
   line-height: 1.6em;
   font-family: Ubuntu;
-  padding: 20px 0; }
+  padding: 20px 10px; }
 
 a {
   color: #6AD;
@@ -25,17 +25,17 @@ hr {
   width: 100%;
   margin: auto; }
 
-.site-header, .site-footer {
-  padding: 25px;
-  text-align: center; }
+.site-footer {
+  text-align: center;
+  padding: 25px; }
 
 .site-header {
   font-weight: bold;
   text-transform: uppercase;
-  margin-bottom: 20px; }
-  .site-header nav a {
-    border-bottom: 2px solid #6ad; }
+  margin-bottom: 20px;
+  text-align: right; }
   .site-header .site-title {
+    float: left;
     color: #676767;
     -webkit-transition: 0.4s;
     -moz-transition: 0.4s;
@@ -44,13 +44,36 @@ hr {
     transition: 0.4s;
     text-transform: uppercase;
     display: block;
-    font-size: 30px;
-    margin-bottom: 25px;
+    margin-bottom: 5px;
     font-weight: bold; }
+    .site-header .site-title:hover {
+      color: #59b; }
+      .site-header .site-title:hover .block {
+        background-color: #6AD; }
+      .site-header .site-title:hover .lastname {
+        opacity: .7;
+        color: #59b; }
+    .site-header .site-title .block {
+      display: inline-block;
+      width: 30px;
+      height: 9px;
+      margin-top: 1px;
+      background-color: #ddd;
+      margin-right: 10px;
+      -webkit-transition: 0.4s;
+      -moz-transition: 0.4s;
+      -ms-transition: 0.4s;
+      -o-transition: 0.4s;
+      transition: 0.4s; }
     .site-header .site-title .firstname {
       margin-right: 5px; }
     .site-header .site-title .lastname {
-      opacity: 0.4; }
+      opacity: .4;
+      -webkit-transition: 0.4s;
+      -moz-transition: 0.4s;
+      -ms-transition: 0.4s;
+      -o-transition: 0.4s;
+      transition: 0.4s; }
 
 .posts {
   text-align: center;
@@ -113,7 +136,7 @@ hr {
   position: absolute;
   left: 10px;
   top: 10px;
-  border: 8px solid #eee;
+  border: 5px solid #eee;
   border-right-color: transparent;
   border-bottom-color: transparent;
   -webkit-transition: 0.5s;