theme: format style
This commit is contained in:
parent
87b332ccd2
commit
38ba17019a
1 changed files with 66 additions and 50 deletions
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue