PeterCxy/paprika
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

theme: format style

Browse source
This commit is contained in:
Peter Cai 2020-04-11 20:46:04 +08:00
parent 87b332ccd2
commit 38ba17019a
No known key found for this signature in database
GPG key ID: 71F5FB4E4F3FD54F
1 changed files with 66 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
theme/default/static/style.css
View file

@ -1,14 +1,15 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&display=swap");
/* Get rid of default padding */ /* Get rid of default padding */
html, body { html,
body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Fira Sans', sans-serif; font-family: "Fira Sans", sans-serif;
font-size: 18px; font-size: 18px;
text-shadow: 0 0 3px #dddddd; text-shadow: 0 0 3px #dddddd;
color: rgb(100, 100, 100); color: rgb(100, 100, 100);
scrollbar-color: #E91E63 #00000000; scrollbar-color: #e91e63 #00000000;
scrollbar-width: thin; scrollbar-width: thin;
} }
@ -34,7 +35,11 @@ html {
display: none; display: none;
} }
a, a:link, a:visited, a:hover, a:active { a,
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
outline: none; outline: none;
@ -59,7 +64,7 @@ body {
margin-top: 20px; margin-top: 20px;
width: 40px; width: 40px;
height: 3px; height: 3px;
background-color: #E91E63; background-color: #e91e63;
} }
.with-divider.with-divider-wide-center::after { .with-divider.with-divider-wide-center::after {
@ -77,7 +82,11 @@ body {
} }
/* Headings */ /* Headings */
h1, h2, h3, h4, h5 { h1,
h2,
h3,
h4,
h5 {
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
padding: 0; padding: 0;
} }
@ -184,7 +193,7 @@ h5 {
} }
.sidebar .links a:hover { .sidebar .links a:hover {
color: #F06292; color: #f06292;
} }
.sidebar .copyright { .sidebar .copyright {
@ -201,7 +210,8 @@ h5 {
} }
/* Home page post list */ /* Home page post list */
.post-list, .content { .post-list,
.content {
margin-top: 15px; margin-top: 15px;
margin-left: 25%; margin-left: 25%;
width: 75%; width: 75%;
@ -222,13 +232,13 @@ h5 {
} }
.post-list .post h1 a:hover { .post-list .post h1 a:hover {
color: #E91E63; color: #e91e63;
text-decoration: none; text-decoration: none;
} }
.post-list .post .read-more::after { .post-list .post .read-more::after {
content: "......"; content: "......";
color: #F06292; color: #f06292;
} }
.post-list .pagination { .post-list .pagination {
@ -237,13 +247,13 @@ h5 {
.post-list .pagination .page-older:after { .post-list .pagination .page-older:after {
content: "Older >"; content: "Older >";
color: #E91E63; color: #e91e63;
float: right; float: right;
} }
.post-list .pagination .page-newer:after { .post-list .pagination .page-newer:after {
content: "< Newer"; content: "< Newer";
color: #E91E63; color: #e91e63;
float: left; float: left;
} }
@ -252,7 +262,7 @@ h5 {
.post a:visited, .post a:visited,
.post a:hover, .post a:hover,
.post a:active { .post a:active {
color: #E91E63; color: #e91e63;
} }
.post a:hover { .post a:hover {
@ -300,7 +310,7 @@ h5 {
text-align: left; text-align: left;
background-color: #ffffff; background-color: #ffffff;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding-left: 15px; padding-left: 15px;
} }
@ -386,11 +396,12 @@ h5 {
margin-right: 10px; margin-right: 10px;
} }
.post-list, .content { .post-list,
.content {
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
} }
.with-divider.with-divider-center-mobile::after { .with-divider.with-divider-center-mobile::after {
margin-left: calc(50% - 20px) !important; margin-left: calc(50% - 20px) !important;
} }
@ -408,20 +419,20 @@ h5 {
width: 100%; /* Full width */ width: 100%; /* Full width */
height: 100%; /* Full height */ height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */ overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */ background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
} }
/* Modal Content (Image) */ /* Modal Content (Image) */
.modal-content { .modal-content {
margin: auto; margin: auto;
display: block; display: block;
width: 80%; width: 80%;
max-width: 700px; max-width: 700px;
} }
/* Caption of Modal Image (Image Text) - Same Width as the Image */ /* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption { #caption {
margin: auto; margin: auto;
display: block; display: block;
width: 80%; width: 80%;
@ -430,21 +441,26 @@ h5 {
color: #ccc; color: #ccc;
padding: 10px 0; padding: 10px 0;
height: 150px; height: 150px;
} }
/* Add Animation - Zoom in the Modal */ /* Add Animation - Zoom in the Modal */
.modal-content, #caption { .modal-content,
#caption {
animation-name: zoom; animation-name: zoom;
animation-duration: 0.6s; animation-duration: 0.6s;
} }
@keyframes zoom { @keyframes zoom {
from {transform:scale(0)} from {
to {transform:scale(1)} transform: scale(0);
} }
to {
/* The Close Button */ transform: scale(1);
.close { }
}
/* The Close Button */
.close {
position: absolute; position: absolute;
top: 15px; top: 15px;
right: 35px; right: 35px;
@ -452,18 +468,18 @@ h5 {
font-size: 40px; font-size: 40px;
font-weight: bold; font-weight: bold;
transition: 0.3s; transition: 0.3s;
} }
.close:hover, .close:hover,
.close:focus { .close:focus {
color: #bbb; color: #bbb;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
/* 100% Image Width on Smaller Screens */ /* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){ @media only screen and (max-width: 700px) {
.modal-content { .modal-content {
width: 100%; width: 100%;
} }
} }