diff --git a/scripts/tags/friends.js b/scripts/tags/friends.js
index fb2dcc35adadc11e0f967f904b7268190861b1c4..ccba41a1fa6b56eea0fdb1b54235a7f4cd0dbc6c 100644
--- a/scripts/tags/friends.js
+++ b/scripts/tags/friends.js
@@ -15,28 +15,33 @@ function friends(args) {
}
});
- return fs.readFile(path).then(function(datas) {
- if (!datas) {
+ return fs.readFile(path).then(function(data) {
+ if (!data) {
hexo.log.warn('Include file empty.');
return;
}
- var datas = JSON.parse(datas);
- var result = '
';
+ var friends = JSON.parse(data);
+ var renderHtml = '';
- return result;
+ return renderHtml;
});
}
diff --git a/source/css/_common/components/plugins/friends.styl b/source/css/_common/components/plugins/friends.styl
index 5a305bd8a2f555245062f8ba0290219849ead38d..4698515e7a20be16a104dd98e8d4576314787aad 100644
--- a/source/css/_common/components/plugins/friends.styl
+++ b/source/css/_common/components/plugins/friends.styl
@@ -3,12 +3,13 @@
max-width: 100%;
&__item {
- display: block;
+ display: flex;
float: left;
padding: .5rem 1rem;
width: 50%;
height: 100px;
transition: background-color .3s;
+ align-items: center;
&:hover {
background-color: alpha($blue-light, .1);
@@ -21,22 +22,15 @@
avatar-width = 60px;
&-avatar {
- display: inline-block;
+ margin: 0 1rem 0 0;
border-radius: 50% !important;
width: avatar-width;
height: avatar-width;
- vertical-align: middle;
}
- info-margin = 20px;
-
&-info {
- display: inline-block;
- margin-left: info-margin;
- padding-top: .6rem;
- width: 'calc(100% - %s)' % (avatar-width + info-margin);
- height: 100%;
- vertical-align: middle;
+ overflow: hidden;
+ width: 100%;
color: var(--color-gray-800);
&__name,
@@ -46,6 +40,10 @@
text-overflow: ellipsis;
}
+ &__name {
+ font-weight: $font-weight-bolder;
+ }
+
&__intro {
font-size: .9em;
color: #999;