208 lines
No EOL
2.4 KiB
CSS
208 lines
No EOL
2.4 KiB
CSS
:root {
|
|
--bg: #141414;
|
|
--fg: rgb(232, 228, 228);
|
|
--links: #5da0f2;
|
|
--muted_text: rgb(179, 182, 186);
|
|
--h1: rgb(167, 83, 23);
|
|
--h2: rgb(185, 97, 35);
|
|
--h3: rgb(196, 110, 49);
|
|
--h4: rgb(216, 126, 61);
|
|
--h5: rgb(235, 139, 70);
|
|
--h6: rgb(244, 156, 93);
|
|
--strong: #FD6A02;
|
|
--hover-link: yellow;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg: #fafafa;
|
|
--fg: #2f343f;
|
|
--links: #4084d6;
|
|
--muted_text: rgb(93, 93, 99);
|
|
--h1: rgb(167, 83, 23);
|
|
--h2: rgb(185, 97, 35);
|
|
--h3: rgb(196, 110, 49);
|
|
--h4: rgb(216, 126, 61);
|
|
--h5: rgb(235, 139, 70);
|
|
--h6: rgb(244, 156, 93);
|
|
--strong: #FD6A02;
|
|
--hover-link: rgb(217, 144, 8);
|
|
}
|
|
}
|
|
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
background: var(--bg);
|
|
/* color: rgb(143, 185, 58) ; */
|
|
color: var(--fg);
|
|
}
|
|
|
|
main {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
header h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
clear: both;
|
|
}
|
|
|
|
/* For TAGLIST.HTML */
|
|
.taglist {
|
|
text-align: center;
|
|
clear: both;
|
|
}
|
|
|
|
/* For NEXTPREV.HTML */
|
|
#nextprev {
|
|
/* The container for both the previous and next articles. */
|
|
margin-top: 15px;
|
|
}
|
|
|
|
#prevart {
|
|
float: left;
|
|
text-align: left;
|
|
}
|
|
|
|
#nextart {
|
|
float: right;
|
|
text-align: right;
|
|
}
|
|
|
|
#nextart,
|
|
#prevart {
|
|
max-width: 33%;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--links);
|
|
}
|
|
|
|
/* Globally */
|
|
|
|
/* Each state */
|
|
|
|
a:visited {
|
|
text-decoration: none;
|
|
color: var(--links);
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
color: var(--links);
|
|
}
|
|
|
|
/* a:focus {
|
|
text-decoration: none;
|
|
color: yellow;
|
|
} */
|
|
|
|
a:hover,
|
|
a:active {
|
|
text-decoration: none;
|
|
color: var(--hover-link);
|
|
}
|
|
|
|
strong {
|
|
color: var(--strong);
|
|
}
|
|
|
|
h1 {
|
|
color: var(--h1);
|
|
}
|
|
|
|
h2 {
|
|
color: var(--h2);
|
|
}
|
|
|
|
h3 {
|
|
color: var(--h3);
|
|
}
|
|
|
|
h4 {
|
|
color: var(--h4);
|
|
}
|
|
|
|
h5 {
|
|
color: var(--h5);
|
|
}
|
|
|
|
h6 {
|
|
color: var(--h6);
|
|
}
|
|
|
|
pre {
|
|
background: #282c34;
|
|
color: white;
|
|
border: 1px solid var(--strong);
|
|
border-radius: 20px;
|
|
padding: 1em;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: break-word;
|
|
max-width: 800px;
|
|
margin: auto;
|
|
}
|
|
|
|
.spanForHeader{
|
|
color: rgba(0, 255, 255, 0);
|
|
}
|
|
|
|
.spanForHeader:hover{
|
|
color: var(--links);
|
|
}
|
|
|
|
|
|
.tenRecentPosts li{
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.white_span{
|
|
color: var(--fg);
|
|
}
|
|
|
|
|
|
.white_link a{
|
|
color: var(--fg);
|
|
}
|
|
|
|
.muted_text{
|
|
color: var(--muted_text);
|
|
}
|
|
|
|
p {
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
ul {
|
|
line-height: 1.3em;
|
|
}
|
|
|
|
.footnotes {
|
|
line-height: 0px;
|
|
}
|
|
|
|
ol {
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
ol li {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
ol li::marker{
|
|
color: var(--strong);
|
|
}
|
|
|
|
ul li::marker{
|
|
color: var(--strong)
|
|
} |