diff --git a/_assets/responsive.scss b/_assets/responsive.scss index 0e5ea676..9758b9cd 100644 --- 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 index 5eddfbc4..0b91b782 100644 --- 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 index a0df2a4e..e2c78611 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,10 +1,11 @@
+
Mu-AnChiou
diff --git a/_layouts/index.html b/_layouts/index.html index 3ecae395..760f4745 100644 --- a/_layouts/index.html +++ b/_layouts/index.html @@ -6,15 +6,11 @@
-
- {% include header.html %} -
+ {% include header.html %}
{{ content }}
- + {% include footer.html %}
diff --git a/about.md b/about.md index ab130ec8..2d483395 100644 --- 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** (**邱慕安**). @@ -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 index eb57b815..981c2524 100644 --- 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 index dbaf4c89..970d4472 100644 --- 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;