Permalink
Browse files

refactor: vertical centering 垂直居中

Use table & table cell to achieve nav vertical centering;
重构代码,用表格实现链接靠边垂直居中。

Closes #7
  • Loading branch information...
MOxFIVE committed Sep 6, 2015
1 parent 620cd5e commit 2bde796afc75cfa5d4e70f08fa340a656155cd6f
Showing with 53 additions and 49 deletions.
  1. +11 −14 themes/Yilia/layout/_partial/post/nav.ejs
  2. +42 −35 themes/Yilia/source/css/_partial/article.styl
@@ -1,22 +1,19 @@
<% if (post.prev || post.next){ %>
<nav id="article-nav">
<% if (post.prev){ %>
<a href="<%- url_for(post.prev.path) %>" id="article-nav-newer" class="article-nav-link-wrap">
<strong class="article-nav-caption"><</strong>
<div class="article-nav-title">
<% if (post.prev.title){ %>
<%= post.prev.title %>
<% } else { %>
(no title)
<% } %>
</div>
</a>
<div id="article-nav-newer" class="article-nav-title">
<a href="<%- url_for(post.prev.path) %>">
<%= post.prev.title %>
</a>
</div>
<% } %>
<% if (post.next){ %>
<a href="<%- url_for(post.next.path) %>" id="article-nav-older" class="article-nav-link-wrap">
<div class="article-nav-title"><%= post.next.title %></div>

This comment has been minimized.

Show comment
Hide comment
@MOxFIVE

MOxFIVE Sep 7, 2015

Owner
  • 避免在<a>标签中嵌套<div>等块级元素,部分模板解析引擎会误解析。如果样式需要可使用<span>等标签代替然后通过css来控制样式
@MOxFIVE

MOxFIVE Sep 7, 2015

Owner
  • 避免在<a>标签中嵌套<div>等块级元素,部分模板解析引擎会误解析。如果样式需要可使用<span>等标签代替然后通过css来控制样式
<strong class="article-nav-caption">></strong>
</a>
<div id="article-nav-older" class="article-nav-title">
<a href="<%- url_for(post.next.path) %>">
<%= post.next.title %>
</a>
</div>
<% } %>
</nav>
<% } %>
@@ -333,46 +333,53 @@ body {
}
}
#article-nav{
margin: 3em 0 1em 0;
padding: 1em;
#article-nav {
display: table;
width: 100%;
height: 3em;
margin: 1.5em auto;
background: #88acdb;
.article-nav-link-wrap{
margin: 0px 1em 0px 1em;
font-size: 14px;
color: #333;
.article-nav-title{
display: inline-block;
font-size: 1.1em;
color: white;
transition: color 0.3s;
}
strong{
background: #ddd;
color: #fff;
border-radius: 100%;
width: 1.1em;
height: 1.1em;
display: inline-block;
text-align: center;
transition: background 0.3s;
}
&:hover{
strong{
background: #4d4d4d;
}
.article-nav-title{
font-weight: bold;
font-size: 1.12em;
}
}
}
.article-nav-title {
display: table-cell;
vertical-align: middle;
a {
color: white;
}
#article-nav-older{
float: right;
a:hover {
font-weight: bold;
color: #4d4d4d;
}
}
#article-nav-older {
text-align: right;
padding-right: 1em;
&:after {
padding-left:0.5em;
content:"→";
color: white;
font-weight: bold;
font-family: Calibri;
}
}
#article-nav-newer {
text-align: left;
padding-left: 1em;
&:before {
padding-right:0.5em;
content:"←";
color: white;
font-weight: bold;
font-family: Calibri;
}
}
/*toc*/
#tocButton {
background: lightblue;

0 comments on commit 2bde796

Please sign in to comment.