Skip to content

Commit

Permalink
refactor: social icon with Font Awesome 重构优化社交图标显示
Browse files Browse the repository at this point in the history
  • Loading branch information
@MOxFIVE
MOxFIVE committed Oct 21, 2015
1 parent 588d6eb commit 94a8be4
Show file tree
Hide file tree
Showing 10 changed files with 151 additions and 103 deletions.
30 changes: 20 additions & 10 deletions _config.yml
View file
Expand Up @@ -8,17 +8,27 @@ menu:

# SubNav
subnav:
github: "#"
weibo: "#"
rss: "#"
zhihu: "#"
#douban: "#"
#mail: "#"
#facebook: "#"
#google: "#"
#twitter: "#"
#linkedin: "#"
# RSS plugin: https://github.com/hexojs/hexo-generator-feed
# Encrypt email 加密邮件地址 http://tool.chacuo.net/commonhideinfo
Email: "mailto:123@123.com"
#新浪微博: "sina weibo"
GitHub: "#"
#V2EX: "#"
RSS: "/atom.xml"
#知乎: "zhihu"
#豆瓣: "douban"
#Facebook: "#"
#Google: "#"
#Twitter: "#"
#LinkedIn: "#"
#QQ: "#"
#微信: "Wechat"
#PayPal: "#"
#StackOverflow: "#"
#Instagram: "#"
#Flickr: "#"

# Customize feed link 自定义订阅地址
rss: /atom.xml

# true: 个性图片背景, false: 淳朴灰白背景
Expand Down
3 changes: 3 additions & 0 deletions layout/_partial/background.ejs
View file
Expand Up @@ -18,5 +18,8 @@
.post-nav-button {
background: #ececec;
}
#header .header-nav .social #GitHub {
background-color: #bfd3ec;
}
</style>
<% } %>
6 changes: 3 additions & 3 deletions layout/_partial/left-col.ejs
View file
Expand Up @@ -74,11 +74,11 @@
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<ul class="social">
<% for (var i in theme.subnav){ %>
<a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><%= i %></a>
<li id="<%= i %>"><a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"></a></li>
<%}%>
</div>
</ul>
</nav>
</section>

Expand Down
10 changes: 5 additions & 5 deletions layout/_partial/mobile-nav.ejs
View file
Expand Up @@ -23,11 +23,11 @@
</ul>
</nav>
<nav class="header-nav">
<div class="social">
<% for (var i in theme.subnav){ %>
<a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"><%= i %></a>
<%}%>
</div>
<ul class="social">
<% for (var i in theme.subnav){ %>
<li id="<%= i %>"><a class="<%= i %>" target="_blank" href="<%- url_for(theme.subnav[i]) %>" title="<%= i %>"></a></li>
<%}%>
</ul>
</nav>
</header>
</div>
Expand Down
205 changes: 120 additions & 85 deletions source/css/_partial/main.styl
View file
Expand Up @@ -176,100 +176,135 @@
position: absolute;
transition: transform .3s ease-in;
.social {
margin-right:15px;
margin-right:11px;
margin-top:10px;
text-align: center;
a {
li {
display: inline-block;
width: 37px;
border-radius:50%;
display:-moz-inline-stack;
display:inline-block;
vertical-align:middle;
*vertical-align:auto;
zoom:1;
*display:inline;
text-indent:-9999px;
margin:0 8px 15px 8px;
opacity:0.7;
width:28px;
height:28px;
transition:0.3s;
&:hover {
opacity:1
}
}
a:last-of-type {
margin-right:0
}
a.weibo {
background:url('/img/weibo.png') center no-repeat #aaaaff;
border:1px solid #aaaaff;
&:hover {
border:1px solid #aaaaff;
}
}
a.rss {
background:url('/img/rss.png') center no-repeat #ef7522;
border:1px solid #ef7522;
&:hover {
border:1px solid #cf5d0f;
}
}
a.github {
background:url('/img/github.png') center no-repeat #afb6ca;
border:1px solid #afb6ca;
&:hover {
border:1px solid #909ab6;
}
}
a.facebook {
background:url('/img/facebook.png') center no-repeat #3b5998;
border:1px solid #3b5998;
&:hover {
border:1px solid #2d4373;
}
}
a.google {
background:url('/img/google.png') center no-repeat #c83d20;
border:1px solid #c83d20;
&:hover {
border:1px solid #9c3019;
}
}
a.twitter {
background:url('/img/twitter.png') center no-repeat #55cff8;
border:1px solid #55cff8;
&:hover {
border:1px solid #24c1f6;
margin-right: 3px;
margin-bottom: 6px;
font: 22px FontAwesome;
background: #6f7170;
opacity: .58;
text-align: center;
a {
line-height: 37px;
color: white;
}
}
a.linkedin {
background:url('/img/linkedin.png') center no-repeat #005a87;
border:1px solid #005a87;
&:hover {
border:1px solid #006b98;
font-size: 24px;
opacity: 1;
}
}
a.zhihu {
background:url('/img/zhihu.png') center no-repeat #0078d8;
border:1px solid #0078d8;
&:hover {
border:1px solid #0078d8;
}
#新浪微博 {
background:url('/img/weibo.png') center no-repeat #ecc260;
}
a.douban {
background:url('/img/douban.png') center no-repeat #06c611;
border:1px solid #06c611;
&:hover {
border:1px solid #06c611;
}
}
a.mail {
background:url('/img/mail.png') center no-repeat #005a87;
border:1px solid #005a87;
&:hover {
border:1px solid #006b98;
}
.新浪微博:before {
content: "\f18a";
color: transparent;
}
#GitHub {
background: url('/img/github.png') center no-repeat white;
}
.GitHub:before {
content: "\f113";
color: transparent;
}
#V2EX {
background: url('/img/v2ex.png') center no-repeat #e4cdb4;
}
.V2EX:before {
content: "\f073";
color: transparent;
}
#RSS {
background: #ef7522;
}
.RSS:before {
content: "\f09e";
}
#知乎 {
background: url('/img/zhihu.png') center no-repeat #0078d8;
}
.知乎:before {
content: "\f073";
color: transparent;
}
#豆瓣 {
background: url('/img/douban.png') center no-repeat #06c611;
}
.豆瓣:before {
content: "\f073";
color: transparent;
}
#Google {
background: #c83d20;
}
.Google:before {
content: "\f1a0";
}
#Twitter {
background: #55cff8;
}
.Twitter:before {
content: "\f099";
}
#LinkedIn {
background: #005a87;
}
.LinkedIn:before {
content: "\f0e1";
}
#Email {
background: #6fc0e4;
}
.Email:before {
content: "\f003";
}
#Facebook {
background: #3b5998;
}
.Facebook:before {
content: "\f09a";
}
#QQ {
background: #1cbcef;
}
.QQ:before {
content: "\f1d6";
}
#微信 {
background: #8cdc49;
}
.微信:before {
content: "\f1d7";
}
#PayPal {
background: #03a4e4;
}
.PayPal:before {
content: "\f1ed";
}
#StackOverflow {
background: #f48024;
}
.StackOverflow:before {
content: "\f16c";
}
#Instagram {
background: #bab0a6;
}
.Instagram:before {
content: "\f16d";
}
#Flickr {
background: #0365c8;
}
.Flickr:before {
content: "\f16e";
}
}
}
.switch-part{
Expand Down
Binary file modified source/img/douban.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/img/github.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/img/v2ex.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/img/weibo.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/img/zhihu.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 94a8be4

Please sign in to comment.