Corepress 主题 友链模块美化

1. 友链申请按钮美化

对于友链模块，阿蛮君首先觉得友链申请应该让别人觉得按钮是可以点击的，我的美化 CSS 如下：

/* 按钮美化 */    
.friend-links-apply {    
padding: 5px 10px;    
color: white !important;    
text-decoration: none;    
border-radius: 50px;    
background: linear-gradient(to right, #fd0808, #df05ed);    
background-size: 200% auto;    
animation: flowingGradient 3s ease-in-out infinite;    
opacity: 1;    
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);    
filter: brightness(130%);    
}    
.friend-links-apply:hover {    
transform: scale(1.1);    
-webkit-transform: scale(1.1);    
-moz-transform: scale(1.1);    
-o-transform: scale(1.1);    
-ms-transform: scale(1.1);    
}    
@keyframes flowingGradient {    
0% {    
background-position: 0% 50%;    
}    
50% {    
background-position: 100% 50%;    
}    
100% {    
background-position: 0% 50%;    
}    
}    
.friend-links .list-plane-title > div {    
/* 修复对齐效果 */    
line-height: 30px;    
}    
.fa-paper-plane:hover {    
color:red;    
}

2. 友链鼠标悬浮效果

当鼠标放友链上时，呈现放大效果。

/* 友链a标签放大效果 */
.friend-links-list a:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}

3. 多行友情链接时添加空隙

如果友情链接不止一行时，会显得很紧凑，可以适当添加个 margin-bottom。

/** 友情链接多行时显示过于紧凑 **/    
.friend-links-list {    
padding: 10px 10px 10px 15px !important;    
}    
.friend-links-list a {    
margin-bottom: 10px;    
}

4. 手机显示底部导航并美化

Corepress 手机默认不显示友情链接，如果需要可以添加如下代码，至于美化的话根据自己实际情况需要

/** 手机显示底部导航并美化 */
@media screen and (max-width: 800px) {
  .friend-links {
    display: block !important;
  }
  .friend-links .list-plane-title {
/*      padding: 5px 0px 5px 0px; */
      padding: 0px;
    }
    .friend-links-list img {
        display: none !important;
    }
    .friend-links .list-plane-title > div {
        padding: 5px 0px 5px 15px;
        font-size: 16px;
        clear: both;
    }
    .list-plane-linksdescribe, .friend-links-apply{
        display:none!important
    }
    .friend-links-list {
        padding: 10px !important;
        margin: 0 5px;
        display: block;
    }
    .friend-links-list a {
        font-size: 12px;
        margin-bottom: 5px;
        color: #262525!important;
        -webkit-tap-highlight-color: transparent;
    }
    .friend-links-item {
        margin-right: 0px;
    }
    .friend-links-item:not(:first-child):before {
        content: "";
        width: 4px;
        height: 4px;
        margin: 0 .3em;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        background:#262525;
        opacity: .3;
        vertical-align: .2em;
    }
}