About page for small screen

This commit is contained in:
yafeilee 2016-04-27 17:01:01 +08:00
parent 26eb22b895
commit 386a6f89a3
3 changed files with 63 additions and 49 deletions

View File

@ -36,6 +36,10 @@
left: 0;
}
.responsive-button {
padding: 0.7rem 1rem;
}
a {
word-wrap: break-word;
}
@ -47,45 +51,45 @@
}
}
}
.top-bar-wrapper {
background: 0 0;
transition: background .5s ease-in-out,padding .5s ease-in-out;
&.active {
background: #000;
border-bottom: 1px solid #666;
.top-bar {
margin: 0.5rem 0;
}
}
.top-bar-wrapper {
background: 0 0;
transition: background .5s ease-in-out,padding .5s ease-in-out;
&.active {
background: #000;
border-bottom: 1px solid #666;
.top-bar {
background: 0 0;
margin: 1.5rem 0;
.name {
font-size: 1.325rem;
}
}
.top-bar ul{
& {
background: 0 0;
}
li, li a {
background: 0 0;
font-size: 1rem;
color: #fefefe;
}
li a:hover {
background: #666;
}
li a.active {
background: #4C4C4C;
}
margin: 0.5rem 0;
}
}
.top-bar {
background: 0 0;
margin: 1.5rem 0;
.name {
font-size: 1.325rem;
}
}
.top-bar ul{
& {
background: 0 0;
}
li, li a {
background: 0 0;
font-size: 1rem;
color: #fefefe;
}
li a:hover {
background: #666;
}
li a.active {
background: #4C4C4C;
}
}
}
//}
p {

View File

@ -3,13 +3,17 @@
- content_for(:main) do
.about-page
.top-bar-wrapper.contain-to-grid.fixed
.row
.small-12.columns
nav#about-top-bar.top-bar
.top-bar-left
ul.menu
li
a.name href='/' Back to WinDy Blog
nav#about-top-bar.top-bar
.top-bar-left
ul.menu
li
a.name href='/' Back to WinDy Blog
.top-bar-right
ul.menu
li
.responsive-button data-responsive-toggle="responsive-menu" data-hide-for="medium"
button class="menu-icon" type="button" data-toggle=''
#responsive-menu
.top-bar-right
ul.menu
li

View File

@ -11,13 +11,19 @@
.top-bar-right
ul.menu
li
a href='#about' 关于
li
a href='#skill' 技能
li
a href='#work' 作品
li
a href='#contact' 联系
.responsive-button data-responsive-toggle="responsive-menu" data-hide-for="medium"
button class="menu-icon" type="button" data-toggle=''
#responsive-menu
.top-bar-right
ul.menu
li
a href='#about' 关于
li
a href='#skill' 技能
li
a href='#work' 作品
li
a href='#contact' 联系
#intro
header.intro
.intro-heading