📝 update title
This commit is contained in:
Van
@@ -21,7 +21,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<@head title="${blogTitle}">
|
<@head title="${archiveLabel} - ${blogTitle}">
|
||||||
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
||||||
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
||||||
</@head>
|
</@head>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<@head title="${blogTitle}">
|
<@head title="${archiveLabel} - ${blogTitle}">
|
||||||
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
||||||
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
||||||
</@head>
|
</@head>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<@head title="${blogTitle}">
|
<@head title="${archiveLabel} - ${blogTitle}">
|
||||||
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
||||||
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
||||||
</@head>
|
</@head>
|
||||||
|
|||||||
@@ -30,18 +30,17 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<#include "header.ftl">
|
<#include "header.ftl">
|
||||||
<div class="main">
|
<div id="pjax" class="wrapper">
|
||||||
<div id="pjax" class="content">
|
|
||||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||||
<main>
|
<main>
|
||||||
<div class="module">
|
<div class="article__item">
|
||||||
<div class="module__content ft__center">
|
<h2 class="article__title">
|
||||||
<i class="icon__home"></i>
|
<a href="${servePath}/archives.html">
|
||||||
<a href="${servePath}" class="breadcrumb">${blogTitle}</a>
|
<i class="icon__inbox"></i>
|
||||||
>
|
${archiveLabel}
|
||||||
<i class="icon__inbox"></i>
|
</a>
|
||||||
<a href="${servePath}/archives.html" class="breadcrumb">${archiveLabel}</a>
|
</h2>
|
||||||
>
|
<div class="article__more">
|
||||||
<#if "en" == localeString?substring(0, 2)>
|
<#if "en" == localeString?substring(0, 2)>
|
||||||
${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
|
${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
|
||||||
<#else>
|
<#else>
|
||||||
@@ -53,9 +52,7 @@
|
|||||||
<#include "article-list.ftl">
|
<#include "article-list.ftl">
|
||||||
</main>
|
</main>
|
||||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||||
</div>
|
<#include "footer.ftl">
|
||||||
<#include "side.ftl">
|
|
||||||
</div>
|
</div>
|
||||||
<#include "footer.ftl">
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -21,54 +21,41 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<@head title="${blogTitle}">
|
<@head title="${archiveLabel} - ${blogTitle}">
|
||||||
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
||||||
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
||||||
</@head>
|
</@head>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<#include "header.ftl">
|
<#include "header.ftl">
|
||||||
<div class="main">
|
<div id="pjax" class="wrapper">
|
||||||
<div id="pjax" class="content">
|
|
||||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||||
<main>
|
<div class="article__item">
|
||||||
<div class="module">
|
<h2 class="article__title">
|
||||||
<div class="module__content ft__center">
|
<i class="icon__inbox"></i> ${archiveLabel}${articleLabel}
|
||||||
<i class="icon__home"></i>
|
</h2>
|
||||||
<a href="${servePath}" class="breadcrumb">${blogTitle}</a>
|
<div class="ft__gray">
|
||||||
>
|
${statistic.statisticPublishedBlogArticleCount} ${countLabel}
|
||||||
<i class="icon__inbox"></i>
|
|
||||||
${statistic.statisticPublishedBlogArticleCount} ${archiveLabel}${articleLabel}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="module">
|
<div class="tags fn__clear">
|
||||||
<div class="module__list">
|
<#list archiveDates as archiveDate>
|
||||||
<#if 0 != archiveDates?size>
|
<#if "en" == localeString?substring(0, 2)>
|
||||||
<ul>
|
<a class="ft__red" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
|
||||||
<#list archiveDates as archiveDate>
|
${archiveDate.monthName} ${archiveDate.archiveDateYear}
|
||||||
<li>
|
<span class="ft__gray">(${archiveDate.archiveDatePublishedArticleCount})</span>
|
||||||
<#if "en" == localeString?substring(0, 2)>
|
</a>
|
||||||
<a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
|
<#else>
|
||||||
${archiveDate.monthName} ${archiveDate.archiveDateYear}
|
<a class="ft__red"
|
||||||
(${archiveDate.archiveDatePublishedArticleCount})
|
href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
|
||||||
</a>
|
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
|
||||||
<#else>
|
<span class="ft__gray">(${archiveDate.archiveDatePublishedArticleCount})</span>
|
||||||
<a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
|
</a>
|
||||||
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
|
</#if>
|
||||||
(${archiveDate.archiveDatePublishedArticleCount})
|
</#list>
|
||||||
</a>
|
|
||||||
</#if>
|
|
||||||
</li>
|
|
||||||
</#list>
|
|
||||||
</ul>
|
|
||||||
</#if>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
|
||||||
</div>
|
</div>
|
||||||
<#include "side.ftl">
|
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||||
|
<#include "footer.ftl">
|
||||||
</div>
|
</div>
|
||||||
<#include "footer.ftl">
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -17,16 +17,9 @@
|
|||||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
-->
|
-->
|
||||||
<div class="article-list">
|
<#list articles as article>
|
||||||
<#list articles as article>
|
<article class="article__item">
|
||||||
<article class="item <#if article_index < 3>item--active</#if>">
|
<h2 class="article__title">
|
||||||
<time class="tooltipped tooltipped__n item__date"
|
|
||||||
aria-label="${article.articleCreateDate?string("yyyy")}${yearLabel}">
|
|
||||||
${article.articleCreateDate?string("MM")}${monthLabel}
|
|
||||||
<span class="item__day">${article.articleCreateDate?string("dd")}</span>
|
|
||||||
</time>
|
|
||||||
|
|
||||||
<h2 class="item__title">
|
|
||||||
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
|
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
|
||||||
${article.articleTitle}
|
${article.articleTitle}
|
||||||
</a>
|
</a>
|
||||||
@@ -41,58 +34,45 @@
|
|||||||
</sup>
|
</sup>
|
||||||
</#if>
|
</#if>
|
||||||
</h2>
|
</h2>
|
||||||
|
<time class="ft__gray">
|
||||||
<div class="item__date--m fn__none">
|
${article.articleCreateDate?string("yyyy-MM-dd")}${monthLabel}
|
||||||
<i class="icon__date"></i>
|
</time>
|
||||||
${article.articleCreateDate?string("yyyy-MM-dd")}
|
<div class="content-reset article__content">
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="ft__center">
|
|
||||||
<span class="tag">
|
|
||||||
<i class="icon__tags"></i>
|
|
||||||
<#list article.articleTags?split(",") as articleTag>
|
|
||||||
<a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
|
|
||||||
${articleTag}</a><#if articleTag_has_next>,</#if>
|
|
||||||
</#list>
|
|
||||||
</span>
|
|
||||||
<a class="tag" href="${servePath}${article.articlePermalink}#comments">
|
|
||||||
<i class="icon__comments"></i> ${article.articleCommentCount} ${commentLabel}
|
|
||||||
</a>
|
|
||||||
<span class="tag">
|
|
||||||
<i class="icon__views"></i>
|
|
||||||
${article.articleViewCount} ${viewLabel}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-reset">
|
|
||||||
${article.articleAbstract}
|
${article.articleAbstract}
|
||||||
</div>
|
</div>
|
||||||
|
<a class="article__more" href="">More...</a>
|
||||||
</article>
|
</article>
|
||||||
</#list>
|
</#list>
|
||||||
|
|
||||||
|
|
||||||
<#if 0 != paginationPageCount>
|
<#if 0 != paginationPageCount>
|
||||||
<div class="fn__clear">
|
<nav class="fn__flex pagination">
|
||||||
<nav class="pagination fn__right">
|
<#if 1 != paginationPageNums?first>
|
||||||
<#if 1 != paginationPageNums?first>
|
<a href="${servePath}${path}?p=${paginationPreviousPageNum}" class="pagination__item fn__flex-center">« Prev</a>
|
||||||
<a href="${servePath}${path}?p=${paginationPreviousPageNum}" class="pagination__item">«</a>
|
</#if>
|
||||||
<a class="pagination__item" href="${servePath}${path}">1</a>
|
|
||||||
<span class="pagination__item pagination__item--text">...</span>
|
<div class="fn__flex-1 ft__center">
|
||||||
</#if>
|
<#if 1 != paginationPageNums?first>
|
||||||
<#list paginationPageNums as paginationPageNum>
|
<a class="pagination__item" href="${servePath}${path}">1</a>
|
||||||
<#if paginationPageNum == paginationCurrentPageNum>
|
<span class="pagination__item">...</span>
|
||||||
<span class="pagination__item pagination__item--current">${paginationPageNum}</span>
|
</#if>
|
||||||
<#else>
|
<#list paginationPageNums as paginationPageNum>
|
||||||
<a class="pagination__item" href="${servePath}${path}?p=${paginationPageNum}">${paginationPageNum}</a>
|
<#if paginationPageNum == paginationCurrentPageNum>
|
||||||
</#if>
|
<span class="pagination__item pagination__item--current">${paginationPageNum}</span>
|
||||||
</#list>
|
<#else>
|
||||||
<#if paginationPageNums?last != paginationPageCount>
|
<a class="pagination__item"
|
||||||
<span class="pagination__item pagination__item--text">...</span>
|
href="${servePath}${path}?p=${paginationPageNum}">${paginationPageNum}</a>
|
||||||
<a href="${servePath}${path}?p=${paginationPageCount}" class="pagination__item">${paginationPageCount}</a>
|
</#if>
|
||||||
<a href="${servePath}${path}?p=${paginationNextPageNum}" class="pagination__item">»</a>
|
</#list>
|
||||||
</#if>
|
<#if paginationPageNums?last != paginationPageCount>
|
||||||
</nav>
|
<span class="pagination__item">...</span>
|
||||||
|
<a href="${servePath}${path}?p=${paginationPageCount}"
|
||||||
|
class="pagination__item">${paginationPageCount}</a>
|
||||||
|
</#if>
|
||||||
</div>
|
</div>
|
||||||
</#if>
|
|
||||||
</div>
|
<#if paginationPageNums?last != paginationPageCount>
|
||||||
|
<a href="${servePath}${path}?p=${paginationNextPageNum}" class="pagination__item fn__flex-center">Next »</a>
|
||||||
|
</#if>
|
||||||
|
</nav>
|
||||||
|
</#if>
|
||||||
@@ -152,7 +152,6 @@
|
|||||||
</main>
|
</main>
|
||||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||||
</div>
|
</div>
|
||||||
<#include "side.ftl">
|
|
||||||
</div>
|
</div>
|
||||||
<#include "footer.ftl">
|
<#include "footer.ftl">
|
||||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||||
|
|||||||
55
Jane/categories.ftl
Normal file
55
Jane/categories.ftl
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
<#--
|
||||||
|
|
||||||
|
Solo - A small and beautiful blogging system written in Java.
|
||||||
|
Copyright (c) 2010-2018, b3log.org & hacpai.com
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
|
-->
|
||||||
|
<#include "macro-head.ftl">
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<@head title="${categoryLabel} - ${blogTitle}">
|
||||||
|
<meta name="keywords" content="${metaKeywords},${categoryLabel}"/>
|
||||||
|
<meta name="description"
|
||||||
|
content="<#list mostUsedCategories as category>${category.categoryTitle}<#if category_has_next>,</#if></#list>"/>
|
||||||
|
</@head>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<#include "header.ftl">
|
||||||
|
<div id="pjax" class="wrapper">
|
||||||
|
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||||
|
<main>
|
||||||
|
<div class="module">
|
||||||
|
<div class="module__content ft__center">
|
||||||
|
<i class="icon__home"></i>
|
||||||
|
<a href="${servePath}" class="breadcrumb">${blogTitle}</a>
|
||||||
|
>
|
||||||
|
<i class="icon__category"></i>
|
||||||
|
${categoryLabel}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<#list mostUsedCategories as category>
|
||||||
|
<a href="${servePath}/category/${category.categoryURI}"
|
||||||
|
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
|
||||||
|
class="tag tooltipped tooltipped__n">
|
||||||
|
${category.categoryTitle}</a>
|
||||||
|
</#list>
|
||||||
|
</main>
|
||||||
|
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||||
|
<#include "footer.ftl">
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -49,7 +49,6 @@
|
|||||||
</main>
|
</main>
|
||||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||||
</div>
|
</div>
|
||||||
<#include "side.ftl">
|
|
||||||
</div>
|
</div>
|
||||||
<#include "footer.ftl">
|
<#include "footer.ftl">
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
* skin style
|
* skin style
|
||||||
*
|
*
|
||||||
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
||||||
* @version 0.1.0.0, Dec 6, 2018
|
* @version 0.1.0.0, Dec 7, 2018
|
||||||
*/
|
*/
|
||||||
/*
|
/*
|
||||||
* Symphony - A modern community (forum/BBS/SNS/blog) platform written in Java.
|
* Symphony - A modern community (forum/BBS/SNS/blog) platform written in Java.
|
||||||
@@ -728,449 +728,105 @@ blockquote {
|
|||||||
.icon__rss:before {
|
.icon__rss:before {
|
||||||
content: "\e901"; }
|
content: "\e901"; }
|
||||||
|
|
||||||
|
body::-webkit-scrollbar {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
a {
|
a {
|
||||||
transition: all .3s; }
|
transition: all .3s; }
|
||||||
|
|
||||||
.ft__red {
|
.ft__red {
|
||||||
color: #b94a48; }
|
color: #991a1a; }
|
||||||
|
|
||||||
.module {
|
.ft__gray {
|
||||||
border-radius: 5px;
|
color: #999; }
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: all .3s; }
|
|
||||||
.module.item {
|
|
||||||
transform: translateY(30px);
|
|
||||||
transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
|
|
||||||
.module.item--active {
|
|
||||||
transform: translate(0); }
|
|
||||||
.module:hover {
|
|
||||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
|
|
||||||
.module__content {
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
padding: 15px;
|
|
||||||
color: #3d4450;
|
|
||||||
display: block; }
|
|
||||||
.module__content:hover {
|
|
||||||
background-color: #fff; }
|
|
||||||
.module__content--three {
|
|
||||||
padding-bottom: 0; }
|
|
||||||
.module__header {
|
|
||||||
background-color: rgba(10, 10, 0, 0.7);
|
|
||||||
padding: 15px;
|
|
||||||
color: #fff; }
|
|
||||||
.module__header a {
|
|
||||||
color: #fff; }
|
|
||||||
.module__header:hover {
|
|
||||||
background-color: rgba(10, 10, 0, 0.9); }
|
|
||||||
.module__list li {
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
line-height: 20px; }
|
|
||||||
.module__list li a {
|
|
||||||
padding: 15px 15px;
|
|
||||||
display: block;
|
|
||||||
color: #3d4450; }
|
|
||||||
.module__list li a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #b94a48;
|
|
||||||
background-color: #fff; }
|
|
||||||
|
|
||||||
.form {
|
.content-reset {
|
||||||
position: relative; }
|
color: #555;
|
||||||
.form__input {
|
font-size: 14px; }
|
||||||
border: 1px solid #7266BA;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 0 15px;
|
|
||||||
border-radius: 15px;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
top: 0;
|
||||||
background-color: #2a2a2a;
|
background-color: #2a2a2a;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 33px; }
|
width: 50px; }
|
||||||
.header a {
|
.header a, .header span {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 0 15px;
|
padding: 10px 0;
|
||||||
display: inline-block; }
|
|
||||||
.header a.current, .header a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: rgba(102, 88, 184, 0.8); }
|
|
||||||
.header__logo {
|
|
||||||
position: absolute;
|
|
||||||
left: 30px; }
|
|
||||||
.header__nav {
|
|
||||||
text-align: center; }
|
|
||||||
.header__nav img {
|
|
||||||
float: left;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
margin: 15px 5px 0 0; }
|
|
||||||
.header__login {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
top: 0; }
|
|
||||||
|
|
||||||
.main {
|
|
||||||
max-width: 1170px;
|
|
||||||
padding: 30px;
|
|
||||||
margin: auto;
|
|
||||||
display: flex; }
|
|
||||||
|
|
||||||
.content {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 1px; }
|
|
||||||
|
|
||||||
.side {
|
|
||||||
width: 280px;
|
|
||||||
min-width: 280px;
|
|
||||||
margin-left: 30px; }
|
|
||||||
.side__btn {
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
top: 5px;
|
|
||||||
position: absolute;
|
|
||||||
right: 10px; }
|
|
||||||
.side__avatar {
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 100px;
|
|
||||||
width: 100px;
|
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
text-align: center;
|
||||||
margin-bottom: 15px;
|
font-size: 16px;
|
||||||
transition: transform .3s;
|
width: 100%; }
|
||||||
margin-top: 10px; }
|
.header a img, .header span img {
|
||||||
.side__avatar:hover {
|
height: 17px;
|
||||||
transform: rotate(360deg) scale(1.2);
|
width: 17px; }
|
||||||
border: 5px solid rgba(114, 102, 186, 0.36);
|
.header a.current, .header a:hover, .header span.current, .header span:hover {
|
||||||
margin-top: 0; }
|
text-decoration: none;
|
||||||
|
color: #999; }
|
||||||
|
.header__bottom {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0; }
|
||||||
|
|
||||||
.tag {
|
.wrapper {
|
||||||
float: left;
|
max-width: 920px;
|
||||||
color: #fff;
|
margin: 0 auto;
|
||||||
padding: 2px 5px;
|
padding: 0 20px; }
|
||||||
border: 1px solid transparent;
|
|
||||||
height: 20px;
|
|
||||||
white-space: nowrap;
|
|
||||||
word-wrap: normal;
|
|
||||||
background-color: rgba(10, 10, 0, 0.7);
|
|
||||||
border-radius: 3px 3px 3px 3px;
|
|
||||||
line-height: 21px;
|
|
||||||
margin: 0 15px 15px 0; }
|
|
||||||
.tag a {
|
|
||||||
color: #fff; }
|
|
||||||
.tag:hover {
|
|
||||||
background-color: #b94a48;
|
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
|
||||||
text-decoration: none; }
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
color: #7266BA !important; }
|
|
||||||
.breadcrumb:hover {
|
|
||||||
color: #3d4450 !important; }
|
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
text-align: center;
|
color: #999;
|
||||||
color: #fff;
|
padding: 30px 0;
|
||||||
padding: 15px;
|
line-height: 1.6em;
|
||||||
margin-bottom: 30px; }
|
font-size: 0.85em; }
|
||||||
.footer a {
|
.footer a {
|
||||||
color: #7266BA; }
|
color: #991a1a; }
|
||||||
|
|
||||||
.article-list .item {
|
.article__item {
|
||||||
border-radius: 5px;
|
margin: 50px 0;
|
||||||
margin-bottom: 30px;
|
border-bottom: 1px dashed #d9d9d9;
|
||||||
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
|
text-align: justify; }
|
||||||
padding: 15px;
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.3s, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
transform: perspective(2500px) rotateX(-100deg); }
|
|
||||||
.article-list .item--active {
|
|
||||||
transform: perspective(2500px) rotateX(0); }
|
|
||||||
.article-list .item:hover {
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
|
|
||||||
.article-list .item .tag {
|
|
||||||
float: none;
|
|
||||||
display: inline-block; }
|
|
||||||
.article-list .item__title {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 500; }
|
|
||||||
.article-list .item__title a {
|
|
||||||
color: rgba(10, 10, 0, 0.7);
|
|
||||||
padding: 0 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
line-height: 36px; }
|
|
||||||
.article-list .item__title a:hover {
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: #6658b8; }
|
|
||||||
.article-list .item__title > sup {
|
|
||||||
color: #b94a48; }
|
|
||||||
.article-list .item__date {
|
|
||||||
position: absolute;
|
|
||||||
background-color: #7266BA;
|
|
||||||
color: #fff;
|
|
||||||
height: 70px;
|
|
||||||
width: 70px;
|
|
||||||
font-size: 12px;
|
|
||||||
top: -20px;
|
|
||||||
border-radius: 35px;
|
|
||||||
left: -20px;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 9px;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
.article-list .item__day {
|
|
||||||
font-size: 30px;
|
|
||||||
display: block; }
|
|
||||||
|
|
||||||
.pagination__item {
|
.article__title {
|
||||||
color: #fff;
|
padding: 20px 0; }
|
||||||
border-radius: 3px;
|
.article__title a {
|
||||||
padding: 0 10px;
|
text-decoration: none;
|
||||||
line-height: 24px;
|
font-size: 25px;
|
||||||
display: inline-block;
|
font-weight: bold;
|
||||||
margin: 0 0 10px 10px;
|
color: #555;
|
||||||
background-color: rgba(114, 102, 186, 0.58); }
|
transition: color 0.2s; }
|
||||||
.pagination__item--text {
|
.article__title a:hover {
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
color: #991a1a; }
|
||||||
color: #7266BA; }
|
|
||||||
.pagination__item--current {
|
|
||||||
background-color: #6658b8; }
|
|
||||||
|
|
||||||
.pagination a.pagination__item:hover {
|
.article__content {
|
||||||
|
margin: 20px 0; }
|
||||||
|
.article__content > p:last-child {
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
|
.article__more {
|
||||||
|
margin-bottom: 70px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #6658b8; }
|
color: #991a1a;
|
||||||
|
display: block; }
|
||||||
|
|
||||||
.comments {
|
.pagination {
|
||||||
position: relative; }
|
margin: 20px 0 40px; }
|
||||||
.comments__item {
|
.pagination__item {
|
||||||
border-radius: 5px;
|
padding: 10px 10px;
|
||||||
list-style: none;
|
color: #999;
|
||||||
margin-bottom: 30px;
|
display: inline-block; }
|
||||||
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
|
.pagination__item--current {
|
||||||
transition: all .3s; }
|
color: #991a1a;
|
||||||
.comments__item:hover {
|
font-weight: bold; }
|
||||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
|
.pagination a.pagination__item:hover {
|
||||||
.comments__item:hover .comments__avatar {
|
text-decoration: none;
|
||||||
transform: rotate(720deg);
|
background: #991a1a;
|
||||||
border-radius: 0; }
|
color: #fff; }
|
||||||
.comments__item:hover .comments__content {
|
|
||||||
background-color: #fff; }
|
|
||||||
.comments__item:hover .comments__meta {
|
|
||||||
background-color: #d9edf7; }
|
|
||||||
.comments__item:hover .comments__reply:after {
|
|
||||||
background-color: #d9edf7; }
|
|
||||||
.comments__meta {
|
|
||||||
border-radius: 5px 5px 0 0;
|
|
||||||
min-height: 37px;
|
|
||||||
line-height: 37px;
|
|
||||||
padding-left: 45px;
|
|
||||||
background: rgba(217, 237, 247, 0.6);
|
|
||||||
color: #3d4450;
|
|
||||||
padding-right: 15px; }
|
|
||||||
.comments__meta a {
|
|
||||||
font-weight: 700;
|
|
||||||
color: #3d4450; }
|
|
||||||
.comments__meta a:hover {
|
|
||||||
color: #b94a48; }
|
|
||||||
.comments__meta--only {
|
|
||||||
border-radius: 5px; }
|
|
||||||
.comments__content {
|
|
||||||
border-radius: 0 0 5px 5px;
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
padding: 15px 45px;
|
|
||||||
position: relative; }
|
|
||||||
.comments__content textarea {
|
|
||||||
margin: 15px 0; }
|
|
||||||
.comments__avatar {
|
|
||||||
position: absolute;
|
|
||||||
height: 54px;
|
|
||||||
width: 54px;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
border-radius: 35px;
|
|
||||||
left: -29px;
|
|
||||||
top: -23px;
|
|
||||||
transition: all .8s ease; }
|
|
||||||
.comments__captcha {
|
|
||||||
height: 30px; }
|
|
||||||
.comments__reply {
|
|
||||||
border-radius: 5px;
|
|
||||||
margin: 15px auto 0; }
|
|
||||||
.comments__reply #cancelCommentButton {
|
|
||||||
line-height: 34px; }
|
|
||||||
.comments__reply:after {
|
|
||||||
content: " ";
|
|
||||||
position: absolute;
|
|
||||||
height: 15px;
|
|
||||||
width: 5px;
|
|
||||||
right: 60px;
|
|
||||||
top: -15px;
|
|
||||||
background-color: rgba(217, 237, 247, 0.6); }
|
|
||||||
|
|
||||||
.comment-body-ref {
|
.tags {
|
||||||
right: 0;
|
line-height: 32px;
|
||||||
position: absolute;
|
margin: 20px 0 70px; }
|
||||||
left: 64px; }
|
.tags a {
|
||||||
.comment-body-ref .breadcrumb {
|
width: 180px;
|
||||||
display: none; }
|
float: left; }
|
||||||
|
|
||||||
.form {
|
|
||||||
width: 100%; }
|
|
||||||
.form input,
|
|
||||||
.form textarea {
|
|
||||||
border: 1px solid #d1d5da;
|
|
||||||
background-color: #fafafa;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
|
|
||||||
padding: 7px 8px;
|
|
||||||
width: 100%;
|
|
||||||
line-height: 17px;
|
|
||||||
box-sizing: border-box; }
|
|
||||||
.form input:focus,
|
|
||||||
.form textarea:focus {
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em #dbedff;
|
|
||||||
border: 1px solid #4285f4; }
|
|
||||||
.form .ft__red {
|
|
||||||
line-height: 34px; }
|
|
||||||
.form .btn {
|
|
||||||
float: right;
|
|
||||||
height: 34px;
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
padding: 0 15px; }
|
|
||||||
|
|
||||||
.icon__up {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 30px;
|
|
||||||
right: 30px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: rgba(114, 102, 186, 0.8);
|
|
||||||
height: 30px;
|
|
||||||
width: 30px;
|
|
||||||
line-height: 28px;
|
|
||||||
border-radius: 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
text-align: center; }
|
|
||||||
.icon__up:hover {
|
|
||||||
background-color: #6658b8; }
|
|
||||||
|
|
||||||
.content .b3-solo-list {
|
|
||||||
display: none !important; }
|
|
||||||
|
|
||||||
.b3-solo-list {
|
|
||||||
margin: 0 !important;
|
|
||||||
font-size: 14px !important; }
|
|
||||||
|
|
||||||
.b3-solo-list-h1 {
|
|
||||||
margin: 0 !important; }
|
|
||||||
|
|
||||||
.b3-solo-list-h2 {
|
|
||||||
margin: 0 !important; }
|
|
||||||
.b3-solo-list-h2 a {
|
|
||||||
padding-left: 30px !important; }
|
|
||||||
|
|
||||||
.b3-solo-list-h3 {
|
|
||||||
margin: 0 !important; }
|
|
||||||
.b3-solo-list-h3 a {
|
|
||||||
padding-left: 45px !important; }
|
|
||||||
|
|
||||||
.b3-solo-list-h4 {
|
|
||||||
margin: 0 !important; }
|
|
||||||
.b3-solo-list-h4 a {
|
|
||||||
padding-left: 60px !important; }
|
|
||||||
|
|
||||||
.b3-solo-list-h5 {
|
|
||||||
margin: 0 !important; }
|
|
||||||
.b3-solo-list-h5 a {
|
|
||||||
padding-left: 75px !important; }
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.header__nav {
|
|
||||||
display: none; }
|
|
||||||
.main {
|
|
||||||
display: block;
|
|
||||||
margin: 15px;
|
|
||||||
padding: 0; }
|
|
||||||
.side {
|
|
||||||
margin: 0;
|
|
||||||
width: auto; }
|
|
||||||
.article-list {
|
|
||||||
overflow: hidden; }
|
|
||||||
.article-list .item__title {
|
|
||||||
font-size: 20px; }
|
|
||||||
.article-list .item__date--m {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #3d4450;
|
|
||||||
display: block; }
|
|
||||||
.article-list .item__date {
|
|
||||||
display: none; }
|
|
||||||
.article-list .item,
|
|
||||||
.module,
|
|
||||||
.comments__item {
|
|
||||||
margin-bottom: 15px; }
|
|
||||||
.footer {
|
|
||||||
margin: 0 15px 15px;
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
border-radius: 5px;
|
|
||||||
color: #3d4450;
|
|
||||||
line-height: 20px; }
|
|
||||||
.footer a {
|
|
||||||
text-decoration: underline; }
|
|
||||||
.footer .fn__none--m {
|
|
||||||
display: none; }
|
|
||||||
.footer .fn__none {
|
|
||||||
display: block; }
|
|
||||||
.tag {
|
|
||||||
margin: 0 5px 10px 0;
|
|
||||||
font-size: 12px; }
|
|
||||||
.header__logo {
|
|
||||||
left: 0; }
|
|
||||||
.header__login {
|
|
||||||
display: none; }
|
|
||||||
.header__m {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1; }
|
|
||||||
.header__m img {
|
|
||||||
float: left;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
margin: 0 5px 0 0; }
|
|
||||||
.header__m a.current {
|
|
||||||
color: #b94a48; }
|
|
||||||
.header__m .icon__list {
|
|
||||||
position: absolute;
|
|
||||||
top: -35px;
|
|
||||||
right: 15px;
|
|
||||||
font-size: 20px;
|
|
||||||
color: #fff; }
|
|
||||||
.header__m .module__list {
|
|
||||||
display: none; }
|
|
||||||
.header__m .module__list li {
|
|
||||||
background-color: #fff; }
|
|
||||||
.module__content.ft__center {
|
|
||||||
text-align: left; }
|
|
||||||
.comments__avatar {
|
|
||||||
height: 34px;
|
|
||||||
width: 34px;
|
|
||||||
left: -7px; }
|
|
||||||
.comments__content {
|
|
||||||
padding: 15px; }
|
|
||||||
.content-reset {
|
|
||||||
font-size: 14px; } }
|
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
* skin style
|
* skin style
|
||||||
*
|
*
|
||||||
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
||||||
* @version 0.1.0.0, Dec 6, 2018
|
* @version 0.1.0.0, Dec 7, 2018
|
||||||
*/
|
*/
|
||||||
@import "../../../scss/reset";
|
@import "../../../scss/reset";
|
||||||
@import "../../../scss/reset-content";
|
@import "../../../scss/reset-content";
|
||||||
@@ -29,12 +29,16 @@
|
|||||||
@import "../../../scss/nprogress";
|
@import "../../../scss/nprogress";
|
||||||
@import "icon";
|
@import "icon";
|
||||||
|
|
||||||
$purple: #7266BA !default;
|
$red: #991a1a !default;
|
||||||
$purple-dark: #6658b8 !default;
|
$gray: #999 !default;
|
||||||
$red: #b94a48 !default;
|
|
||||||
$black: #3d4450 !default;
|
|
||||||
|
|
||||||
// reset
|
// reset
|
||||||
|
body {
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
}
|
}
|
||||||
@@ -43,646 +47,135 @@ a {
|
|||||||
color: $red;
|
color: $red;
|
||||||
}
|
}
|
||||||
|
|
||||||
// module
|
.ft__gray {
|
||||||
.module {
|
color: $gray;
|
||||||
border-radius: 5px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: all .3s;
|
|
||||||
|
|
||||||
&.item {
|
|
||||||
transform: translateY(30px);
|
|
||||||
transition: transform 2s cubic-bezier(.175, .885, .32, 1.275);
|
|
||||||
&--active {
|
|
||||||
transform: translate(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
padding: 15px;
|
|
||||||
color: $black;
|
|
||||||
display: block;
|
|
||||||
&:hover {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--three {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
background-color: rgba(10, 10, 0, 0.7);
|
|
||||||
padding: 15px;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(10, 10, 0, 0.9);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__list {
|
|
||||||
li {
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
line-height: 20px;
|
|
||||||
a {
|
|
||||||
padding: 15px 15px;
|
|
||||||
display: block;
|
|
||||||
color: $black;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
color: $red;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// form
|
.content-reset {
|
||||||
.form {
|
color: #555;
|
||||||
position: relative;
|
font-size: 14px;
|
||||||
&__input {
|
|
||||||
border: 1px solid $purple;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 0 15px;
|
|
||||||
border-radius: 15px;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// header
|
// header
|
||||||
.header {
|
.header {
|
||||||
|
top: 0;
|
||||||
background-color: #2a2a2a;
|
background-color: #2a2a2a;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 33px;
|
width: 50px;
|
||||||
|
|
||||||
a {
|
a, span {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 0 15px;
|
padding: 10px 0;
|
||||||
display: inline-block;
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 17px;
|
||||||
|
width: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
&.current,
|
&.current,
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: rgba($purple-dark, 0.8);
|
color: $gray;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__logo {
|
&__bottom {
|
||||||
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 30px;
|
bottom: 0;
|
||||||
}
|
|
||||||
|
|
||||||
&__nav {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
float: left;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
margin: 15px 5px 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__login {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
top: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// framework
|
// framework
|
||||||
.main {
|
.wrapper {
|
||||||
max-width: 1170px;
|
max-width: 920px;
|
||||||
padding: 30px;
|
margin: 0 auto;
|
||||||
margin: auto;
|
padding: 0 20px;
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// side
|
|
||||||
.side {
|
|
||||||
width: 280px;
|
|
||||||
min-width: 280px;
|
|
||||||
margin-left: 30px;
|
|
||||||
|
|
||||||
&__btn {
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
top: 5px;
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 100px;
|
|
||||||
width: 100px;
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
transition: transform .3s;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: rotate(360deg) scale(1.2);
|
|
||||||
border: 5px solid rgba($purple, 0.36);
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// tag
|
|
||||||
.tag {
|
|
||||||
float: left;
|
|
||||||
color: #fff;
|
|
||||||
padding: 2px 5px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
height: 20px;
|
|
||||||
white-space: nowrap;
|
|
||||||
word-wrap: normal;
|
|
||||||
background-color: rgba(10, 10, 0, 0.7);
|
|
||||||
border-radius: 3px 3px 3px 3px;
|
|
||||||
line-height: 21px;
|
|
||||||
margin: 0 15px 15px 0;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $red;
|
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
color: $purple !important;
|
|
||||||
&:hover {
|
|
||||||
color: $black !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// footer
|
// footer
|
||||||
.footer {
|
.footer {
|
||||||
text-align: center;
|
color: $gray;
|
||||||
color: #fff;
|
padding: 30px 0;
|
||||||
padding: 15px;
|
line-height: 1.6em;
|
||||||
margin-bottom: 30px;
|
font-size: 0.85em;
|
||||||
a {
|
a {
|
||||||
color: $purple;
|
color: $red;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// article list
|
// article
|
||||||
.article-list {
|
.article {
|
||||||
.item {
|
&__item {
|
||||||
border-radius: 5px;
|
margin: 50px 0;
|
||||||
margin-bottom: 30px;
|
border-bottom: 1px dashed #d9d9d9;
|
||||||
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
|
text-align: justify;
|
||||||
padding: 15px;
|
}
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
position: relative;
|
|
||||||
transition: all .3s, transform 1s cubic-bezier(.175, .885, .32, 1.275);
|
|
||||||
transform: perspective(2500px) rotateX(-100deg);
|
|
||||||
|
|
||||||
&--active {
|
&__title {
|
||||||
transform: perspective(2500px) rotateX(0);
|
padding: 20px 0;
|
||||||
}
|
a {
|
||||||
|
text-decoration: none;
|
||||||
&:hover {
|
font-size: 25px;
|
||||||
background-color: #fff;
|
font-weight: bold;
|
||||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
|
color: #555;
|
||||||
}
|
transition: color 0.2s;
|
||||||
|
&:hover {
|
||||||
.tag {
|
|
||||||
float: none;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
a {
|
|
||||||
color: rgba(10, 10, 0, 0.7);
|
|
||||||
padding: 0 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
line-height: 36px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: $purple-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > sup {
|
|
||||||
color: $red;
|
color: $red;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__date {
|
&__content {
|
||||||
position: absolute;
|
margin: 20px 0;
|
||||||
background-color: $purple;
|
& > p:last-child {
|
||||||
color: #fff;
|
margin-bottom: 0
|
||||||
height: 70px;
|
|
||||||
width: 70px;
|
|
||||||
font-size: 12px;
|
|
||||||
top: -20px;
|
|
||||||
border-radius: 35px;
|
|
||||||
left: -20px;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 9px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__day {
|
&__more {
|
||||||
font-size: 30px;
|
margin-bottom: 70px;
|
||||||
display: block;
|
text-decoration: none;
|
||||||
}
|
color: $red;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// pagination
|
|
||||||
.pagination {
|
|
||||||
&__item {
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 0 10px;
|
|
||||||
line-height: 24px;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 0 10px 10px;
|
|
||||||
background-color: rgba($purple, 0.58);
|
|
||||||
|
|
||||||
&--text {
|
.pagination {
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
margin: 20px 0 40px;
|
||||||
color: $purple;
|
&__item {
|
||||||
}
|
padding: 10px 10px;
|
||||||
|
color: $gray;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
&--current {
|
&--current {
|
||||||
background-color: $purple-dark;
|
color: #991a1a;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a.pagination__item:hover {
|
a.pagination__item:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: $purple-dark;
|
background: $red;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// comment
|
|
||||||
.comments {
|
|
||||||
position: relative;
|
|
||||||
&__item {
|
|
||||||
border-radius: 5px;
|
|
||||||
list-style: none;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: all .3s;
|
|
||||||
|
|
||||||
&:hover {
|
// other page
|
||||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
|
.tags {
|
||||||
|
line-height: 32px;
|
||||||
.comments__avatar {
|
margin: 20px 0 70px;
|
||||||
transform: rotate(720deg);
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comments__content {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comments__meta {
|
|
||||||
background-color: rgba(217, 237, 247, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.comments__reply:after {
|
|
||||||
background-color: #d9edf7;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__meta {
|
|
||||||
border-radius: 5px 5px 0 0;
|
|
||||||
min-height: 37px;
|
|
||||||
line-height: 37px;
|
|
||||||
padding-left: 45px;
|
|
||||||
background: rgba(217, 237, 247, 0.6);
|
|
||||||
color: $black;
|
|
||||||
padding-right: 15px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 700;
|
|
||||||
color: $black;
|
|
||||||
&:hover {
|
|
||||||
color: $red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--only {
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
border-radius: 0 0 5px 5px;
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
padding: 15px 45px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
margin: 15px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
position: absolute;
|
|
||||||
height: 54px;
|
|
||||||
width: 54px;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
border-radius: 35px;
|
|
||||||
left: -29px;
|
|
||||||
top: -23px;
|
|
||||||
transition: all .8s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__captcha {
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__reply {
|
|
||||||
border-radius: 5px;
|
|
||||||
margin: 15px auto 0;
|
|
||||||
|
|
||||||
#cancelCommentButton {
|
|
||||||
line-height: 34px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: " ";
|
|
||||||
position: absolute;
|
|
||||||
height: 15px;
|
|
||||||
width: 5px;
|
|
||||||
right: 60px;
|
|
||||||
top: -15px;
|
|
||||||
background-color: rgba(217, 237, 247, 0.6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-body-ref {
|
|
||||||
right: 0;
|
|
||||||
position: absolute;
|
|
||||||
left: 64px;
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
|
||||||
width: 100%;
|
|
||||||
input,
|
|
||||||
textarea {
|
|
||||||
border: 1px solid #d1d5da;
|
|
||||||
background-color: #fafafa;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: inset 0 1px 2px rgba(27, 31, 35, .075);
|
|
||||||
padding: 7px 8px;
|
|
||||||
width: 100%;
|
|
||||||
line-height: 17px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: inset 0 1px 2px rgba(27, 31, 35, .075), 0 0 0 0.2em #dbedff;
|
|
||||||
border: 1px solid #4285f4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ft__red {
|
|
||||||
line-height: 34px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
float: right;
|
|
||||||
height: 34px;
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon__up {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 30px;
|
|
||||||
right: 30px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: rgba($purple, 0.8);
|
|
||||||
height: 30px;
|
|
||||||
width: 30px;
|
|
||||||
line-height: 28px;
|
|
||||||
border-radius: 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $purple-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content .b3-solo-list {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b3-solo-list {
|
|
||||||
margin: 0 !important;
|
|
||||||
font-size: 14px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b3-solo-list-h1 {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b3-solo-list-h2 {
|
|
||||||
margin: 0 !important;
|
|
||||||
a {
|
a {
|
||||||
padding-left: 30px !important;
|
width: 180px;
|
||||||
}
|
float: left;
|
||||||
}
|
|
||||||
|
|
||||||
.b3-solo-list-h3 {
|
|
||||||
margin: 0 !important;
|
|
||||||
a {
|
|
||||||
padding-left: 45px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.b3-solo-list-h4 {
|
|
||||||
margin: 0 !important;
|
|
||||||
a {
|
|
||||||
padding-left: 60px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.b3-solo-list-h5 {
|
|
||||||
margin: 0 !important;
|
|
||||||
a {
|
|
||||||
padding-left: 75px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.header__nav {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
display: block;
|
|
||||||
margin: 15px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side {
|
|
||||||
margin: 0;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list {
|
|
||||||
overflow: hidden;
|
|
||||||
.item {
|
|
||||||
&__title {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
&__date--m {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: $black;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
&__date {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list .item,
|
|
||||||
.module,
|
|
||||||
.comments__item {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
margin: 0 15px 15px;
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
border-radius: 5px;
|
|
||||||
color: $black;
|
|
||||||
line-height: 20px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fn__none--m {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fn__none {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
margin: 0 5px 10px 0;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header__logo {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header__login {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header__m {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
img {
|
|
||||||
float: left;
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
margin: 0 5px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.current {
|
|
||||||
color: #b94a48;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon__list {
|
|
||||||
position: absolute;
|
|
||||||
top: -35px;
|
|
||||||
right: 15px;
|
|
||||||
font-size: 20px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.module__list {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.module__content.ft__center {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comments__avatar {
|
|
||||||
height: 34px;
|
|
||||||
width: 34px;
|
|
||||||
left: -7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comments__content {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-reset {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -50,7 +50,6 @@
|
|||||||
</main>
|
</main>
|
||||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||||
</div>
|
</div>
|
||||||
<#include "side.ftl">
|
|
||||||
</div>
|
</div>
|
||||||
<#include "footer.ftl">
|
<#include "footer.ftl">
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -17,18 +17,19 @@
|
|||||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
-->
|
-->
|
||||||
<div class="icon__up" onclick="Util.goTop()"></div>
|
<footer class="footer fn__clear">
|
||||||
<footer class="footer">
|
|
||||||
© ${year}
|
© ${year}
|
||||||
${footerContent}
|
${footerContent}
|
||||||
<a href="${servePath}">${blogTitle}</a> <span class="fn__none--m"> • </span>
|
<a href="${servePath}">${blogTitle}</a> <span class="fn__none--m"> • </span>
|
||||||
<div class="fn__none"></div>
|
<div class="fn__none"></div>
|
||||||
<a href="https://solo.b3log.org" target="_blank">Solo</a> ${version} <br/>
|
<a href="https://solo.b3log.org" target="_blank">Solo</a> ${version}
|
||||||
|
|
||||||
Powered by <a href="https://b3log.org" target="_blank">B3log</a> 开源
|
<div class="fn__right">
|
||||||
<div class="fn__none"></div>
|
Powered by <a href="https://b3log.org" target="_blank">B3log</a> 开源
|
||||||
♥
|
<div class="fn__none"></div>
|
||||||
Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">nijigen</a> by <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a>
|
♥
|
||||||
|
Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">Jane</a> by <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<div class="icon-up" onclick="Util.goTop()"></div>
|
<div class="icon-up" onclick="Util.goTop()"></div>
|
||||||
|
|
||||||
|
|||||||
158
Jane/header.ftl
158
Jane/header.ftl
@@ -18,115 +18,61 @@
|
|||||||
|
|
||||||
-->
|
-->
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header__wrap">
|
<a href="${servePath}" rel="start" class="tooltipped__w tooltipped" aria-label="${blogTitle}">
|
||||||
|
<i class="icon__home"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<#list pageNavigations as page>
|
||||||
<a href="${servePath}" rel="start" class="header__logo">
|
<a href="${page.pagePermalink}" target="${page.pageOpenTarget}"
|
||||||
<i class="icon__home"></i> ${blogTitle}
|
class="tooltipped__w tooltipped" rel="section" aria-label="${page.pageTitle}">
|
||||||
<i class="icon__search"></i>
|
<#if page.pageIcon != ''><img class="page-icon" src="${page.pageIcon}"><#else>
|
||||||
|
<i class="icon__category"></i>
|
||||||
|
</#if>
|
||||||
</a>
|
</a>
|
||||||
|
</#list>
|
||||||
|
|
||||||
<nav class="header__nav">
|
<a href="${servePath}/dynamic.html" rel="section" aria-label="${dynamicLabel}" class="tooltipped tooltipped__w">
|
||||||
<#list pageNavigations as page>
|
<i class="icon__refresh"></i>
|
||||||
<a href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
|
</a>
|
||||||
<#if page.pageIcon != ''><img class="page-icon" src="${page.pageIcon}"></#if>${page.pageTitle}
|
<a href="${servePath}/tags.html" rel="section" aria-label="${allTagsLabel}" class="tooltipped tooltipped__w">
|
||||||
</a>
|
<i class="icon__tags"></i>
|
||||||
</#list>
|
</a>
|
||||||
<a href="${servePath}/dynamic.html" rel="section">
|
<a href="${servePath}/archives.html" aria-label="${archiveLabel}" class="tooltipped tooltipped__w">
|
||||||
<i class="icon__refresh"></i> ${dynamicLabel}
|
<i class="icon__inbox"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="${servePath}/tags.html" rel="section">
|
<a rel="archive" href="${servePath}/links.html" aria-label="${linkLabel}" class="tooltipped tooltipped__w">
|
||||||
<i class="icon__tags"></i> ${allTagsLabel}
|
<i class="icon__link"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="${servePath}/archives.html">
|
<a href="${servePath}/search" class="tooltipped__w tooltipped" aria-label="${searchLabel}">
|
||||||
<i class="icon__inbox"></i> ${archiveLabel}
|
<i class="icon__search"></i>
|
||||||
</a>
|
</a>
|
||||||
<a rel="archive" href="${servePath}/links.html">
|
<a rel="alternate" href="${servePath}/rss.xml" rel="section" aria-label="RSS" class="tooltipped tooltipped__w">
|
||||||
<i class="icon__link"></i> ${linkLabel}
|
<i class="icon__rss"></i>
|
||||||
</a>
|
</a>
|
||||||
<a rel="alternate" href="${servePath}/rss.xml" rel="section">
|
|
||||||
<i class="icon__rss"></i> RSS
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="header__login">
|
<div class="header__bottom">
|
||||||
<#if isLoggedIn>
|
<#if isLoggedIn>
|
||||||
<a href="${servePath}/admin-index.do#main" title="${adminLabel}">
|
<a href="${servePath}/admin-index.do#main"
|
||||||
<i class="icon__setting"></i> ${adminLabel}
|
aria-label="${adminLabel}" class="tooltipped tooltipped__w">
|
||||||
</a>
|
<i class="icon__setting"></i>
|
||||||
<a href="${logoutURL}">
|
</a>
|
||||||
<i class="icon__logout"></i> ${logoutLabel}
|
<a href="${logoutURL}"
|
||||||
</a>
|
aria-label="${logoutLabel}" class="tooltipped tooltipped__w">
|
||||||
<#else>
|
<i class="icon__logout"></i>
|
||||||
<a href="${loginURL}">
|
</a>
|
||||||
<i class="icon__login"></i> ${loginLabel}
|
|
||||||
</a>
|
|
||||||
<a href="${servePath}/register">
|
|
||||||
<i class="icon__register"></i> ${registerLabel}
|
|
||||||
</a>
|
|
||||||
</#if>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="header__m fn__none">
|
|
||||||
<i class="icon__list" onclick="$(this).next().slideToggle()"></i>
|
|
||||||
<main class="module__list">
|
|
||||||
<ul>
|
|
||||||
<#if isLoggedIn>
|
|
||||||
<li>
|
|
||||||
<a href="${servePath}/admin-index.do#main" title="${adminLabel}">
|
|
||||||
<i class="icon__setting"></i> ${adminLabel}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="${logoutURL}">
|
|
||||||
<i class="icon__logout"></i> ${logoutLabel}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<#else>
|
<#else>
|
||||||
<li>
|
<a href="${loginURL}"
|
||||||
<a href="${loginURL}">
|
aria-label="${loginLabel}" class="tooltipped tooltipped__w">
|
||||||
<i class="icon__login"></i> ${loginLabel}
|
<i class="icon__login"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
<a href="${servePath}/register"
|
||||||
<li>
|
aria-label="${registerLabel}" class="tooltipped tooltipped__w">
|
||||||
<a href="${servePath}/register">
|
<i class="icon__register"></i>
|
||||||
<i class="icon__register"></i> ${registerLabel}
|
</a>
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</#if>
|
</#if>
|
||||||
<#list pageNavigations as page>
|
<span onclick="Util.goTop()"
|
||||||
<li>
|
aria-label="${putTopLabel}" class="tooltipped tooltipped__w">
|
||||||
<a href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
|
<i class="icon__up"></i>
|
||||||
<#if page.pageIcon != ''><img class="page-icon" src="${page.pageIcon}"></#if>${page.pageTitle}
|
</span>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
</header>
|
||||||
</#list>
|
|
||||||
<li>
|
|
||||||
<a href="${servePath}/dynamic.html" rel="section">
|
|
||||||
<i class="icon__refresh"></i> ${dynamicLabel}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="${servePath}/tags.html" rel="section">
|
|
||||||
<i class="icon__tags"></i> ${allTagsLabel}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="${servePath}/archives.html">
|
|
||||||
<i class="icon__inbox"></i> ${archiveLabel}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a rel="archive" href="${servePath}/links.html">
|
|
||||||
<i class="icon__link"></i> ${linkLabel}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a rel="alternate" href="${servePath}/rss.xml" rel="section">
|
|
||||||
<i class="icon__rss"></i> RSS
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
@@ -32,14 +32,12 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<#include "header.ftl">
|
<#include "header.ftl">
|
||||||
<div class="main">
|
<div id="pjax" class="wrapper">
|
||||||
<div id="pjax" class="content">
|
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
|
||||||
<main>
|
<main>
|
||||||
<#include "article-list.ftl">
|
<#include "article-list.ftl">
|
||||||
</main>
|
</main>
|
||||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<#include "footer.ftl">
|
<#include "footer.ftl">
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
* @fileoverview util and every page should be used.
|
* @fileoverview util and every page should be used.
|
||||||
*
|
*
|
||||||
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
||||||
* @version 0.2.1.0, Sep 30, 2018
|
* @version 0.1.0.0, Dec 7, 2018
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -27,76 +27,20 @@
|
|||||||
* @static
|
* @static
|
||||||
*/
|
*/
|
||||||
var Skin = {
|
var Skin = {
|
||||||
_initCommon: function ($goTop) {
|
|
||||||
$(window).scroll(function () {
|
|
||||||
if ($(window).scrollTop() > 125) {
|
|
||||||
$goTop.show()
|
|
||||||
} else {
|
|
||||||
$goTop.hide()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
_initAnimation: function () {
|
|
||||||
if (!('IntersectionObserver' in window)) {
|
|
||||||
$('.item').addClass('item--active')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (window.imageIntersectionObserver) {
|
|
||||||
window.imageIntersectionObserver.disconnect()
|
|
||||||
$('.item').each(function () {
|
|
||||||
window.imageIntersectionObserver.observe(this)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
window.imageIntersectionObserver = new IntersectionObserver(
|
|
||||||
function (entries) {
|
|
||||||
entries.forEach(function (entrie) {
|
|
||||||
if (typeof entrie.isIntersecting === 'undefined'
|
|
||||||
? entrie.intersectionRatio !== 0 : entrie.isIntersecting) {
|
|
||||||
$(entrie.target).addClass('item--active')
|
|
||||||
} else {
|
|
||||||
if ($(entrie.target).closest('.side').length === 1 ||
|
|
||||||
$(entrie.target).closest('.article-list').hasClass('content') ||
|
|
||||||
$(entrie.target).outerHeight() > 768) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
$(entrie.target).removeClass('item--active')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
$('.item').each(function () {
|
|
||||||
window.imageIntersectionObserver.observe(this)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
init: function () {
|
init: function () {
|
||||||
Util.initPjax(function () {
|
Util.initPjax()
|
||||||
Skin._initAnimation()
|
|
||||||
if ($('#articlePage').length === 0) {
|
|
||||||
$('.b3-solo-list').closest('.module').remove()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
Skin._initAnimation()
|
|
||||||
|
|
||||||
$('body').on('click', '.content-reset img', function () {
|
$('body').on('click', '.content-reset img', function () {
|
||||||
window.open(this.src)
|
window.open(this.src)
|
||||||
})
|
})
|
||||||
|
|
||||||
this._initCommon($('.icon__up'))
|
$('.header a').each(function () {
|
||||||
|
|
||||||
$('.header__nav a, .header__m a').each(function () {
|
|
||||||
if (this.href === location.href) {
|
if (this.href === location.href) {
|
||||||
this.className = 'current'
|
this.className = 'current'
|
||||||
}
|
}
|
||||||
}).click(function () {
|
}).click(function () {
|
||||||
$('.header__nav a, .header__m a').removeClass('current')
|
$('.header a').removeClass('current')
|
||||||
this.className = 'current'
|
this.className = 'current'
|
||||||
$('.header__m .module__list').hide()
|
|
||||||
})
|
|
||||||
|
|
||||||
$('.header__logo').click(function () {
|
|
||||||
$('.header__nav a, .header__m a').removeClass('current')
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
_initArticleCommon: function () {
|
_initArticleCommon: function () {
|
||||||
|
|||||||
@@ -60,7 +60,6 @@
|
|||||||
</main>
|
</main>
|
||||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||||
</div>
|
</div>
|
||||||
<#include "side.ftl">
|
|
||||||
</div>
|
</div>
|
||||||
<#include "footer.ftl">
|
<#include "footer.ftl">
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -44,7 +44,6 @@
|
|||||||
</main>
|
</main>
|
||||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||||
</div>
|
</div>
|
||||||
<#include "side.ftl">
|
|
||||||
</div>
|
</div>
|
||||||
<#include "footer.ftl">
|
<#include "footer.ftl">
|
||||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||||
|
|||||||
138
Jane/side.ftl
138
Jane/side.ftl
@@ -1,138 +0,0 @@
|
|||||||
<#--
|
|
||||||
|
|
||||||
Solo - A small and beautiful blogging system written in Java.
|
|
||||||
Copyright (c) 2010-2018, b3log.org & hacpai.com
|
|
||||||
|
|
||||||
This program is free software: you can redistribute it and/or modify
|
|
||||||
it under the terms of the GNU Affero General Public License as published by
|
|
||||||
the Free Software Foundation, either version 3 of the License, or
|
|
||||||
(at your option) any later version.
|
|
||||||
|
|
||||||
This program is distributed in the hope that it will be useful,
|
|
||||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
GNU Affero General Public License for more details.
|
|
||||||
|
|
||||||
You should have received a copy of the GNU Affero General Public License
|
|
||||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
||||||
|
|
||||||
-->
|
|
||||||
<aside class="side">
|
|
||||||
<#if noticeBoard??>
|
|
||||||
<section class="content-reset module">
|
|
||||||
<main class="module__content">
|
|
||||||
${noticeBoard}
|
|
||||||
</main>
|
|
||||||
</section>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<section class="module">
|
|
||||||
<header class="module__header">
|
|
||||||
<form class="form" action="${servePath}/search">
|
|
||||||
<input placeholder="${searchLabel}" class="form__input" type="text" name="keyword"/>
|
|
||||||
<button class="side__btn" type="submit"><i class="icon__search"></i></button>
|
|
||||||
</form>
|
|
||||||
</header>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="module item">
|
|
||||||
<header class="module__header ft__center">
|
|
||||||
${adminUser.userName}
|
|
||||||
</header>
|
|
||||||
<main class="module__content ft__center">
|
|
||||||
<img class="side__avatar" src="${adminUser.userAvatar}" alt="${adminUser.userName}"/>
|
|
||||||
${blogSubtitle}
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<#if 0 != mostUsedCategories?size>
|
|
||||||
<div class="module item">
|
|
||||||
<header class="module__header">
|
|
||||||
${categoryLabel}
|
|
||||||
</header>
|
|
||||||
<main class="module__content fn__clear module__content--three">
|
|
||||||
<#list mostUsedCategories as category>
|
|
||||||
<a href="${servePath}/category/${category.categoryURI}"
|
|
||||||
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
|
|
||||||
class="tag tooltipped tooltipped__n">
|
|
||||||
${category.categoryTitle}</a>
|
|
||||||
</#list>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#if 0 != mostUsedTags?size>
|
|
||||||
<div class="module item">
|
|
||||||
<header class="module__header">${tagsLabel}</header>
|
|
||||||
<main class="module__content--three module__content fn__clear">
|
|
||||||
<#list mostUsedTags as tag>
|
|
||||||
<a rel="tag"
|
|
||||||
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"
|
|
||||||
class="tag tooltipped tooltipped__n"
|
|
||||||
aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}">
|
|
||||||
${tag.tagTitle}</a>
|
|
||||||
</#list>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#if 0 != mostCommentArticles?size>
|
|
||||||
<div class="module item">
|
|
||||||
<header class="module__header">${mostCommentArticlesLabel}</header>
|
|
||||||
<main class="module__list">
|
|
||||||
<ul>
|
|
||||||
<#list mostCommentArticles as article>
|
|
||||||
<li>
|
|
||||||
<a rel="nofollow"
|
|
||||||
href="${servePath}${article.articlePermalink}">
|
|
||||||
${article.articleTitle}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</#list>
|
|
||||||
</ul>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<#if 0 != mostViewCountArticles?size>
|
|
||||||
<div class="module item">
|
|
||||||
<header class="module__header">${mostViewCountArticlesLabel}</header>
|
|
||||||
<main class="module__list">
|
|
||||||
<ul>
|
|
||||||
<#list mostViewCountArticles as article>
|
|
||||||
<li>
|
|
||||||
<a rel="nofollow"
|
|
||||||
href="${servePath}${article.articlePermalink}">
|
|
||||||
${article.articleTitle}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</#list>
|
|
||||||
</ul>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</#if>
|
|
||||||
|
|
||||||
<div class="module item">
|
|
||||||
<div class="module__header">
|
|
||||||
<div class="fn__flex">
|
|
||||||
<a href="${servePath}/archives.html" class="fn__flex-1 ft__center">
|
|
||||||
${statistic.statisticPublishedBlogArticleCount}
|
|
||||||
${articleLabel}
|
|
||||||
</a>
|
|
||||||
<a href="${servePath}/dynamic.html" class="fn__flex-1 ft__center">
|
|
||||||
${statistic.statisticPublishedBlogCommentCount}
|
|
||||||
${commentLabel}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<br/>
|
|
||||||
<div class="fn__flex">
|
|
||||||
<div class="fn__flex-1 ft__center">
|
|
||||||
${statistic.statisticBlogViewCount} <span class="ft-gray">${viewLabel}</span>
|
|
||||||
</div>
|
|
||||||
<div class="fn__flex-1 ft__center">
|
|
||||||
${onlineVisitorCnt} <span class="ft-gray">${onlineVisitorLabel}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
@@ -48,7 +48,6 @@
|
|||||||
</main>
|
</main>
|
||||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||||
</div>
|
</div>
|
||||||
<#include "side.ftl">
|
|
||||||
</div>
|
</div>
|
||||||
<#include "footer.ftl">
|
<#include "footer.ftl">
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -55,7 +55,6 @@
|
|||||||
</main>
|
</main>
|
||||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||||
</div>
|
</div>
|
||||||
<#include "side.ftl">
|
|
||||||
</div>
|
</div>
|
||||||
<#include "footer.ftl">
|
<#include "footer.ftl">
|
||||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<@head title="${blogTitle}">
|
<@head title="${archiveLabel} - ${blogTitle}">
|
||||||
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
||||||
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
||||||
</@head>
|
</@head>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<@head title="${blogTitle}">
|
<@head title="${archiveLabel} - ${blogTitle}">
|
||||||
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
||||||
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
||||||
</@head>
|
</@head>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<@head title="${blogTitle}">
|
<@head title="${archiveLabel} - ${blogTitle}">
|
||||||
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
||||||
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
||||||
</@head>
|
</@head>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<@head title="${blogTitle}">
|
<@head title="${archiveLabel} - ${blogTitle}">
|
||||||
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
||||||
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
||||||
</@head>
|
</@head>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<@head title="${blogTitle}">
|
<@head title="${archiveLabel} - ${blogTitle}">
|
||||||
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
||||||
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
||||||
</@head>
|
</@head>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<@head title="${blogTitle}">
|
<@head title="${archiveLabel} - ${blogTitle}">
|
||||||
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
|
||||||
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
<meta name="description" content="${metaDescription},${archiveLabel}"/>
|
||||||
</@head>
|
</@head>
|
||||||
|
|||||||
Reference in New Issue
Block a user