This commit is contained in:
Van
299
Pinghsu/css/base.scss
Normal file
299
Pinghsu/css/base.scss
Normal file
@@ -0,0 +1,299 @@
|
||||
/**
|
||||
* 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 <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
/*
|
||||
* skin style
|
||||
*
|
||||
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
||||
* @version 0.1.0.0, Feb 26, 2019
|
||||
*/
|
||||
@import "../../../scss/reset";
|
||||
@import "../../../scss/reset-content";
|
||||
@import "../../../scss/function";
|
||||
@import "../../../scss/tooltipped";
|
||||
@import "../../../scss/comment";
|
||||
@import "../../../scss/nprogress";
|
||||
@import "icon";
|
||||
@import "vditor/src/assets/scss/classic";
|
||||
|
||||
body {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #313131;
|
||||
outline: 0;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
a:active, a:focus, a:hover {
|
||||
color: #eb5055;
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: #fff;
|
||||
background-color: #eb5055
|
||||
}
|
||||
|
||||
.ft__gray {
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 1025px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #fff;
|
||||
animation-duration: .5s;
|
||||
animation-fill-mode: both;
|
||||
line-height: 70px;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
|
||||
&__logo {
|
||||
color: #4d4d4d;
|
||||
font-size: 20px;
|
||||
img {
|
||||
margin: 10px 5px 0 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
float: right;
|
||||
a {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&--up {
|
||||
animation-name: slideUp;
|
||||
}
|
||||
|
||||
&--down {
|
||||
animation-name: slideDown;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
transform: translateY(0)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-70px)
|
||||
}
|
||||
}
|
||||
@keyframes slideDown {
|
||||
0% {
|
||||
transform: translateY(-70px)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
transform: translateY(20px);
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #fff;
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
&__border {
|
||||
border-bottom: 1px solid rgba(184, 197, 214, .2);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&__nav {
|
||||
text-align: center;
|
||||
height: 65px;
|
||||
line-height: 65px;
|
||||
a {
|
||||
padding: 0 25px;
|
||||
}
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
&__mid {
|
||||
margin: 0 40px;
|
||||
}
|
||||
&__copyright {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #767676;
|
||||
}
|
||||
.wrapper {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-list {
|
||||
animation: fade-in;
|
||||
animation-duration: .5s;
|
||||
padding-top: 95px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
float: left;
|
||||
width: 33.3333%;
|
||||
padding: 15px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
transition: all .3s;
|
||||
&__container {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
|
||||
overflow: hidden;
|
||||
}
|
||||
&__cover {
|
||||
margin-bottom: 130px;
|
||||
height: 250px;
|
||||
transition: transform .5s ease, filter .5s ease;
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
}
|
||||
&__slant {
|
||||
transform: rotate(-10deg) translate(10px, -10px);
|
||||
opacity: .7;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 237px;
|
||||
left: 3px;
|
||||
width: 110%;
|
||||
height: 100px;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
&--white {
|
||||
left: 3px;
|
||||
opacity: 1;
|
||||
top: 234px;
|
||||
transform: rotate(7deg) translate(-10px, 0);
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
&__main {
|
||||
top: 250px;
|
||||
height: 130px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
&__abstract {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 40px 20px;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
transition: all .5s;
|
||||
& > div {
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 7;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
a {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
word-break: break-all;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
margin-bottom: 2px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
&__tag {
|
||||
float: right;
|
||||
color: #5f5f5f;
|
||||
margin: 12px 10px;
|
||||
}
|
||||
|
||||
&__container:hover {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
|
||||
.item {
|
||||
&__cover {
|
||||
transform: scale(1.1);
|
||||
filter: blur(3px);
|
||||
}
|
||||
&__abstract {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
& > div {
|
||||
animation: fade-in;
|
||||
animation-duration: .5s;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
text-align: center;
|
||||
margin: 25px 0 40px;
|
||||
&__item {
|
||||
color: #5f5f5f;
|
||||
padding: 0 15px;
|
||||
|
||||
&--current {
|
||||
color: #eb5055;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user