Permalink
Browse files

refactor: social icon style | 精简社交图标栏代码

  • Loading branch information...
MOxFIVE committed Feb 11, 2016
1 parent 6dacdce commit 6740866be0e0b1b0af31112e4c36506c92660c08
@@ -0,0 +1,66 @@
#header .header-nav .social
margin-top:10px
text-align center
font-family Arial
li
display inline-block
width 37px
border-radius:50%
margin-right 3px
margin-bottom 6px
font 23px FontAwesome
background #6f7170
opacity .58
text-align center
a
line-height 37px
color white
&:hover
opacity 1
transform scale(1.1)
&:nth-child(5n), &:last-child
margin-right 0
img-logo = {
"新浪微博": #ecc260
"知乎": #0078d8
"豆瓣": #06c611
GitHub: white
V2EX: #e4cdb4
TiddlyWiki: #6283dd
"简书": #e99888
SegmentFault: #018f56
"网易云音乐": #e51e02
"虾米音乐": #ff6a00
}
for name, color in img-logo
.{name}:before
content '\f18a'
color transparent
#{name}
background: url('/img/' + name + '.png') center no-repeat color
// icon from Font Awesome
font-logo = RSS f09e #ef7522,
Google f1a0 #c83d20,
Twitter f099 #55cff8,
LinkedIn f0e1 #005a87,
Email f003 #6fc0e4,
Facebook f09a #3b5998,
QQ f1d6 #1cbcef,
'微信' f1d7 #8cdc49,
PayPal f1ed #03a4e4,
StackOverflow f16c #f48024,
Instagram f16d #bab0a6,
Flickr f16e #0365c8,
reddit f281 #0278d1,
Medium f23a #00ab6b,
Tumblr f173 #3a5976,
_500px f26e #0099e5
for i in font-logo
.{i[0]}:before
content '\' + i[1]
#{i[0]}
background i[2]
@@ -190,176 +190,6 @@
width: 100%;
position: absolute;
transition: transform .3s ease-in;
.social {
margin-top:10px;
text-align: center;
font-family: Arial;
li {
display: inline-block;
width: 37px;
border-radius:50%;
margin-right: 3px;
margin-bottom: 6px;
font: 23px FontAwesome;
background: #6f7170;
opacity: .58;
text-align: center;
a {
line-height: 37px;
color: white;
}
&:hover {
opacity: 1;
transform: scale(1.08);
}
&:nth-child(5n), &:last-child {
margin-right: 0;
}
}
.新浪微博::before,
.V2EX::before,
.知乎::before,
.豆瓣::before,
.TiddlyWiki::before,
.SegmentFault::before,
.简书::before,
.虾米音乐::before,
.网易云音乐::before {
content: "\f18a";
color: transparent;
}
#新浪微博 {
background:url('/img/weibo.png') center no-repeat #ecc260;
}
#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;
}
#RSS {
background: #ef7522;
}
.RSS:before {
content: "\f09e";
}
#知乎 {
background: url('/img/zhihu.png') center no-repeat #0078d8;
}
#豆瓣 {
background: url('/img/douban.png') center no-repeat #06c611;
}
#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";
}
#Medium {
background: #00ab6b;
}
.Medium:before {
content: "\f23a";
}
#reddit {
background: #0278d1;
}
.reddit:before {
content: "\f281";
}
#TiddlyWiki {
background: url('/img/TiddlyWiki.png') center no-repeat #6283dd;
}
#Tumblr {
background: #3a5976;
}
.Tumblr:before {
content: "\f173";
}
#_500px {
background: #0099e5;
}
._500px:before {
content: "\f26e";
}
#SegmentFault {
background: url('/img/SegmentFault.png') center no-repeat #018f56;
}
#简书 {
background: url('/img/简书.png') center no-repeat #e99888;
}
#网易云音乐 {
background: url('/img/网易云音乐.png') center no-repeat #e51e02;
}
#虾米音乐 {
background: url('/img/虾米音乐.png') center no-repeat #ff6a00;
}
}
}
.switch-part{
width: 100%;
@@ -395,6 +225,8 @@
}
}
@require "customise/social-icon"
.duoshuo {
padding: 0 40px;
}
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 comments on commit 6740866

Please sign in to comment.