Skip to content

S
solo
Commit b1512991 authored by Van's avatar Van
Browse files
Options

article 40%

parent e442a441
Show whitespace changes
Inline Side-by-side
Showing with 90 additions and 95 deletions
src/main/webapp/skins/yilia/article-list.ftl
View file @ b1512991
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<section class="abstract"> <section class="abstract">
${article.articleAbstract} ${article.articleAbstract}
</section> </section>
<footer> <footer class="tags">
<span class="icon-tag"></span> &nbsp; <span class="icon-tag"></span> &nbsp;
<#list article.articleTags?split(",") as articleTag> <#list article.articleTags?split(",") as articleTag>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}"> <a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
......
src/main/webapp/skins/yilia/article.ftl
View file @ b1512991
...@@ -8,66 +8,59 @@ ...@@ -8,66 +8,59 @@
<meta name="description" content="${article.articleAbstract?html}" /> <meta name="description" content="${article.articleAbstract?html}" />
</@head> </@head>
</head> </head>
<body class="nav-closed"> <body>
<div class="nav">
<#include "side.ftl"> <#include "side.ftl">
</div>
<div class="site-wrapper">
<#include "header.ftl">
<main> <main>
<article class="post fn-wrap"> <article class="post">
<header> <header>
<h1 class="post-title"> <h2>
<a rel="bookmark" href="${servePath}${article.articlePermalink}"> <a rel="bookmark" href="${servePath}${article.articlePermalink}">
${article.articleTitle} ${article.articleTitle}
</a> </a>
<#if article.hasUpdated>
<sup class="post-tip">
${updatedLabel}
</sup>
</#if>
<#if article.articlePutTop> <#if article.articlePutTop>
<sup class="post-tip"> <sup>
${topArticleLabel} ${topArticleLabel}
</sup> </sup>
</#if> </#if>
</h1> <#if article.hasUpdated>
<section class="post-meta"> <sup>
${updatedLabel}
</sup>
</#if>
</h2>
<time><span class="icon-date"></span> ${article.articleCreateDate?string("yyyy-MM-dd")}</time>
<section class="tags">
<span class="icon-tag"></span> &nbsp;
<#list article.articleTags?split(",") as articleTag> <#list article.articleTags?split(",") as articleTag>
<span> <a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
<a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}"> ${articleTag}</a>
${articleTag}</a><#if articleTag_has_next>,</#if>
</span>
</#list> </#list>
<time>${article.articleCreateDate?string("yyyy-MM-dd")}</time>
<a rel="nofollow" href="${servePath}/authors/${article.authorId}">
<img class="avatar" title="${article.authorName}" alt="${article.authorName}" src="${article.authorThumbnailURL}"/>
</a>
</section> </section>
</header> </header>
<section class="post-content article-body"> <section class="abstract">
${article.articleContent} ${article.articleContent}
<#if "" != article.articleSign.signHTML?trim> <#if "" != article.articleSign.signHTML?trim>
<div class="marginTop12"> <div>
${article.articleSign.signHTML} ${article.articleSign.signHTML}
</div> </div>
</#if> </#if>
</section> </section>
<footer> <footer class="fn-clear share">
<figure class="post-author"> <div class="fn-right">
<a href="${servePath}/authors/${article.authorId}" <span class="icon icon-t-weibo" data-type="tencent"></span>
title="${article.authorName}" alt="${article.authorName}"
style="background-image: url('${article.authorThumbnailURL}')">
<span class="fn-none">${article.authorName}</span>
</a>
</figure>
<div class="share fn-right">
<span class="icon icon-tencent" data-type="tencent"></span>
<span class="icon icon-weibo" data-type="weibo"></span> <span class="icon icon-weibo" data-type="weibo"></span>
<span class="icon icon-twitter" data-type="twitter"></span> <span class="icon icon-twitter" data-type="twitter"></span>
<span class="icon icon-google" data-type="google"></span> <span class="icon icon-gplus" data-type="google"></span>
</div> </div>
</footer> </footer>
</article> </article>
<@comments commentList=articleComments article=article></@comments> <@comments commentList=articleComments article=article></@comments>
</main>
<#if nextArticlePermalink?? || previousArticlePermalink??> <#if nextArticlePermalink?? || previousArticlePermalink??>
<aside class="read-next"> <aside class="read-next">
<#if nextArticlePermalink??> <#if nextArticlePermalink??>
...@@ -95,6 +88,6 @@ ...@@ -95,6 +88,6 @@
<@comment_script oId=article.oId> <@comment_script oId=article.oId>
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}"; page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
</@comment_script> </@comment_script>
</div> </main>
</body> </body>
</html> </html>
src/main/webapp/skins/yilia/css/yilia.css
View file @ b1512991
...@@ -440,7 +440,7 @@ article.show { ...@@ -440,7 +440,7 @@ article.show {
article header { article header {
border-left: 5px solid; border-left: 5px solid;
padding: 15px 135px 15px 25px; padding: 15px 30px 15px 25px;
} }
article header:hover { article header:hover {
...@@ -450,6 +450,7 @@ article header:hover { ...@@ -450,6 +450,7 @@ article header:hover {
article header h2 { article header h2 {
margin: 0; margin: 0;
font-size: 26px; font-size: 26px;
padding-right: 110px;
} }
article header a { article header a {
...@@ -489,12 +490,20 @@ article footer { ...@@ -489,12 +490,20 @@ article footer {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
article footer .tag:hover, .post section.tags {
margin: 0;
}
.post header {
padding-bottom: 0;
}
.tags .tag:hover,
article .abstract a:hover{ article .abstract a:hover{
opacity: 0.7; opacity: 0.7;
} }
article footer .avatar { .tags .avatar {
width: 20px; width: 20px;
border-radius: 10px; border-radius: 10px;
right: 30px; right: 30px;
...@@ -503,11 +512,23 @@ article footer .avatar { ...@@ -503,11 +512,23 @@ article footer .avatar {
transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s;
} }
article footer .avatar:hover { .post .tags .avatar {
bottom: inherit;
margin-top: 4px;
}
.share span {
transition: all 0.2s ease-out 0s;
cursor: pointer;
}
.tags .avatar:hover,
.share span:hover {
transform: rotate(360deg); transform: rotate(360deg);
color: #333;
} }
article footer .tag { .tags .tag {
color: #fff; color: #fff;
font-size: 10px; font-size: 10px;
height: 18px; height: 18px;
...@@ -521,7 +542,7 @@ article footer .tag { ...@@ -521,7 +542,7 @@ article footer .tag {
font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
} }
article footer .tag:before { .tags .tag:before {
content: " "; content: " ";
width: 0px; width: 0px;
height: 0px; height: 0px;
...@@ -532,7 +553,7 @@ article footer .tag:before { ...@@ -532,7 +553,7 @@ article footer .tag:before {
border-right-color: #7b5d5f; border-right-color: #7b5d5f;
} }
article footer .tag:after { .tags .tag:after {
content: " "; content: " ";
width: 4px; width: 4px;
height: 4px; height: 4px;
...@@ -608,6 +629,10 @@ nav.pagination .extend:hover { ...@@ -608,6 +629,10 @@ nav.pagination .extend:hover {
nav.pagination:hover .extend { nav.pagination:hover .extend {
opacity: 1; opacity: 1;
} }
.post .share {
padding: 0;
}
/* end article */ /* end article */
/* start footer */ /* start footer */
......
src/main/webapp/skins/yilia/header.ftl deleted 100644 → 0
View file @ e442a441
<header class="main-header"<#if !isIndex> style='height:30vh;'</#if>>
<div class="fn-clear">
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
</div>
<div class="fn-vertical">
<div class="main-header-content fn-wrap">
<h1 class="page-title">
<a href="${servePath}">${blogTitle}</a>
<#if "" != noticeBoard>
<small class="page-description"> &nbsp; ${blogSubtitle}</small>
</#if>
</h1>
<h2 class="page-description">
<#if "" != noticeBoard>
${noticeBoard}
<#else>
${blogSubtitle}
</#if>
</h2>
</div>
</div>
<#if isIndex><a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"></a></#if>
</header>
\ No newline at end of file
src/main/webapp/skins/yilia/macro-comments.ftl
View file @ b1512991
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
page.addReplyForm(id, commentFormHTML); page.addReplyForm(id, commentFormHTML);
}; };
(function () { (function () {
Finding.share(); Yilia.share();
page.load(); page.load();
// emotions // emotions
page.replaceCommentsEm("#comments .comment-content"); page.replaceCommentsEm("#comments .comment-content");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment