Skip to content

Commit effe68c

Browse files
muanmuan
committed
Change header and mobile view
1 parent 706bfbe commit effe68c

7 files changed

Lines changed: 68 additions & 80 deletions

File tree

‎_assets/responsive.scss‎

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,9 @@
11
@media (max-width: 480px) {
22

33
body {
4-
padding: 0 0 10px;
5-
.content {
6-
padding: 10px;
7-
}
4+
padding: 10px;
85
.site-header {
9-
margin: 0;
10-
padding: 15px;
11-
background-color: #202020;
12-
text-align: center;
13-
.site-title {
14-
color: #eee;
15-
margin-bottom: 0;
16-
margin-right: 20px;
17-
font-size: 14px;
18-
display: inline-block;
19-
.firstname:after {
20-
content: "'s";
21-
color: #aaa;
22-
}
23-
.lastname {
24-
display: none;
25-
}
26-
}
27-
nav { display: inline-block; }
28-
a {
29-
line-height: 1em;
30-
border: 0;
31-
}
6+
margin-bottom: 10px;
327
}
338
.fork-me, .tip {
349
display: none;

‎_assets/style.scss‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ body {
66
color: #343434;
77
line-height: 1.6em;
88
font-family: Ubuntu;
9-
padding: 20px 0;
9+
padding: 20px 10px;
1010
}
1111

1212
a {
@@ -26,28 +26,40 @@ hr { border: 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margi
2626
margin: auto;
2727
}
2828

29-
.site-header, .site-footer {
30-
padding: 25px;
29+
.site-footer {
3130
text-align: center;
31+
padding: 25px;
3232
}
3333

3434
.site-header {
3535
font-weight: bold;
3636
text-transform: uppercase;
3737
margin-bottom: 20px;
38-
nav a {
39-
border-bottom: 2px solid #6ad;
40-
}
38+
text-align: right;
4139
.site-title {
40+
&:hover {
41+
.block { background-color: #6AD; }
42+
.lastname { opacity: .7; color: #59b; }
43+
color: #59b;
44+
}
45+
.block {
46+
display: inline-block;
47+
width: 30px;
48+
height: 9px;
49+
margin-top: 1px;
50+
background-color: #ddd;
51+
margin-right: 10px;
52+
@include transition(.4s);
53+
}
54+
float: left;
4255
color: #676767;
4356
@include transition(.4s);
4457
text-transform: uppercase;
4558
display: block;
46-
font-size: 30px;
47-
margin-bottom: 25px;
59+
margin-bottom: 5px;
4860
font-weight: bold;
4961
.firstname { margin-right: 5px; }
50-
.lastname { opacity: .4 }
62+
.lastname { opacity: .4; @include transition(.4s); }
5163
}
5264
}
5365

@@ -109,7 +121,7 @@ hr { border: 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margi
109121
position: absolute;
110122
left: 10px;
111123
top: 10px;
112-
border: 8px solid #eee;
124+
border: 5px solid #eee;
113125
border-right-color: transparent;
114126
border-bottom-color: transparent;
115127
@include transition(.5s);

‎_includes/header.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<header class="site-header">
22
<a href="/" class="site-title">
3+
<div class="block"></div>
34
<span class="firstname">Mu-An</span><span class="lastname">Chiou</strong>
45
</a>
56
<nav>
67
{% for link in site.links %}
7-
<a id="ind-{{ link.name | downcase }}" href="{{ link.url }}">{{ link.name }}</a>&nbsp;&nbsp;&nbsp;&nbsp;
8+
<a id="ind-{{ link.name | downcase }}" href="{{ link.url }}">{{ link.name }}</a>
89
{% endfor %}
910
</nav>
1011
</header>

‎_layouts/index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,11 @@
66
</head>
77
<body>
88
<div class="wrapper">
9-
<header>
10-
{% include header.html %}
11-
</header>
9+
{% include header.html %}
1210
<section class="content">
1311
{{ content }}
1412
</section>
15-
<footer>
16-
{% include footer.html %}
17-
</footer>
13+
{% include footer.html %}
1814
</div>
1915
</body>
2016
</html>

‎about.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Woah a page dedicated to me
3+
title: Just an ordinary about page
44
---
55

66
**Mu-An Chiou** <small>(**邱慕安**)</small>.
@@ -9,7 +9,9 @@ I am a designer at [GitHub](https://github.com) and co-founder of [Zeczec](http:
99

1010
I am a **Taiwanese** from Taipei, have been in the UK for the past 5 years, currently based in **London**.
1111

12-
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).
12+
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.
13+
14+
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).
1315

1416
For my fellow internet dwellers, I'm on
1517
[Twitter](https://twitter.com/muanchiou),

‎assets/responsive.css‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,8 @@
11
@media (max-width: 480px) {
22
body {
3-
padding: 0 0 10px; }
4-
body .content {
5-
padding: 10px; }
3+
padding: 10px; }
64
body .site-header {
7-
margin: 0;
8-
padding: 15px;
9-
background-color: #202020;
10-
text-align: center; }
11-
body .site-header .site-title {
12-
color: #eee;
13-
margin-bottom: 0;
14-
margin-right: 20px;
15-
font-size: 14px;
16-
display: inline-block; }
17-
body .site-header .site-title .firstname:after {
18-
content: "'s";
19-
color: #aaa; }
20-
body .site-header .site-title .lastname {
21-
display: none; }
22-
body .site-header nav {
23-
display: inline-block; }
24-
body .site-header a {
25-
line-height: 1em;
26-
border: 0; }
5+
margin-bottom: 10px; }
276
body .fork-me, body .tip {
287
display: none; }
298
body .pagination {

‎assets/style.css‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ body {
44
color: #343434;
55
line-height: 1.6em;
66
font-family: Ubuntu;
7-
padding: 20px 0; }
7+
padding: 20px 10px; }
88

99
a {
1010
color: #6AD;
@@ -25,17 +25,17 @@ hr {
2525
width: 100%;
2626
margin: auto; }
2727

28-
.site-header, .site-footer {
29-
padding: 25px;
30-
text-align: center; }
28+
.site-footer {
29+
text-align: center;
30+
padding: 25px; }
3131

3232
.site-header {
3333
font-weight: bold;
3434
text-transform: uppercase;
35-
margin-bottom: 20px; }
36-
.site-header nav a {
37-
border-bottom: 2px solid #6ad; }
35+
margin-bottom: 20px;
36+
text-align: right; }
3837
.site-header .site-title {
38+
float: left;
3939
color: #676767;
4040
-webkit-transition: 0.4s;
4141
-moz-transition: 0.4s;
@@ -44,13 +44,36 @@ hr {
4444
transition: 0.4s;
4545
text-transform: uppercase;
4646
display: block;
47-
font-size: 30px;
48-
margin-bottom: 25px;
47+
margin-bottom: 5px;
4948
font-weight: bold; }
49+
.site-header .site-title:hover {
50+
color: #59b; }
51+
.site-header .site-title:hover .block {
52+
background-color: #6AD; }
53+
.site-header .site-title:hover .lastname {
54+
opacity: .7;
55+
color: #59b; }
56+
.site-header .site-title .block {
57+
display: inline-block;
58+
width: 30px;
59+
height: 9px;
60+
margin-top: 1px;
61+
background-color: #ddd;
62+
margin-right: 10px;
63+
-webkit-transition: 0.4s;
64+
-moz-transition: 0.4s;
65+
-ms-transition: 0.4s;
66+
-o-transition: 0.4s;
67+
transition: 0.4s; }
5068
.site-header .site-title .firstname {
5169
margin-right: 5px; }
5270
.site-header .site-title .lastname {
53-
opacity: 0.4; }
71+
opacity: .4;
72+
-webkit-transition: 0.4s;
73+
-moz-transition: 0.4s;
74+
-ms-transition: 0.4s;
75+
-o-transition: 0.4s;
76+
transition: 0.4s; }
5477

5578
.posts {
5679
text-align: center;
@@ -113,7 +136,7 @@ hr {
113136
position: absolute;
114137
left: 10px;
115138
top: 10px;
116-
border: 8px solid #eee;
139+
border: 5px solid #eee;
117140
border-right-color: transparent;
118141
border-bottom-color: transparent;
119142
-webkit-transition: 0.5s;

0 commit comments

Comments
 (0)