diff --git a/9IPHP/archives.ftl b/9IPHP/archives.ftl index 24b18d7..fe30497 100644 --- a/9IPHP/archives.ftl +++ b/9IPHP/archives.ftl @@ -21,7 +21,7 @@ - <@head title="${blogTitle}"> + <@head title="${archiveLabel} - ${blogTitle}"> diff --git a/Bruce/archives.ftl b/Bruce/archives.ftl index 612e316..60ecc0d 100644 --- a/Bruce/archives.ftl +++ b/Bruce/archives.ftl @@ -21,7 +21,7 @@ - <@head title="${blogTitle}"> + <@head title="${archiveLabel} - ${blogTitle}"> diff --git a/Finding/archives.ftl b/Finding/archives.ftl index f9dce9e..8684ac9 100644 --- a/Finding/archives.ftl +++ b/Finding/archives.ftl @@ -21,7 +21,7 @@ - <@head title="${blogTitle}"> + <@head title="${archiveLabel} - ${blogTitle}"> diff --git a/Jane/archive-articles.ftl b/Jane/archive-articles.ftl index ee8abbb..cea11cb 100644 --- a/Jane/archive-articles.ftl +++ b/Jane/archive-articles.ftl @@ -30,18 +30,17 @@ <#include "header.ftl"> -
-
+
<#if pjax>
-
-
- - ${blogTitle} -   >   - - ${archiveLabel} -   >   +
+

+ + + ${archiveLabel} + +

+
<#if "en" == localeString?substring(0, 2)> ${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} <#else> @@ -53,9 +52,7 @@ <#include "article-list.ftl">
<#if pjax> -
- <#include "side.ftl"> + <#include "footer.ftl">
-<#include "footer.ftl"> diff --git a/Jane/archives.ftl b/Jane/archives.ftl index 6139979..fc0fda7 100644 --- a/Jane/archives.ftl +++ b/Jane/archives.ftl @@ -21,54 +21,41 @@ -<@head title="${blogTitle}"> +<@head title="${archiveLabel} - ${blogTitle}"> <#include "header.ftl"> -
-
+
<#if pjax> -
-
-
- - ${blogTitle} -   >   - - ${statistic.statisticPublishedBlogArticleCount} ${archiveLabel}${articleLabel} -
+
+

+ ${archiveLabel}${articleLabel} +

+
+ ${statistic.statisticPublishedBlogArticleCount} ${countLabel}
-
-
- <#if 0 != archiveDates?size> - - -
+
+ <#list archiveDates as archiveDate> + <#if "en" == localeString?substring(0, 2)> + + ${archiveDate.monthName} ${archiveDate.archiveDateYear} + (${archiveDate.archiveDatePublishedArticleCount}) + + <#else> + + ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} + (${archiveDate.archiveDatePublishedArticleCount}) + + +
-
- <#if pjax>
- <#include "side.ftl"> + <#if pjax> + <#include "footer.ftl">
-<#include "footer.ftl"> diff --git a/Jane/article-list.ftl b/Jane/article-list.ftl index e8d526b..db050ed 100644 --- a/Jane/article-list.ftl +++ b/Jane/article-list.ftl @@ -17,16 +17,9 @@ along with this program. If not, see . --> -
- <#list articles as article> -
- - -

+<#list articles as article> + - + - <#if 0 != paginationPageCount> -
- +<#if 0 != paginationPageCount> +
\ No newline at end of file + + <#if paginationPageNums?last != paginationPageCount> + Next » + + + \ No newline at end of file diff --git a/Jane/article.ftl b/Jane/article.ftl index dabe64f..a03b926 100644 --- a/Jane/article.ftl +++ b/Jane/article.ftl @@ -152,7 +152,6 @@ <#if pjax>

