mirrors/tale
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Modify nav bar style

Browse source
This commit is contained in:
Chester How 2017-03-22 15:47:40 +08:00
parent 6bd82c7871
commit c996aa0c07
6 changed files with 100 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
_layouts/default.html
View file

@ -4,36 +4,28 @@
{% include head.html %} {% include head.html %}
<body> <body>
<nav class="nav">
<div class="container"> <div class="nav-container">
<header> <a href="{{ site.baseurl }}/">
<a href="{{ site.baseurl }}/" title="Home"> <h2 class="nav-title">{{ site.title }}</h2>
<h2>{{ site.title | downcase }}</h2>
</a> </a>
<h4 class="nav-subtitle">{{ site.subtitle }}</h4>
<div class="line"></div> <ul>
<li><a href="#">About</a></li>
<h4>{{ site.subtitle | upcase }}</h4> <li><a href="#">Posts</a></li>
<li><a href="#">Updates</a></li>
<div class="nav-container"> </ul>
<nav>
<a href="#">about</a>
<a href="#">posts</a>
<a href="#">updates</a>
</nav>
</div>
</header>
<main>
{{ content }}
</main>
<footer>
<span>
&copy; <time datetime="{{ site.time }}">{{ site.time | date: '%Y' }}</time> Chester How. All rights reserved.
</span>
</footer>
</div> </div>
</nav>
<main>
{{ content }}
</main>
<footer>
<span>
&copy; <time datetime="{{ site.time }}">{{ site.time | date: '%Y' }}</time> Chester How. All rights reserved.
</span>
</footer>
</body> </body>
</html> </html>

2
_sass/_base.scss
View file

@ -30,7 +30,7 @@ h4,
h5, h5,
h6 { h6 {
color: $default-shade; color: $default-shade;
font-family: $palatino; font-family: $sans-font;
line-height: normal; line-height: normal;
} }

26
_sass/_catalogue.scss
View file

@ -2,6 +2,7 @@
text-align: center; text-align: center;
&-item { &-item {
display: inline-block;
padding: 1.5rem 0; padding: 1.5rem 0;
&:first-child { &:first-child {
@ -11,20 +12,27 @@
&:last-child { &:last-child {
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }
&:hover .catalogue-line,
&:focus .catalogue-line {
width: 6rem;
}
} }
&-title { &-title {
@include transition(all .3s ease-out);
border-bottom: 1px solid $white;
border-top: 1px solid $white;
color: $default-shade; color: $default-shade;
font-family: $palatino; display: block;
font-size: 1.5rem; font-family: $sans-font;
font-size: 2rem;
font-weight: 700; font-weight: 700;
padding: .5rem 1rem; margin: .5rem 0;
}
&:hover { &-line {
border-color: $default-tint; @include transition(all .3s ease-out);
} border-top: .2rem solid $default-shade;
display: block;
margin: 0 auto;
width: 2rem;
} }
} }

88
_sass/_layout.scss
View file

@ -4,20 +4,30 @@
width: 80%; width: 80%;
} }
header { main,
padding: 2rem 0 0; footer,
text-align: center; .nav-container {
margin: 0 auto;
max-width: 800px;
width: 80%;
}
* { .nav {
margin: 0; box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .1);
overflow: auto;
&-container {
margin: 1rem auto;
position: relative;
text-align: center;
} }
h2 { &-title {
@include transition(all .3s ease-out); @include transition(all .2s ease-out);
color: $default-color; color: $default-color;
display: inline-block; display: inline-block;
font-size: 2.8rem; margin: 0;
font-weight: 400; padding-right: .2rem;
&:hover, &:hover,
&:focus { &:focus {
@ -25,39 +35,59 @@ header {
} }
} }
h4 { &-subtitle {
color: $default-tint; color: $default-tint;
font-size: .8rem; display: inline-block;
font-family: $palatino;
font-weight: 400; font-weight: 400;
letter-spacing: .1rem; margin: 0;
} }
.line { ul {
border-top: 1px solid $default-color; list-style-type: none;
display: block; margin: 1rem 0 0;
margin: 0 auto .8rem; padding: 0;
width: 1rem; text-align: center;
} }
.nav-container { li {
border-bottom: .5px solid $grey-2; @include transition(all .2s ease-out);
border-top: .5px solid $grey-2; color: $default-color;
margin-top: 1.5rem; display: inline-block;
opacity: .6;
padding: 0 2rem 0 0;
&:last-child {
padding-right: 0;
}
&:hover,
&:focus {
opacity: 1;
}
} }
nav { a {
display: flex; color: $default-color;
justify-content: space-around; font-family: $sans-font;
margin: .5rem auto; }
max-width: 350px; }
a { @media (min-width: 600px) {
color: $default-color; .nav {
font-family: $palatino; &-container {
text-align: left;
}
ul {
bottom: 0;
position: absolute;
right: 0;
} }
} }
} }
footer { footer {
font-family: $palatino; font-family: $palatino;
padding: 2rem 0; padding: 2rem 0;

2
_sass/_post.scss
View file

@ -21,7 +21,7 @@
} }
&-line { &-line {
border-top: .4rem solid $default-color; border-top: .4rem solid $default-shade;
display: block; display: block;
margin: 0 auto 3rem; margin: 0 auto 3rem;
width: 4rem; width: 4rem;

2
index.html
View file

@ -7,7 +7,9 @@ title: Home
{% for post in paginator.posts %} {% for post in paginator.posts %}
<div class="catalogue-item"> <div class="catalogue-item">
<a href="{{ post.url | prepend: site.url }}" class="catalogue-title">{{ post.title }}</a> <a href="{{ post.url | prepend: site.url }}" class="catalogue-title">{{ post.title }}</a>
<div class="catalogue-line"></div>
</div> </div>
<br>
{% endfor %} {% endfor %}
</div> </div>