Skip to content

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

就差 responsive 了

parent 45901615
Expand all Show whitespace changes
Inline Side-by-side
Showing with 795 additions and 608 deletions
src/main/webapp/skins/next/archives.ftl
View file @ 4b8dcedd
......@@ -8,42 +8,37 @@
</@head>
</head>
<body>
<div class="container one-column page-archive">
<div class="headband"></div>
<#include "header.ftl">
<main id="main" class="main">
<div class="main-inner">
<div id="content" class="content">
<section id="posts" class="posts-collapse">
<main class="main wrapper">
<div class="content page-archive">
<section class="posts-collapse">
<span class="archive-move-on"></span>
<span class="archive-page-counter">
嗯..! 目前共计 ${statistic.statisticPublishedBlogArticleCount} 篇日志。 继续努力。
</span>
<#if 0 != archiveDates?size>
<#list archiveDates as archiveDate>
<div class="collection-title">
<article>
<header class="post-header">
<h1>
<#if "en" == localeString?substring(0, 2)>
<h2 class="archive-year motion-element">
<a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
<a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})
</a>
</h2>
<#else>
<h2 class="archive-year motion-element">
<a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
<a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})
</a>
</h2>
</#if>
</div>
</h1>
</header>
</article>
</#list>
</#if>
</section>
</div>
</div>
<#include "side.ftl">
</main>
<#include "footer.ftl">
</div>
</body>
</html>
src/main/webapp/skins/next/article.ftl
View file @ 4b8dcedd
......@@ -9,14 +9,10 @@
</@head>
</head>
<body>
<div class="container one-column page-post-detail">
<div class="headband"></div>
<#include "header.ftl">
<main id="main" class="main">
<div class="main-inner">
<div id="content" class="content">
<div id="posts" class="posts-expand">
<article class="post post-type-normal">
<main class="main wrapper">
<div class="content">
<article class="posts-expand">
<header class="post-header">
<h1 class="post-title">
${article.articleTitle}
......@@ -56,45 +52,39 @@
</div>
</#if>
</div>
<footer class="post-footer">
<footer>
<div class="post-tags">
<#list article.articleTags?split(",") as articleTag>
<a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}</a>
</#list>
</div>
<div class="post-nav">
<#if nextArticlePermalink?? || previousArticlePermalink??>
<div class="post-nav fn-clear">
<#if previousArticlePermalink??>
<div class="post-nav-next post-nav-item">
<div class="post-nav-prev post-nav-item fn-left">
<a href="${servePath}${previousArticlePermalink}" rel="next" title="${previousArticleTitle}">
<i class="fa fa-chevron-left"></i> ${previousArticleTitle}
< ${previousArticleTitle}
</a>
</div>
</#if>
<#if nextArticlePermalink??>
<div class="post-nav-prev post-nav-item">
<div class="post-nav-next post-nav-item fn-right">
<a href="${servePath}${nextArticlePermalink}" rel="prev" title="${nextArticleTitle}">
${nextArticleTitle} <i class="fa fa-chevron-right"></i>
${nextArticleTitle} >
</a>
</div>
</#if>
</#if>
</div>
</footer>
</article>
</div>
<@comments commentList=articleComments article=article></@comments>
</div>
</div>
<#include "side.ftl">
</main>
<#include "footer.ftl">
<@comment_script oId=article.oId>
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
</@comment_script>
</div>
</body>
</html>
src/main/webapp/skins/next/css/fonts/icomoon.eot 100644 → 100755
View file @ 4b8dcedd
No preview for this file type
src/main/webapp/skins/next/css/fonts/icomoon.svg 100644 → 100755
View file @ 4b8dcedd
This diff is collapsed.
src/main/webapp/skins/next/css/fonts/icomoon.ttf 100644 → 100755
View file @ 4b8dcedd
No preview for this file type
src/main/webapp/skins/next/css/fonts/icomoon.woff 100644 → 100755
View file @ 4b8dcedd
No preview for this file type
src/main/webapp/skins/next/css/fonts/selection.json 100644 → 100755
View file @ 4b8dcedd
This diff is collapsed.
src/main/webapp/skins/next/css/next.css
View file @ 4b8dcedd
......@@ -58,6 +58,11 @@ blockquote {
color: #666;
border-left: 4px solid #ddd;
}
img {
max-width: 100%;
height: auto;
}
/* end reset */
/* start function */
......@@ -87,6 +92,47 @@ blockquote {
/* end function */
/* start common */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?a0psdo');
src: url('fonts/icomoon.eot?a0psdo#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?a0psdo') format('truetype'),
url('fonts/icomoon.woff?a0psdo') format('woff'),
url('fonts/icomoon.svg?a0psdo#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-register:before {
content: "\e973";
}
.icon-setting:before {
content: "\e994";
}
.icon-login:before {
content: "\ea13";
}
.icon-logout:before {
content: "\ea14";
}
.icon-rss:before {
content: "\e901";
}
.form {
width: 100%;
margin-top: 50px;
......@@ -204,6 +250,12 @@ blockquote {
margin: 0 auto;
}
.main {
position: relative;
top: -50px;
opacity: 0;
}
.header {
background: #f5f5f5;
margin-bottom: 80px;
......@@ -213,6 +265,9 @@ blockquote {
.logo-wrap {
float: left;
margin-left: -20px;
overflow: hidden;
top: 0;
opacity: 0;
}
.logo-line-before,
......@@ -229,11 +284,20 @@ blockquote {
display: block;
height: 2px;
background: #222;
left: -100%;
}
.logo-line-after i {
left: auto;
right: -100%;
}
.logo-wrap .site-title {
font-size: 22px;
font-weight: bolder;
opacity: 0;
top: -10px;
position: relative;
}
.logo-wrap > a {
......@@ -252,8 +316,9 @@ blockquote {
.menu {
float: left;
margin: 15px 0 0 20px;
margin: 5px 0 0 20px;
padding: 0 20px;
opacity: 0;
}
.menu .menu-item {
......@@ -325,12 +390,47 @@ blockquote {
width: 100%;
background: #fff;
margin-top: 4px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.sidebar-toggle-line:first-child {
margin-top: 0;
}
.sidebar-toggle:hover .sidebar-toggle-line-first {
width: 50%;
transform: rotateZ(-45deg);
top: 3px;
}
.sidebar-toggle:hover .sidebar-toggle-line-middle {
width: 90%;
}
.sidebar-toggle:hover .sidebar-toggle-line-last {
width: 50%;
transform: rotateZ(45deg);
top: -3px;
}
.sidebar-toggle.sidebar-active .sidebar-toggle-line-first {
width: 100%;
transform: rotateZ(-45deg);
top: 6px;
}
.sidebar-toggle.sidebar-active .sidebar-toggle-line-middle {
opacity: 0;
}
.sidebar-toggle.sidebar-active .sidebar-toggle-line-last {
width: 100%;
transform: rotateZ(45deg);
top: -6px;
}
.back-to-top {
position: fixed;
bottom: 19px;
......@@ -368,6 +468,10 @@ blockquote {
box-shadow: inset 0 2px 6px #000;
background: #222;
-webkit-transform: translateZ(0);
padding: 20px 10px;
color: #999;
text-align: center;
box-sizing: border-box;
}
.sidebar a {
color: #999;
......@@ -376,12 +480,101 @@ blockquote {
.sidebar a:hover {
color: #eee;
}
.sidebar .site-author-image {
display: block;
margin: 20px auto 0;
max-width: 96px;
height: auto;
border: 2px solid #333;
padding: 2px;
}
.sidebar .site-author-name {
margin: 5px 0 0;
color: #f5f5f5;
}
.sidebar .site-description {
margin-top: 5px;
font-size: 14px;
color: #555;
}
.sidebar .site-state-item {
display: inline-block;
padding: 0 15px;
border-left: 1px solid #333;
}
.sidebar .site-state-item:first-child {
border-left: none;
}
.sidebar .site-state-item a {
border-bottom: none;
}
.sidebar .site-state-item-count {
display: block;
text-align: center;
font-size: 18px;
}
.sidebar .site-state-item-name {
font-size: 13px;
}
.sidebar .feed-link {
margin-top: 20px;
}
.sidebar .feed-link a {
display: inline-block;
padding: 3px 15px;
color: #fc6423;
border: 1px solid #fc6423;
border-radius: 4px;
}
.sidebar .feed-link a:hover {
color: #fff;
background: #fc6423;
}
.sidebar .links-of-author {
margin-top: 20px;
}
.sidebar .links-of-author a {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 10px;
border-bottom-color: #555;
font-size: 13px;
}
.sidebar .links-of-author a:before {
display: inline-block;
vertical-align: middle;
margin-right: 3px;
content: " ";
width: 4px;
height: 4px;
border-radius: 50%;
background: #0dd5ff;
}
.sidebar .b3-solo-list {
margin: 20px;
list-style: none;
text-align: left;
padding: 0;
font-size: 14px;
line-height: 2;
}
/* end side */
/* start list*/
.posts-expand .post-item {
margin-top: 120px;
}
.posts-expand .post-item:first-child {
margin-top: 0;
}
.post-title-link {
display: inline-block;
......@@ -462,6 +655,50 @@ blockquote {
}
/* end list*/
/* start article */
.post-header {
text-align: center;
}
.post-body img {
box-sizing: border-box;
margin: auto;
padding: 3px;
border: 1px solid #ddd;
}
.posts-expand .post-tags {
margin-top: 40px;
}
.posts-expand .post-tags a {
padding: 1px 5px;
background: #f5f5f5;
border-bottom: none;
}
.posts-expand .post-tags a:hover {
background: #ccc;
}
.posts-expand .post-nav {
margin-top: 40px;
overflow: hidden;
padding: 10px;
white-space: nowrap;
border-top: 1px solid #eee;
}
.post-nav-item a:hover {
color: #222;
border-bottom: none;
}
.post-nav-item a {
position: relative;
display: inline-block;
line-height: 25px;
font-size: 14px;
color: #555;
border-bottom: none;
width: 50%;
}
/* end article */
/* start comments */
ul.comments {
padding: 0;
......@@ -535,9 +772,14 @@ ul.comments .comment-meta time {
/* end comments */
/* start tags */
.tag-cloud {
text-align: center;
}
#tags li {
list-style: none;
display: inline-block;
margin: 10px;
}
#tags .tags1 {
......@@ -566,8 +808,116 @@ ul.comments .comment-meta time {
}
/* end tags */
/* start archives */
.posts-collapse .collection-title::before {
content: " ";
position: absolute;
left: 0;
top: 50%;
margin-left: -4px;
margin-top: -4px;
width: 8px;
height: 8px;
background: #bbb;
border-radius: 50%;
}
.posts-collapse .collection-title {
position: relative;
margin: 60px 0;
}
.posts-collapse .collection-title h2 {
margin-left: 20px;
}
.posts-collapse .collection-title small {
color: #bbb;
}
.posts-collapse .post-header::before {
content: " ";
position: absolute;
left: 0;
top: 12px;
width: 6px;
height: 6px;
margin-left: -4px;
background: #bbb;
border-radius: 50%;
border: 1px solid #fff;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
transition-property: background;
}
.posts-collapse .post-header {
position: relative;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
transition-property: border;
border-bottom: 1px dashed #ccc;
text-align: left;
}
.posts-collapse .post-header:hover {
border-bottom-color: #666;
}
.posts-collapse .post-header:hover::before {
background: #222;
}
.posts-collapse .post-time {
position: absolute;
font-size: 12px;
left: 20px;
top: 8px;
}
.posts-collapse .post-title {
margin-left: 70px;
font-size: 16px;
font-weight: normal;
font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: inherit;
text-decoration: none;
border-bottom: 0;
color: #666;
}
.page-archive .archive-page-counter {
position: relative;
top: 7px;
left: 20px;
margin-bottom: 50px;
display: block;
}
.page-archive .posts-collapse .archive-move-on {
position: absolute;
top: 11px;
left: 0;
margin-left: -6px;
width: 10px;
height: 10px;
opacity: 0.5;
background: #555;
border: 1px solid #fff;
border-radius: 50%;
}
.page-archive .post-title {
margin-left: 20px;
}
.page-archive .posts-collapse .post-header::before {
top: 8px;
}
.page-archive .posts-collapse::after {
top: 20px;
left: 0;
margin-left: -2px;
width: 4px;
height: 100%;
background: #f5f5f5;
z-index: -1;
content: " ";
position: absolute;
}
/* end archives */
/* start responsive */
@media (max-width: 767px) {
@media (max-width: 500px) {
.site-nav-toggle {
display: block;
}
......
src/main/webapp/skins/next/dynamic.ftl
View file @ 4b8dcedd
......@@ -8,22 +8,16 @@
</@head>
</head>
<body>
<div class="container one-column page-home">
<div class="headband"></div>
<#include "header.ftl">
<main id="main" class="main">
<div class="main-inner">
<div id="content" class="content">
<main class="main wrapper">
<div class="content">
<#if 0 != recentComments?size>
<ul class="comments" id="comments">
<#list recentComments as comment>
<#if comment_index < 6>
<li class="fn-clear">
<div class="fn-left avatar-warp">
<img class="avatar-48" title="${comment.commentName}" src="${comment.commentThumbnailURL}">
</div>
<div class="fn-left" style="width: 90%">
<div class="fn-clear post-meta">
<div class="comment-body">
<div class="fn-clear comment-meta">
<span class="fn-left">
<#if "http://" == comment.commentURL>
<span>${comment.commentName}</span>
......@@ -32,22 +26,20 @@
</#if>
<time>${comment.commentDate?string("yyyy-MM-dd HH:mm")}</time>
</span>
<a class="fn-right" href="${servePath}${comment.commentSharpURL}">${viewLabel}»</a>
</div>
<div class="comment-content">
${comment.commentContent}
</div>
</div>
</li>
</#if>
</#list>
</ul>
</#if>
</div>
</div>
<#include "side.ftl">
</main>
<#include "footer.ftl">
</div>
<script>
var $commentContents = $(".comments .comment-content");
......
src/main/webapp/skins/next/index.ftl
View file @ 4b8dcedd
......@@ -12,7 +12,6 @@
</@head>
</head>
<body>
<div class="headband"></div>
<#include "header.ftl">
<main class="main wrapper">
<div class="content">
......
src/main/webapp/skins/next/js/next.js
View file @ 4b8dcedd
......@@ -37,7 +37,6 @@ var NexT = {
$sidebar.animate({
right: -320
});
} else {
$(this).addClass('sidebar-active');
$('body').animate({
......@@ -52,9 +51,38 @@ var NexT = {
$('.site-nav-toggle').click(function () {
$('.site-nav').slideToggle();
});
$(document).ready(function () {
setTimeout(function () {
$('.logo-wrap').css('opacity', 1);
$('.logo-line-before i').animate({
'left': '0'
}, function () {
$('.site-title').css('opacity', 1).animate({
'top': 0
}, function () {
$('.menu').css('opacity', 1).animate({
'margin-top': '15px'
});
$('.main').css('opacity', 1).animate({
'top': '0'
});
});
});
$('.logo-line-after i').animate({
'right': '0'
});
}, 500);
});
},
initArticle: function () {
$('.sidebar-inner').html($('.b3-solo-list'));
if ($('.b3-solo-list li').length > 0) {
$('.sidebar').html($('.b3-solo-list'));
$('.sidebar-toggle').click();
}
}
};
NexT.init();
\ No newline at end of file
src/main/webapp/skins/next/macro-comments.ftl
View file @ 4b8dcedd
<#macro comments commentList article>
<ul class="comments fn-wrap" id="comments">
<ul class="comments" id="comments">
<#list commentList as comment>
<li id="${comment.oId}" class="fn-clear">
<img class="avatar-48" title="${comment.commentName}" src="${comment.commentThumbnailURL}">
......
src/main/webapp/skins/next/page.ftl
View file @ 4b8dcedd
......@@ -9,29 +9,17 @@
</@head>
</head>
<body>
<div class="container one-column page-post-detail">
<div class="headband"></div>
<#include "header.ftl">
<main id="main" class="main">
<div class="main-inner">
<div id="content" class="content">
<div id="posts" class="posts-expand">
<article class="post post-type-normal">
<div class="post-body">
<main class="main wrapper">
<div class="content">
<article class="post-body">
${page.pageContent}
</div>
</article>
</div>
<@comments commentList=pageComments article=page></@comments>
</div>
</div>
<#include "side.ftl">
</main>
<#include "footer.ftl">
<@comment_script oId=page.oId></@comment_script>
</div>
</body>
</html>
src/main/webapp/skins/next/side.ftl
View file @ 4b8dcedd
......@@ -5,17 +5,14 @@
</div>
<aside class="sidebar">
<div class="sidebar-inner">
<section class="site-overview sidebar-panel sidebar-panel-active ">
<div class="site-author motion-element">
<img class="site-author-image skip" src="${adminUser.userAvatar}" title="${userName}"/>
<section>
<img class="site-author-image" src="${adminUser.userAvatar}" title="${userName}"/>
<p class="site-author-name">${userName}</p>
</div>
<#if "" != noticeBoard>
<p class="site-description motion-element">${blogSubtitle}</p>
</#if>
<nav class="site-state motion-element">
<div class="site-state-item site-state-posts">
<nav>
<div class="site-state-item">
<a href="/archives">
<span class="site-state-item-count">${statistic.statisticPublishedBlogArticleCount}</span>
<span class="site-state-item-name">日志</span>
......@@ -35,24 +32,24 @@
</div>
</nav>
<div class="feed-link motion-element">
<div class="feed-link">
<a href="${servePath}/blog-articles-rss.do" rel="alternate">
<i class="fa fa-rss"></i>
<i class="icon-rss"></i>
RSS
</a>
</div>
<div class="links-of-author motion-element">
<div class="links-of-author">
<#if isLoggedIn>
<span class="links-of-author-item">
<a href="${servePath}/admin-index.do#main" title="${adminLabel}">
<i class="fa fa-github"></i> ${adminLabel}
<i class="icon-setting"></i> ${adminLabel}
</a>
</span>
<span class="links-of-author-item">
<a href="${logoutURL}">
<i class="fa fa-weibo"></i> ${logoutLabel}
<i class="icon-logout"></i> ${logoutLabel}
</a>
</span>
<#else>
......@@ -64,20 +61,20 @@
<span class="links-of-author-item">
<a href="${servePath}/register">
<i class="fa fa-weibo"></i> ${registerLabel}
<i class="icon-register"></i> ${registerLabel}
</a>
</span>
</#if>
</div>
<#if noticeBoard??>
<div class="links-of-author motion-element">
<div class="links-of-author">
${noticeBoard}
</div>
</#if>
<#if 0 != links?size>
<div class="links-of-author motion-element">
<div class="links-of-author">
<p class="site-author-name">Links</p>
<#list links as link>
<span class="links-of-author-item">
......@@ -89,7 +86,5 @@
</#list>
</div>
</#if>
</section>
</div>
</aside>
\ No newline at end of file
src/main/webapp/skins/next/tag-articles.ftl
View file @ 4b8dcedd
......@@ -8,14 +8,9 @@
</@head>
</head>
<body>
<div class="container one-column">
<div class="headband"></div>
<#include "header.ftl">
<main id="main" class="main">
<div class="main-inner">
<div id="content" class="content">
<div id="posts" class="posts-collapse">
<main class="main wrapper">
<div class="content posts-collapse">
<div class="collection-title">
<h2>
${tag.tagTitle}
......@@ -23,11 +18,11 @@
</h2>
</div>
<#list articles as article>
<article class="post post-type-normal">
<article>
<header class="post-header">
<h1 class="post-title">
<a class="post-title-link" href="${servePath}${article.articlePermalink}">
<span itemprop="name">${article.articleTitle}</span>
<h1>
<a class="post-title" href="${servePath}${article.articlePermalink}">
<span>${article.articleTitle}</span>
<#if article.articlePutTop>
<sup>
${topArticleLabel}
......@@ -40,11 +35,9 @@
</#if>
</a>
</h1>
<div class="post-meta">
<time class="post-time">
${article.articleCreateDate?string("MM-dd")}
</time>
</div>
</header>
</article>
</#list>
......@@ -52,7 +45,7 @@
<#if 0 != paginationPageCount>
<nav class="pagination">
<#if 1 != paginationPageNums?first>
<a href="${servePath}${path}/${paginationPreviousPageNum}" class="extend"><i class="fa fa-angle-left"></i></a>
<a href="${servePath}${path}/${paginationPreviousPageNum}" class="extend next"><<</a>
<a class="page-number" href="${servePath}${path}/1">1</a> ...
</#if>
<#list paginationPageNums as paginationPageNum>
......@@ -64,16 +57,13 @@
</#list>
<#if paginationPageNums?last != paginationPageCount> ...
<a href="${servePath}${path}/${paginationPageCount}" class="page-number">${paginationPageCount}</a>
<a href="${servePath}${path}/${paginationNextPageNum}" class="extend next"><i class="fa fa-angle-right"></i></a>
<a href="${servePath}${path}/${paginationNextPageNum}" class="extend next">>></a>
</#if>
</nav>
</#if>
</div>
</div>
</div>
<#include "side.ftl">
</main>
<#include "footer.ftl">
</div>
</body>
</html>
src/main/webapp/skins/next/tags.ftl
View file @ 4b8dcedd
......@@ -8,19 +8,11 @@
</@head>
</head>
<body>
<div class="container one-column">
<div class="headband"></div>
<#include "header.ftl">
<main id="main" class="main">
<div class="main-inner">
<div id="content" class="content">
<div id="posts" class="posts-expand">
<main class="main wrapper">
<div class="content">
<div class="tag-cloud">
<div class="tag-cloud-title">
目前共计 ${tags?size} 个标签
</div>
<ul class="tag-cloud-tags fn-clear" id="tags">
<#list tags as tag>
<li>
......@@ -34,14 +26,11 @@
</ul>
</div>
</div>
</div>
</div>
<#include "side.ftl">
</main>
<#include "footer.ftl">
<script>
Util.buildTags();
</script>
</div>
</body>
</html>
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