Skip to content

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

✨ #12180 responsive

parent 9b458639
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 229 additions and 126 deletions
src/main/webapp/skins/9IPHP/archive-articles.ftl
View file @ 8edac061
...@@ -9,24 +9,26 @@ ...@@ -9,24 +9,26 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<main class="main wrapper"> <div class="wrapper">
<div class="content page-archive"> <div class="main-wrap">
<section class="posts-collapse"> <main>
<span class="archive-move-on"></span> <div class="title">
<span class="archive-page-counter"> <h2 style="border-bottom:0">
${ohLabel}..! <i class="icon-inbox"></i>
<#if "en" == localeString?substring(0, 2)> &nbsp;
${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} <#if "en" == localeString?substring(0, 2)>
<#else> ${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} <#else>
</#if> ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
${sumLabel} ${archiveDate.archiveDatePublishedArticleCount} ${fightLabel} </#if>
</span> - ${archiveDate.archiveDatePublishedArticleCount} ${articleLabel}
</section> </h2>
<#include "article-list.ftl"> </div>
<#include "article-list.ftl">
</main>
<#include "side.ftl">
</div> </div>
<#include "side.ftl"> </div>
</main>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>
</html> </html>
src/main/webapp/skins/9IPHP/archives.ftl
View file @ 8edac061
...@@ -9,36 +9,34 @@ ...@@ -9,36 +9,34 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<main class="main wrapper"> <div class="wrapper">
<div class="content page-archive"> <div class="main-wrap">
<section class="posts-collapse"> <main class="other">
<span class="archive-move-on"></span> <span class="title">
<span class="archive-page-counter"> <h2><i class="icon-inbox"></i>
${ohLabel}..! ${sumLabel} ${statistic.statisticPublishedBlogArticleCount} ${fightLabel} &nbsp;${statistic.statisticPublishedBlogArticleCount} ${articleLabel}</h2>
</span> </span>
<#if 0 != archiveDates?size> <#if 0 != archiveDates?size>
<#list archiveDates as archiveDate> <ul class="list">
<article> <#list archiveDates as archiveDate>
<header class="post-header"> <li>
<h1>
<#if "en" == localeString?substring(0, 2)> <#if "en" == localeString?substring(0, 2)>
<a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"> <a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount}) ${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})
</a> </a>
<#else> <#else>
<a class="post-title" 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}) ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})
</a> </a>
</#if> </#if>
</h1> </li>
</header> </#list>
</article> </ul>
</#list>
</#if> </#if>
</section> </main>
<#include "side.ftl">
</div> </div>
<#include "side.ftl"> </div>
</main>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>
</html> </html>
src/main/webapp/skins/9IPHP/article-list.ftl
View file @ 8edac061
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<div class="content-reset"> <div class="content-reset">
${article.articleAbstract} ${article.articleAbstract}
</div> </div>
<footer class="fn-clear"> <footer class="fn-clear tags">
<#list article.articleTags?split(",") as articleTag> <#list article.articleTags?split(",") as articleTag>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}"> <a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}</a> ${articleTag}</a>
......
src/main/webapp/skins/9IPHP/article.ftl
View file @ 8edac061
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
</#if> </#if>
</div> </div>
<footer> <footer class="tags">
<#list article.articleTags?split(",") as articleTag> <#list article.articleTags?split(",") as articleTag>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}"> <a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}</a> ${articleTag}</a>
......
src/main/webapp/skins/9IPHP/css/base.css
View file @ 8edac061
...@@ -833,13 +833,18 @@ aside { ...@@ -833,13 +833,18 @@ aside {
color: #555; color: #555;
text-decoration: none; text-decoration: none;
line-height: 50px; line-height: 50px;
margin-right: 20px; padding: 0 10px;
display: inline-block;
} }
.navbar nav a:hover { .navbar nav a:hover {
color: #333; color: #333;
} }
.navbar nav a.current {
background-color: #eee;
}
.navbar form { .navbar form {
position: relative; position: relative;
margin-top: 8px; margin-top: 8px;
...@@ -907,7 +912,8 @@ aside .ad { ...@@ -907,7 +912,8 @@ aside .ad {
color: #fff; color: #fff;
padding: 20px; padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid transparent border: 1px solid transparent;
box-sizing: border-box;
} }
aside .meta main { aside .meta main {
...@@ -922,7 +928,7 @@ aside .meta img { ...@@ -922,7 +928,7 @@ aside .meta img {
border-radius: 5px; border-radius: 5px;
} }
aside .tag { aside .tag.tooltipped {
display: inline-block; display: inline-block;
padding: 2px 5px; padding: 2px 5px;
margin-bottom: 10px; margin-bottom: 10px;
...@@ -938,6 +944,7 @@ aside .tag { ...@@ -938,6 +944,7 @@ aside .tag {
border: 1px solid #ededed; border: 1px solid #ededed;
margin-bottom: 20px; margin-bottom: 20px;
padding: 20px; padding: 20px;
box-sizing: border-box;
} }
.post h1 { .post h1 {
...@@ -969,11 +976,7 @@ aside .tag { ...@@ -969,11 +976,7 @@ aside .tag {
color: #ff4d3a; color: #ff4d3a;
} }
.post footer { .tags > a.tag {
margin-top: 10px;
}
.post footer > a.tag {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
display: inline-block; display: inline-block;
...@@ -982,11 +985,12 @@ aside .tag { ...@@ -982,11 +985,12 @@ aside .tag {
padding: 0 5px; padding: 0 5px;
line-height: 22px; line-height: 22px;
text-decoration: none; text-decoration: none;
margin-top: 10px;
} }
.post footer > a.tag:before { .tags > a.tag:before {
content: "#"; content: "#";
} }
.post footer > a.tag:hover { .tags > a.tag:hover {
background: #999; background: #999;
} }
...@@ -1013,7 +1017,7 @@ aside .tag { ...@@ -1013,7 +1017,7 @@ aside .tag {
background-color: #eee; background-color: #eee;
} }
.post .title h2 { .title h2 {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
padding-bottom: 10px; padding-bottom: 10px;
...@@ -1079,4 +1083,39 @@ aside .tag { ...@@ -1079,4 +1083,39 @@ aside .tag {
.form .captcha { .form .captcha {
height: 28px; height: 28px;
} }
/* end comments */ /* end comments */
\ No newline at end of file
/* start other */
.other {
border: 1px solid #ededed;
margin-bottom: 20px;
padding: 0 20px 20px;
}
/* end other */
/* start responsive */
@media (max-width: 900px) {
.navbar .form {
display: none;
}
}
@media (max-width: 700px) {
.wrapper {
width: 100%;
min-width: auto;
}
.main-wrap > main {
margin-right: 0;
}
.main-wrap {
display: block;
}
aside {
width: 100%;
padding: 20px 10px;
box-sizing: border-box;
}
}
/* end responsive */
\ No newline at end of file
src/main/webapp/skins/9IPHP/dynamic.ftl
View file @ 8edac061
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<#include "header.ftl"> <#include "header.ftl">
<div class="wrapper"> <div class="wrapper">
<div class="main-wrap"> <div class="main-wrap">
<main> <main class="post">
<#if 0 != recentComments?size> <#if 0 != recentComments?size>
<ul class="comments" id="comments"> <ul class="comments" id="comments">
<#list recentComments as comment> <#list recentComments as comment>
......
src/main/webapp/skins/9IPHP/js/common.js
View file @ 8edac061
...@@ -51,6 +51,12 @@ var Skin = { ...@@ -51,6 +51,12 @@ var Skin = {
}, },
init: function () { init: function () {
this._initCommon($('.icon-up')); this._initCommon($('.icon-up'));
$('.navbar nav a').each(function () {
if (this.href === location.href) {
this.className = 'current'
}
});
}, },
_initArticleCommon: function () { _initArticleCommon: function () {
// TOC // TOC
......
src/main/webapp/skins/9IPHP/js/isotope.pkgd.min.js 0 → 100755
View file @ 8edac061
This diff is collapsed.
src/main/webapp/skins/9IPHP/links.ftl 0 → 100644
View file @ 8edac061
<#include "macro-head.ftl">
<!DOCTYPE html>
<html>
<head>
<@head title="${blogTitle}">
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
<meta name="description" content="${metaDescription},${archiveLabel}"/>
</@head>
</head>
<body>
<#include "header.ftl">
<div class="wrapper">
<div class="main-wrap">
<main class="other">
<div class="title">
<h2><i class="icon-link"></i>
&nbsp;${linkLabel}</h2>
</div>
<#if 0 != links?size>
<ul class="list">
<#list links as link>
<li>
<a rel="friend" href="${link.linkAddress}" title="${link.linkDescription}" target="_blank">
${link.linkTitle}
</a>
</li>
</#list>
</ul>
</#if>
</main>
<#include "side.ftl">
</div>
</div>
<#include "footer.ftl">
</body>
</html>
src/main/webapp/skins/9IPHP/page.ftl
View file @ 8edac061
...@@ -10,15 +10,17 @@ ...@@ -10,15 +10,17 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<main class="main wrapper"> <div class="wrapper">
<div class="content"> <div class="main-wrap">
<article class="post-body"> <main>
${page.pageContent} <article class="post">
</article> ${page.pageContent}
<@comments commentList=pageComments article=page></@comments> <@comments commentList=pageComments article=page></@comments>
</article>
</main>
<#include "side.ftl">
</div> </div>
<#include "side.ftl"> </div>
</main>
<#include "footer.ftl"> <#include "footer.ftl">
<@comment_script oId=page.oId></@comment_script> <@comment_script oId=page.oId></@comment_script>
</body> </body>
......
src/main/webapp/skins/9IPHP/tag-articles.ftl
View file @ 8edac061
...@@ -9,61 +9,62 @@ ...@@ -9,61 +9,62 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<main class="main wrapper"> <div class="wrapper">
<div class="content posts-collapse"> <div class="main-wrap">
<div class="collection-title"> <main class="other">
<h2> <div class="title">
${tag.tagTitle} <h2><i class="icon-tags"></i>
<small>${tagLabel}</small> &nbsp;${tag.tagTitle}
</h2> <small>${tagLabel}</small>
</div> </div>
<#list articles as article> <ul class="list">
<article> <#list articles as article>
<header class="post-header"> <li>
<h1>
<a class="post-title" href="${servePath}${article.articlePermalink}"> <a class="post-title" href="${servePath}${article.articlePermalink}">
<span>${article.articleTitle}</span> <span>${article.articleTitle}</span>
<#if article.articlePutTop> <#if article.articlePutTop>
<sup> <sup>
${topArticleLabel} ${topArticleLabel}
</sup> </sup>
</#if> </#if>
<#if article.hasUpdated> <#if article.hasUpdated>
<sup> <sup>
${updatedLabel} ${updatedLabel}
</sup> </sup>
</#if> </#if>
<time class="fn-right">
<i class="icon-date"></i> ${article.articleCreateDate?string("yyyy-MM-dd")}
</time>
</a> </a>
</h1> </li>
<time class="post-time">
${article.articleCreateDate?string("MM-dd")}
</time>
</header>
</article>
</#list>
<#if 0 != paginationPageCount>
<nav class="pagination">
<#if 1 != paginationPageNums?first>
<a href="${servePath}${path}/${paginationPreviousPageNum}" class="extend next"><<</a>
<a class="page-number" href="${servePath}${path}/1">1</a> ...
</#if>
<#list paginationPageNums as paginationPageNum>
<#if paginationPageNum == paginationCurrentPageNum>
<span class="page-number current">${paginationPageNum}</span>
<#else>
<a class="page-number" href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
</#if>
</#list> </#list>
<#if paginationPageNums?last != paginationPageCount> ... </ul>
<a href="${servePath}${path}/${paginationPageCount}" class="page-number">${paginationPageCount}</a>
<a href="${servePath}${path}/${paginationNextPageNum}" class="extend next">>></a> <#if 0 != paginationPageCount>
<div class="fn-clear">
<nav class="pagination fn-right">
<#if 1 != paginationPageNums?first>
<a href="${servePath}${path}/${paginationPreviousPageNum}" class="page-number">&laquo;</a>
<a class="page-number" href="${servePath}${path}/1">1</a> <span class="page-number">...</span>
</#if>
<#list paginationPageNums as paginationPageNum>
<#if paginationPageNum == paginationCurrentPageNum>
<span class="page-number current">${paginationPageNum}</span>
<#else>
<a class="page-number" href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
</#if>
</#list>
<#if paginationPageNums?last != paginationPageCount> <span class="page-number">...</span>
<a href="${servePath}${path}/${paginationPageCount}" class="page-number">${paginationPageCount}</a>
<a href="${servePath}${path}/${paginationNextPageNum}" class="page-number">&raquo;</a>
</#if>
</nav>
</div>
</#if> </#if>
</nav> </main>
</#if> <#include "side.ftl">
</div> </div>
<#include "side.ftl"> </div>
</main>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>
</html> </html>
src/main/webapp/skins/9IPHP/tags.ftl
View file @ 8edac061
...@@ -11,28 +11,35 @@ ...@@ -11,28 +11,35 @@
<#include "header.ftl"> <#include "header.ftl">
<div class="wrapper"> <div class="wrapper">
<div class="main-wrap"> <div class="main-wrap">
<main> <main class="other">
<div class="tag-cloud"> <div class="title">
${sumLabel} ${tags?size} ${tagLabel} <h2><i class="icon-tags"></i>
<ul class="tag-cloud-tags fn-clear" id="tags"> &nbsp; ${sumLabel} ${tags?size} ${tagLabel}
<#list tags as tag> </div>
<li> <div class="tags">
<a rel="tag" data-count="${tag.tagPublishedRefCount}" <#list tags as tag>
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"> <a rel="tag" data-count="${tag.tagPublishedRefCount}" class="tag"
<span>${tag.tagTitle}</span> href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
(<b>${tag.tagPublishedRefCount}</b>) <span>${tag.tagTitle}</span>
</a> (<b>${tag.tagPublishedRefCount}</b>)
</li> </a>
</#list> </#list>
</ul>
</div> </div>
</main> </main>
<#include "side.ftl"> <#include "side.ftl">
</div> </div>
</div> </div>
<#include "footer.ftl"> <#include "footer.ftl">
<script> <script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/js/isotope.pkgd.min.js" charset="utf-8"></script>
Util.buildTags(); <script>
</script> $('.tags').isotope({
transitionDuration: '1.5s',
filter: 'a',
layoutMode: 'fitRows'
});
$('.tags').isotope({
sortBy: 'random'
});
</script>
</body> </body>
</html> </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