This commit is contained in:
Van
@@ -47,7 +47,9 @@
|
||||
</#if>
|
||||
<#if article.hasUpdated>
|
||||
<sup>
|
||||
${updatedLabel}
|
||||
<a href="${servePath}${article.articlePermalink}">
|
||||
${updatedLabel}
|
||||
</a>
|
||||
</sup>
|
||||
</#if>
|
||||
</h2>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -19,7 +19,7 @@
|
||||
* skin style
|
||||
*
|
||||
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
||||
* @version 0.2.0.0, Jul 17, 2019
|
||||
* @version 0.3.0.0, Aug 2, 2019
|
||||
*/
|
||||
@import "../../../scss/reset";
|
||||
@import "../../../scss/usite";
|
||||
@@ -49,6 +49,7 @@ a {
|
||||
|
||||
.ft__a {
|
||||
color: $gray;
|
||||
|
||||
&:hover {
|
||||
color: rgba($gray, .8);
|
||||
}
|
||||
@@ -63,6 +64,7 @@ a {
|
||||
.header {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
|
||||
&--index {
|
||||
&:before {
|
||||
content: "";
|
||||
@@ -75,22 +77,28 @@ a {
|
||||
filter: brightness(48%);
|
||||
}
|
||||
}
|
||||
|
||||
&--article {
|
||||
background-color: $black-bg;
|
||||
height: 64px;
|
||||
|
||||
.header__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header__nav a {
|
||||
margin-bottom: 0;
|
||||
line-height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
&--other {
|
||||
height: 407px;
|
||||
|
||||
.header__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
height: 100%;
|
||||
@@ -101,32 +109,39 @@ a {
|
||||
background-size: cover;
|
||||
filter: brightness(48%);
|
||||
}
|
||||
|
||||
.header__nav a {
|
||||
margin-bottom: 0;
|
||||
line-height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__h1 {
|
||||
font-size: 30px;
|
||||
padding-top: 140px;
|
||||
font-weight: normal;
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $fade-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
@@ -134,14 +149,17 @@ a {
|
||||
color: $fade-lighter;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
float: left;
|
||||
line-height: 24px;
|
||||
color: $fade-lighter;
|
||||
margin: 0 20px 90px 0;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
@@ -165,8 +183,10 @@ a {
|
||||
padding: 20px 0;
|
||||
background-color: $black-bg;
|
||||
color: #fff;
|
||||
|
||||
a {
|
||||
color: $fade-lighter;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
@@ -184,6 +204,7 @@ a {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -20px;
|
||||
|
||||
.item {
|
||||
flex: 1 1 300px;
|
||||
overflow: hidden;
|
||||
@@ -195,6 +216,7 @@ a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
|
||||
&--large {
|
||||
flex-direction: row;
|
||||
flex: 1 1 100%;
|
||||
@@ -210,15 +232,18 @@ a {
|
||||
flex: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
|
||||
transform: translate3D(0, -1px, 0) scale(1.02);
|
||||
}
|
||||
|
||||
&__cover {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
&__main {
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
@@ -226,6 +251,7 @@ a {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
display: inline-block;
|
||||
margin-bottom: 4px;
|
||||
@@ -235,26 +261,45 @@ a {
|
||||
font-weight: 500;
|
||||
letter-spacing: .5px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: rgba($gray, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
|
||||
& > a {
|
||||
color: $black;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: rgba($black, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
sup {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: rgba($gray, 0.8);
|
||||
|
||||
a {
|
||||
color: rgba($gray, 0.8);
|
||||
cursor: text;
|
||||
|
||||
&:hover {
|
||||
color: rgba($gray, 0.8);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -262,6 +307,7 @@ a {
|
||||
line-height: 24px;
|
||||
color: $black;
|
||||
flex: 1;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: rgba($black, 0.8);
|
||||
@@ -272,6 +318,7 @@ a {
|
||||
float: right;
|
||||
margin-top: 18px;
|
||||
color: $gray;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: rgba($gray, 0.8);
|
||||
@@ -281,6 +328,7 @@ a {
|
||||
&__avatar {
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
@@ -304,11 +352,13 @@ a {
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
margin: 0 5px 40px;
|
||||
|
||||
&:hover,
|
||||
&--active {
|
||||
opacity: 0.68;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&--omit {
|
||||
background-color: transparent;
|
||||
color: $black;
|
||||
@@ -318,13 +368,16 @@ a {
|
||||
|
||||
.article {
|
||||
background-color: #fff;
|
||||
|
||||
&__bottom {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
.fn__flex {
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
flex: 1 1 300px;
|
||||
@@ -335,6 +388,7 @@ a {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -346,16 +400,19 @@ a {
|
||||
background-size: cover;
|
||||
filter: brightness(48%);
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
border-bottom: 1px solid rgba($gray, .8);
|
||||
@@ -365,6 +422,7 @@ a {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__top {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@@ -374,6 +432,7 @@ a {
|
||||
height: 60px;
|
||||
transition: all .3s ease;
|
||||
z-index: 1;
|
||||
|
||||
.title {
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
@@ -381,9 +440,11 @@ a {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&__share {
|
||||
float: right;
|
||||
position: relative;
|
||||
|
||||
.item {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
@@ -394,32 +455,41 @@ a {
|
||||
color: #fdc200;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease;
|
||||
|
||||
svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&[data-type="wechat"] {
|
||||
color: #3caf36;
|
||||
|
||||
&:hover {
|
||||
background-color: #3caf36;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-type="twitter"] {
|
||||
color: #18a3fa;
|
||||
|
||||
&:hover {
|
||||
background-color: #18a3fa;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-type="weibo"] {
|
||||
color: #f93;
|
||||
|
||||
&:hover {
|
||||
background-color: #f93;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: #fdc200;
|
||||
}
|
||||
|
||||
&__qr {
|
||||
position: absolute;
|
||||
top: 61px;
|
||||
@@ -427,6 +497,7 @@ a {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__progress {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -437,32 +508,39 @@ a {
|
||||
border: none;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: $link;
|
||||
}
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
&__meta {
|
||||
padding-top: 76px;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
color: rgba($gray, .8);
|
||||
|
||||
a {
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
sup {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: rgba($gray, .8);
|
||||
}
|
||||
}
|
||||
|
||||
&__cover {
|
||||
height: 800px;
|
||||
background-size: cover;
|
||||
@@ -472,19 +550,23 @@ a {
|
||||
border-radius: 5px;
|
||||
filter: sepia(0.2) contrast(1.3) opacity(.86);
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 70px 100px 0;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
|
||||
&--article {
|
||||
margin-top: -164px;
|
||||
position: relative;
|
||||
padding-bottom: 30px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tip {
|
||||
margin-bottom: 40px;
|
||||
border-radius: 5px;
|
||||
@@ -495,6 +577,7 @@ a {
|
||||
background: #f4f8fb;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
|
||||
transform: translate3D(0, -1px, 0) scale(1.02);
|
||||
@@ -521,10 +604,12 @@ a {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
|
||||
li.current a,
|
||||
a:hover {
|
||||
color: $link;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-top: -24px;
|
||||
@@ -543,6 +628,7 @@ a {
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.current:before {
|
||||
background-color: $link;
|
||||
}
|
||||
@@ -552,11 +638,13 @@ a {
|
||||
.comment {
|
||||
background-color: #f4f8fb;
|
||||
position: relative;
|
||||
|
||||
&__wrapper {
|
||||
margin: 0 auto;
|
||||
padding: 0 100px 0.1px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&-body-ref {
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
@@ -598,8 +686,10 @@ a {
|
||||
color: rgba($gray, .8);
|
||||
float: left;
|
||||
line-height: 40px;
|
||||
|
||||
a {
|
||||
color: $gray;
|
||||
|
||||
&:hover {
|
||||
color: rgba($gray, .8);
|
||||
}
|
||||
@@ -634,6 +724,7 @@ a {
|
||||
|
||||
.other {
|
||||
position: relative;
|
||||
|
||||
&__title {
|
||||
margin: -220px 0 5px;
|
||||
color: #fff;
|
||||
@@ -641,14 +732,17 @@ a {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
||||
&--list {
|
||||
margin-bottom: 154px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
background-color: #fff;
|
||||
padding: 70px 100px;
|
||||
@@ -656,15 +750,18 @@ a {
|
||||
box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
line-height: 20px;
|
||||
margin: 10px;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
|
||||
&--archive {
|
||||
width: 187px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
span, div {
|
||||
color: $gray;
|
||||
font-size: 12px;
|
||||
@@ -677,28 +774,36 @@ a {
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
padding: 10px 0;
|
||||
|
||||
&__h1 {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
&__h2 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
.fn__right {
|
||||
float: none;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--article {
|
||||
height: auto;
|
||||
|
||||
.header__nav a {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--other {
|
||||
height: 360px;
|
||||
|
||||
.header__nav a {
|
||||
line-height: 24px;
|
||||
}
|
||||
@@ -708,8 +813,10 @@ a {
|
||||
.articles {
|
||||
position: initial;
|
||||
margin: 10px -5px 0 -5px;
|
||||
|
||||
.item {
|
||||
margin: 0 5px 10px;
|
||||
|
||||
&--large {
|
||||
flex-direction: column;
|
||||
flex: 1 1 300px;
|
||||
@@ -729,6 +836,7 @@ a {
|
||||
.pagination {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&__item {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@@ -745,9 +853,11 @@ a {
|
||||
.article {
|
||||
&__top {
|
||||
height: 40px;
|
||||
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toc {
|
||||
display: block;
|
||||
float: left;
|
||||
@@ -756,29 +866,36 @@ a {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&__share .item {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
&__meta {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
&__cover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 10px 10px 0;
|
||||
|
||||
&--article {
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
.fn__flex {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
@@ -789,6 +906,7 @@ a {
|
||||
&__title {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
padding: 0 10px 0.1px;
|
||||
}
|
||||
@@ -797,6 +915,7 @@ a {
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
|
||||
&__avatar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -807,10 +926,12 @@ a {
|
||||
&__title {
|
||||
margin-top: -280px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding: 20px;
|
||||
margin: 40px auto 10px;
|
||||
}
|
||||
|
||||
&__meta--list {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user