Skip to content

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

refactor style

parent bad06dfe
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 282 additions and 2465 deletions
src/main/webapp/skins/next/css/main.css
View file @ 456c8fc6
This diff is collapsed.
src/main/webapp/skins/next/css/next.css
View file @ 456c8fc6
...@@ -15,12 +15,52 @@ ...@@ -15,12 +15,52 @@
*/ */
@charset "utf-8"; @charset "utf-8";
/* /*
* skin yilia style * skin next style
* *
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a> * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @author <a href="http://88250.b3log.org">Liang Ding</a> * @version 0.1.0.0, Jul 7, 2016
* @version 1.2.0.1, Nov 7, 2015
*/ */
/* start reset */
body {
margin: 0;
font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
font-size: 14px;
color: #555;
background: #fff;
}
a {
color: #555;
text-decoration: none;
border-bottom: 1px solid #999;
}
a:active,
a:hover {
outline: 0;
}
a:hover {
color: #222;
border-bottom-color: #222;
}
hr {
margin: 40px 0;
height: 3px;
border: none;
background-color: #ddd;
background-image: repeating-linear-gradient(-45deg, #fff, #fff 4px, transparent 4px, transparent 8px);
}
blockquote {
padding: 0 15px;
color: #666;
border-left: 4px solid #ddd;
}
/* end reset */
/* start function */
.fn-clear:before, .fn-clear:before,
.fn-clear:after { .fn-clear:after {
display: table; display: table;
...@@ -44,112 +84,44 @@ ...@@ -44,112 +84,44 @@
.fn-none { .fn-none {
display: none; display: none;
} }
/* end function */
.avatar-48 { /* start common */
box-shadow: 0 0 2px #ddd; .form {
height: auto; width: 100%;
width: 48px;
margin-right: 10px;
border-radius: 24px;
}
ul.comments {
padding: 0;
list-style: none;
margin-top: 50px; margin-top: 50px;
position: relative;
} }
.comments li { .form input,
padding: 10px; .form textarea,
white-space: normal; .form button {
word-wrap: break-word; border: 1px solid #CCCCCC;
position: relative; background-color: #FAFAFA;
border-bottom: #EBF2F6 1px solid; border-radius: 3px;
list-style: inherit; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
} padding: 7px 8px;
width: 100%;
.comments li:hover { box-sizing: border-box;
background-color: #F7F7F7; outline: none;
}
.comments .comment-content {
margin: 8px 0 0;
}
.comments li.comment-body-ref {
position: absolute;
z-index: 10;
background-color: #EBF2F6;
border: #d5dbde 1px solid;
width: 86%;
left: 69px;
}
#comments.comments .post-meta {
margin: 0;
} }
#captcha, .form button {
#captchaReply { width: auto;
height: 27px;
display: inline-block;
vertical-align: inherit;
} }
#commentValidate, .form input:focus,
#commentValidateReply { .form textarea:focus {
vertical-align: middle; background-color: #FFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgba(81, 167, 232, 0.5);
border: 1px solid #51A7E8;
} }
#comments .post-meta { .error-msg {
font-family: "Open Sans","Microsoft Yahei",Helvetica;
color: #9eabb3;
}
#comments .post-meta a {
color: #9EABB3; color: #9EABB3;
text-decoration: none; margin-right: 10px;
border-bottom-width: 0;
}
#comments .post-meta a:hover {
text-decoration: underline;
}
#comments .post-meta time {
border-left: 1px solid #d5dbde;
display: inline-block;
font-size: 13px;
margin-left: 8px;
padding-left: 12px;
text-transform: uppercase;
white-space: nowrap;
}
#comments .post-author {
box-sizing: border-box;
display: block;
position: absolute;
bottom: -57px;
left: 50%;
margin-left: -40px;
width: 80px;
height: 80px;
border-radius: 100%;
overflow: hidden;
padding: 6px;
background: #fff;
z-index: 2;
box-shadow: #E7EEF2 0 0 0 1px;
} }
/* end common */
#comments .post-author a {
background-size: cover;
background-position: center center;
width: 68px;
height: 68px;
display: block;
border-radius: 35px;
}
/* start emotions */ /* start emotions */
.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, .em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09,
.em10, .em11, .em12, .em13, .em14 { .em10, .em11, .em12, .em13, .em14 {
...@@ -225,50 +197,182 @@ ul.comments { ...@@ -225,50 +197,182 @@ ul.comments {
background-position: -96px -48px; background-position: -96px -48px;
} }
/* end emotions */ /* end emotions */
.form {
width: 100%; /* start framework */
margin-top: 50px; .header {
background: #f5f5f5;
margin-bottom: 80px;
padding: 40px 45px;
} }
.form input, .logo-wrap {
.form textarea, float: left;
.form button { margin-left: -20px;
border: 1px solid #CCCCCC; }
background-color: #FAFAFA;
border-radius: 3px; .logo-line-before,
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset; .logo-line-after {
padding: 7px 8px; display: block;
width: 100%; overflow: hidden;
box-sizing: border-box; margin: 0 auto;
-moz-box-sizing: border-box; width: 75%;
-webkit-box-sizing: border-box; }
font-family: "Merriweather", "Microsoft Yahei", 'Helvetica';
.logo-line-before i,
.logo-line-after i {
position: relative;
display: block;
height: 2px;
background: #222;
}
.logo-wrap .site-title {
font-size: 22px;
font-weight: bolder;
}
.logo-wrap > a {
position: relative;
display: inline-block;
padding: 2px 1px;
color: #222;
line-height: 2;
border-bottom: none;
font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.site-nav-toggle {
display: none;
}
.menu {
float: left;
margin: 15px 0 0 20px;
padding: 0 20px;
}
.menu .menu-item {
display: inline-block;
}
.menu .menu-item a {
padding: 5px 10px;
border: none;
transition-property: background;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.menu .menu-item a:hover {
background: #e1e1e1;
}
.site-search {
float: right;
margin-top: 15px;
}
.site-search input {
padding: 3px;
border: none;
padding-left: 18px;
border-radius: 0;
width: 140px;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMTZweCIgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNMTUuNywxNC4zbC0zLjEwNS0zLjEwNUMxMy40NzMsMTAuMDI0LDE0LDguNTc2LDE0LDdjMC0zLjg2Ni0zLjEzNC03LTctN1MwLDMuMTM0LDAsN3MzLjEzNCw3LDcsNyAgYzEuNTc2LDAsMy4wMjQtMC41MjcsNC4xOTQtMS40MDVMMTQuMywxNS43YzAuMTg0LDAuMTg0LDAuMzgsMC4zLDAuNywwLjNjMC41NTMsMCwxLTAuNDQ3LDEtMUMxNiwxNC43ODEsMTUuOTQ2LDE0LjU0NiwxNS43LDE0LjN6ICAgTTIsN2MwLTIuNzYyLDIuMjM4LTUsNS01czUsMi4yMzgsNSw1cy0yLjIzOCw1LTUsNVMyLDkuNzYyLDIsN3oiLz48L3N2Zz4=") no-repeat 0 50%;
background-size: 12px 12px;
outline: none; outline: none;
line-height: initial; border-bottom: 1px solid #999;
opacity: 0.5;
} }
.form button { .site-search input:focus {
width: auto; opacity: 1;
vertical-align: bottom;
} }
.form input:focus, .footer {
.form textarea:focus { margin-top: 80px;
background-color: #FFF; padding: 10px 20px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgba(81, 167, 232, 0.5); background: #f5f5f5;
border: 1px solid #51A7E8; color: #666;
line-height: 2;
text-align: center;
} }
/* end framework */
.error-msg { /* start comments */
color: #9EABB3; ul.comments {
margin-right: 10px; padding: 0;
list-style: none;
margin-top: 50px;
position: relative;
}
ul.comments li {
padding: 10px;
white-space: normal;
word-wrap: break-word;
position: relative;
border-bottom: #EBF2F6 1px solid;
}
ul.comments li:hover {
background-color: #F7F7F7;
}
ul.comments .avatar-48 {
position: absolute;
box-shadow: 0 0 2px #ddd;
height: 48px;
width: 48px;
margin: 8px 10px 0 0;
border-radius: 24px;
} }
.cmtFromSym { ul.comments .comment-body {
font-size: 1rem; margin: 8px 0 0 60px;
}
ul.comments li.comment-body-ref {
position: absolute;
z-index: 10;
background-color: #EBF2F6;
border: #d5dbde 1px solid;
width: 80%;
left: 69px;
}
ul.comments .comment-meta {
font-family: "Open Sans","Microsoft Yahei",Helvetica;
color: #9eabb3;
font-size: 13px;
}
ul.comments .comment-meta a {
color: #9EABB3; color: #9EABB3;
text-decoration: none;
border-bottom-width: 0;
}
ul.comments .post-meta a:hover {
text-decoration: underline;
}
ul.comments .comment-meta time {
border-left: 1px solid #d5dbde;
margin-left: 8px;
padding-left: 12px;
}
#captcha,
#captchaReply {
height: 27px;
vertical-align: inherit;
} }
/* end comments */
/* start tags */
#tags li { #tags li {
list-style: none; list-style: none;
display: inline-block; display: inline-block;
...@@ -278,19 +382,34 @@ ul.comments { ...@@ -278,19 +382,34 @@ ul.comments {
font-size: 12px; font-size: 12px;
color: #CCC; color: #CCC;
} }
#tags .tags2 { #tags .tags2 {
font-size: 16px; font-size: 16px;
color: #999; color: #999;
} }
#tags .tags3 { #tags .tags3 {
font-size: 21px; font-size: 21px;
color: #6f6f6f; color: #6f6f6f;
} }
#tags .tags4 { #tags .tags4 {
font-size: 24px; font-size: 24px;
color: #333; color: #333;
} }
#tags .tags5 { #tags .tags5 {
font-size: 30px; font-size: 30px;
color: #111; color: #111;
} }
\ No newline at end of file /* end tags */
/* start responsive */
@media (min-width: 767px) {
.site-nav-toggle {
display: block;
}
}
@media (min-width: 1600px) {
}
/* end responsive */
\ No newline at end of file
src/main/webapp/skins/next/footer.ftl
View file @ 456c8fc6
<footer id="footer" class="footer"> <footer class="footer">
<div class="footer-inner"> <a href="${servePath}">${blogTitle}</a> •
<div class="copyright"> ${onlineVisitor1Label}${onlineVisitorCnt} <br/>
<a href="${servePath}">${blogTitle}</a> • &copy; ${year}
${onlineVisitor1Label}${onlineVisitorCnt} ${footerContent}
</div> Powered by <a href="http://b3log.org" target="_blank">B3log 开源</a> •
&copy; ${year} <a href="http://b3log.org/services/#solo" target="_blank">Solo</a> ${version}
${footerContent}
Powered by <a href="http://b3log.org" target="_blank">B3log 开源</a> •
<a href="http://b3log.org/services/#solo" target="_blank">Solo</a> ${version}
</div>
</footer> </footer>
<div class="back-to-top" onclick="Util.goTop()"></div> <div class="back-to-top" onclick="Util.goTop()"></div>
......
src/main/webapp/skins/next/header.ftl
View file @ 456c8fc6
<header id="header" class="header"> <header class="header">
<div class="header-inner"> <div class="fn-clear">
<div class="site-meta "> <div class="logo-wrap">
<div class="custom-logo-site-title"> <a href="${servePath}" rel="start">
<a href="${servePath}" class="brand" rel="start"> <span class="logo-line-before"><i></i></span>
<span class="logo-line-before"><i></i></span> <span class="site-title">${blogTitle}</span>
<span class="site-title">${blogTitle}</span> <span class="logo-line-after"><i></i></span>
<span class="logo-line-after"><i></i></span> </a>
</a>
</div>
<p class="site-subtitle">${blogSubtitle}</p>
</div> </div>
<div class="site-nav-toggle"> <div class="site-nav-toggle">
...@@ -19,37 +16,32 @@ ...@@ -19,37 +16,32 @@
</button> </button>
</div> </div>
<nav class="site-nav"> <nav>
<ul id="menu" class="menu menu-left"> <ul class="menu">
<#list pageNavigations as page> <#list pageNavigations as page>
<li class="menu-item menu-item-archives"> <li class="menu-item">
<a href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section"> <a href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
<i class="menu-item-icon fa fa-archive fa-fw"></i> <br>
${page.pageTitle} ${page.pageTitle}
</a> </a>
</li> </li>
</#list> </#list>
<li class="menu-item menu-item-archives"> <li class="menu-item">
<a href="${servePath}/dynamic.html" rel="section"> <a href="${servePath}/dynamic.html" rel="section">
<i class="menu-item-icon fa fa-archive fa-fw"></i> <br>
${dynamicLabel} ${dynamicLabel}
</a> </a>
</li> </li>
<li class="menu-item menu-item-archives"> <li class="menu-item">
<a href="${servePath}/tags.html" rel="section"> <a href="${servePath}/tags.html" rel="section">
<i class="menu-item-icon fa fa-archive fa-fw"></i> <br>
${allTagsLabel} ${allTagsLabel}
</a> </a>
</li> </li>
<li class="menu-item menu-item-archives"> <li class="menu-item">
<a href="${servePath}/archives.html"> <a href="${servePath}/archives.html">
<i class="menu-item-icon fa fa-archive fa-fw"></i> <br>
${archiveLabel} ${archiveLabel}
</a> </a>
</li> </li>
<li class="menu-item menu-item-archives"> <li class="menu-item">
<a rel="alternate" href="${servePath}/blog-articles-rss.do" rel="section"> <a rel="alternate" href="${servePath}/blog-articles-rss.do" rel="section">
<i class="menu-item-icon fa fa-archive fa-fw"></i> <br>
RSS RSS
</a> </a>
</li> </li>
...@@ -57,7 +49,7 @@ ...@@ -57,7 +49,7 @@
<div class="site-search"> <div class="site-search">
<form target="_blank" action="http://zhannei.baidu.com/cse/site"> <form target="_blank" action="http://zhannei.baidu.com/cse/site">
<input placeholder="${searchLabel}" id="search" type="text" name="q" class="st-search-input st-default-search-input" /> <input placeholder="${searchLabel}" id="search" type="text" name="q"/>
<input type="submit" value="" class="fn-none" /> <input type="submit" value="" class="fn-none" />
<input type="hidden" name="cc" value="${serverHost}"> <input type="hidden" name="cc" value="${serverHost}">
</form> </form>
......
src/main/webapp/skins/next/js/next.js
View file @ 456c8fc6
...@@ -35,22 +35,23 @@ var NexT = { ...@@ -35,22 +35,23 @@ var NexT = {
'padding-right': 0 'padding-right': 0
}); });
$sidebar.animate({ $sidebar.animate({
width: 0 right: -320
}, function () {
$sidebar.hide();
}); });
} else { } else {
$(this).addClass('sidebar-active'); $(this).addClass('sidebar-active');
$sidebar.show();
$('body').animate({ $('body').animate({
'padding-right': 320 'padding-right': 320
}); });
$sidebar.animate({ $sidebar.animate({
width: 320 right: 0
}); });
} }
}); });
$('.site-nav-toggle').click(function () {
$('.site-nav').slideToggle();
});
}, },
initArticle: function () { initArticle: function () {
$('.sidebar-inner').html($('.b3-solo-list')); $('.sidebar-inner').html($('.b3-solo-list'));
......
src/main/webapp/skins/next/macro-comments.ftl
View file @ 456c8fc6
...@@ -2,11 +2,9 @@ ...@@ -2,11 +2,9 @@
<ul class="comments fn-wrap" id="comments"> <ul class="comments fn-wrap" id="comments">
<#list commentList as comment> <#list commentList as comment>
<li id="${comment.oId}" class="fn-clear"> <li id="${comment.oId}" class="fn-clear">
<div class="fn-left avatar-warp"> <img class="avatar-48" title="${comment.commentName}" src="${comment.commentThumbnailURL}">
<img class="avatar-48" title="${comment.commentName}" src="${comment.commentThumbnailURL}"> <div class="comment-body">
</div> <div class="fn-clear comment-meta">
<div class="fn-left" style="width: 90%">
<div class="fn-clear post-meta">
<span class="fn-left"> <span class="fn-left">
<#if "http://" == comment.commentURL> <#if "http://" == comment.commentURL>
<a>${comment.commentName}</a> <a>${comment.commentName}</a>
...@@ -117,11 +115,11 @@ ...@@ -117,11 +115,11 @@
var addComment = function (result, state) { var addComment = function (result, state) {
var commentable = $("#commentForm").length === 0 ? false : true; var commentable = $("#commentForm").length === 0 ? false : true;
var commentHTML = '<li class="fn-clear" id="' + result.oId + var commentHTML = '<li class="fn-clear" id="' + result.oId +
'"><div class="fn-left" style="width: 10%"><img class="avatar-48" title="' '"><img class="avatar-48" title="'
+ result.userName + '" src="' + result.commentThumbnailURL + '"></div><div class="fn-left" style="width: 90%">' + result.userName + '" src="' + result.commentThumbnailURL + '"><div class="comment-body">'
+ '<div class="fn-clear post-meta"><span class="fn-left">' + result.replyNameHTML; + '<div class="fn-clear comment-meta"><span class="fn-left">' + result.replyNameHTML;
if (state !== "") { if (state !== "") {
var commentOriginalCommentName = $("#" + page.currentCommentId).find(".post-meta a").first().text(); var commentOriginalCommentName = $("#" + page.currentCommentId).find(".comment-meta a").first().text();
commentHTML += '&nbsp;@&nbsp;<a href="${servePath}' + result.commentSharpURL.split("#")[0] + '#' + page.currentCommentId + '"' commentHTML += '&nbsp;@&nbsp;<a href="${servePath}' + result.commentSharpURL.split("#")[0] + '#' + page.currentCommentId + '"'
+ 'onmouseover="page.showComment(this, \'' + page.currentCommentId + '\', 23);"' + 'onmouseover="page.showComment(this, \'' + page.currentCommentId + '\', 23);"'
+ 'onmouseout="page.hideComment(\'' + page.currentCommentId + '\')">' + commentOriginalCommentName + '</a>'; + 'onmouseout="page.hideComment(\'' + page.currentCommentId + '\')">' + commentOriginalCommentName + '</a>';
......
src/main/webapp/skins/next/macro-head.ftl
View file @ 456c8fc6
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
<meta name="copyright" content="B3log" /> <meta name="copyright" content="B3log" />
<meta http-equiv="Window-target" content="_top" /> <meta http-equiv="Window-target" content="_top" />
<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/${skinDirName}${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" /> <link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/${skinDirName}${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/main${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
<link href="${servePath}/blog-articles-rss.do" title="RSS" type="application/rss+xml" rel="alternate" /> <link href="${servePath}/blog-articles-rss.do" title="RSS" type="application/rss+xml" rel="alternate" />
<link rel="icon" type="image/png" href="${servePath}/favicon.png" /> <link rel="icon" type="image/png" href="${servePath}/favicon.png" />
${htmlHead} ${htmlHead}
......
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