- <#include "side.ftl">
<#include "footer.ftl"> <#if pjax> diff --git a/Jane/categories.ftl b/Jane/categories.ftl new file mode 100644 index 0000000..eb9f755 --- /dev/null +++ b/Jane/categories.ftl @@ -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 . + +--> +<#include "macro-head.ftl"> + + + +<@head title="${categoryLabel} - ${blogTitle}"> + + + + + +<#include "header.ftl"> +
+ <#if pjax> +
+
+
+ + ${blogTitle} +   >   + + ${categoryLabel} +
+
+ <#list mostUsedCategories as category> + + ${category.categoryTitle} + +
+ <#if pjax> + <#include "footer.ftl"> +
+ + diff --git a/Jane/category-articles.ftl b/Jane/category-articles.ftl index 3880cb7..6f84f74 100644 --- a/Jane/category-articles.ftl +++ b/Jane/category-articles.ftl @@ -49,7 +49,6 @@ <#if pjax>
- <#include "side.ftl"> <#include "footer.ftl"> diff --git a/Jane/css/base.css b/Jane/css/base.css index 90050cc..8ca04d9 100644 --- a/Jane/css/base.css +++ b/Jane/css/base.css @@ -20,7 +20,7 @@ * skin style * * @author Liyuan Li - * @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. @@ -728,449 +728,105 @@ blockquote { .icon__rss:before { content: "\e901"; } +body::-webkit-scrollbar { + display: none; } + a { transition: all .3s; } .ft__red { - color: #b94a48; } + color: #991a1a; } -.module { - border-radius: 5px; - 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; } +.ft__gray { + color: #999; } -.form { - position: relative; } - .form__input { - border: 1px solid #7266BA; - height: 30px; - line-height: 30px; - padding: 0 15px; - border-radius: 15px; - width: 100%; - box-sizing: border-box; } +.content-reset { + color: #555; + font-size: 14px; } .header { + top: 0; background-color: #2a2a2a; color: #fff; position: fixed; right: 0; height: 100%; - width: 33px; } - .header a { + width: 50px; } + .header a, .header span { color: #fff; - padding: 0 15px; - 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; + padding: 10px 0; display: block; - margin: 0 auto; - margin-bottom: 15px; - transition: transform .3s; - margin-top: 10px; } - .side__avatar:hover { - transform: rotate(360deg) scale(1.2); - border: 5px solid rgba(114, 102, 186, 0.36); - margin-top: 0; } + text-align: center; + font-size: 16px; + width: 100%; } + .header a img, .header span img { + height: 17px; + width: 17px; } + .header a.current, .header a:hover, .header span.current, .header span:hover { + text-decoration: none; + color: #999; } + .header__bottom { + width: 100%; + position: absolute; + bottom: 0; } -.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; } - .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; } +.wrapper { + max-width: 920px; + margin: 0 auto; + padding: 0 20px; } .footer { - text-align: center; - color: #fff; - padding: 15px; - margin-bottom: 30px; } + color: #999; + padding: 30px 0; + line-height: 1.6em; + font-size: 0.85em; } .footer a { - color: #7266BA; } + color: #991a1a; } -.article-list .item { - border-radius: 5px; - margin-bottom: 30px; - box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2); - 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; } +.article__item { + margin: 50px 0; + border-bottom: 1px dashed #d9d9d9; + text-align: justify; } -.pagination__item { - color: #fff; - border-radius: 3px; - padding: 0 10px; - line-height: 24px; - display: inline-block; - margin: 0 0 10px 10px; - background-color: rgba(114, 102, 186, 0.58); } - .pagination__item--text { - background-color: rgba(255, 255, 255, 0.8); - color: #7266BA; } - .pagination__item--current { - background-color: #6658b8; } +.article__title { + padding: 20px 0; } + .article__title a { + text-decoration: none; + font-size: 25px; + font-weight: bold; + color: #555; + transition: color 0.2s; } + .article__title a:hover { + color: #991a1a; } -.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; - background-color: #6658b8; } + color: #991a1a; + display: block; } -.comments { - position: relative; } - .comments__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; } - .comments__item:hover { - box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); } - .comments__item:hover .comments__avatar { - transform: rotate(720deg); - border-radius: 0; } - .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); } +.pagination { + margin: 20px 0 40px; } + .pagination__item { + padding: 10px 10px; + color: #999; + display: inline-block; } + .pagination__item--current { + color: #991a1a; + font-weight: bold; } + .pagination a.pagination__item:hover { + text-decoration: none; + background: #991a1a; + color: #fff; } -.comment-body-ref { - right: 0; - position: absolute; - left: 64px; } - .comment-body-ref .breadcrumb { - display: none; } - -.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; } } +.tags { + line-height: 32px; + margin: 20px 0 70px; } + .tags a { + width: 180px; + float: left; } diff --git a/Jane/css/base.scss b/Jane/css/base.scss index d02097a..ed3837c 100644 --- a/Jane/css/base.scss +++ b/Jane/css/base.scss @@ -19,7 +19,7 @@ * skin style * * @author Liyuan Li - * @version 0.1.0.0, Dec 6, 2018 + * @version 0.1.0.0, Dec 7, 2018 */ @import "../../../scss/reset"; @import "../../../scss/reset-content"; @@ -29,12 +29,16 @@ @import "../../../scss/nprogress"; @import "icon"; -$purple: #7266BA !default; -$purple-dark: #6658b8 !default; -$red: #b94a48 !default; -$black: #3d4450 !default; +$red: #991a1a !default; +$gray: #999 !default; // reset +body { + &::-webkit-scrollbar { + display: none; + } +} + a { transition: all .3s; } @@ -43,646 +47,135 @@ a { color: $red; } -// module -.module { - 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; - } - } - } - } +.ft__gray { + color: $gray; } -// form -.form { - position: relative; - &__input { - border: 1px solid $purple; - height: 30px; - line-height: 30px; - padding: 0 15px; - border-radius: 15px; - width: 100%; - box-sizing: border-box; - } +.content-reset { + color: #555; + font-size: 14px; } // header .header { + top: 0; background-color: #2a2a2a; color: #fff; position: fixed; right: 0; height: 100%; - width: 33px; + width: 50px; - a { + a, span { color: #fff; - padding: 0 15px; - display: inline-block; + padding: 10px 0; + display: block; + text-align: center; + font-size: 16px; + width: 100%; + + img { + height: 17px; + width: 17px; + } &.current, &:hover { text-decoration: none; - background-color: rgba($purple-dark, 0.8); + color: $gray; } } - &__logo { + &__bottom { + width: 100%; position: absolute; - left: 30px; - } - - &__nav { - text-align: center; - - img { - float: left; - height: 20px; - width: 20px; - margin: 15px 5px 0 0; - } - } - - &__login { - position: absolute; - right: 30px; - top: 0; + bottom: 0; } } // framework -.main { - max-width: 1170px; - padding: 30px; - margin: auto; - 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; - } +.wrapper { + max-width: 920px; + margin: 0 auto; + padding: 0 20px; } // footer .footer { - text-align: center; - color: #fff; - padding: 15px; - margin-bottom: 30px; + color: $gray; + padding: 30px 0; + line-height: 1.6em; + font-size: 0.85em; a { - color: $purple; + color: $red; } } -// article list -.article-list { - .item { - border-radius: 5px; - margin-bottom: 30px; - box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2); - 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); +// article +.article { + &__item { + margin: 50px 0; + border-bottom: 1px dashed #d9d9d9; + text-align: justify; + } - &--active { - transform: perspective(2500px) rotateX(0); - } - - &:hover { - background-color: #fff; - box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); - } - - .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 { + &__title { + padding: 20px 0; + a { + text-decoration: none; + font-size: 25px; + font-weight: bold; + color: #555; + transition: color 0.2s; + &:hover { color: $red; } } + } - &__date { - position: absolute; - background-color: $purple; - 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; + &__content { + margin: 20px 0; + & > p:last-child { + margin-bottom: 0 } + } - &__day { - font-size: 30px; - display: block; - } + &__more { + margin-bottom: 70px; + 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 { - background-color: rgba(255, 255, 255, 0.8); - color: $purple; - } +.pagination { + margin: 20px 0 40px; + &__item { + padding: 10px 10px; + color: $gray; + display: inline-block; &--current { - background-color: $purple-dark; + color: #991a1a; + font-weight: bold; } } a.pagination__item:hover { 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 { - box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); - - .comments__avatar { - 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; +// other page +.tags { + line-height: 32px; + margin: 20px 0 70px; a { - padding-left: 30px !important; - } -} - -.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; + width: 180px; + float: left; } } \ No newline at end of file diff --git a/Jane/dynamic.ftl b/Jane/dynamic.ftl index 31744e4..c4a5ab1 100644 --- a/Jane/dynamic.ftl +++ b/Jane/dynamic.ftl @@ -50,7 +50,6 @@ <#if pjax> -<#include "side.ftl"> <#include "footer.ftl">