theme: format style

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

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