204 lines
3.2 KiB
CSS
204 lines
3.2 KiB
CSS
html {
|
|
overflow-y: scroll;
|
|
}
|
|
:root {
|
|
--bgcolor: #f8f8f2;
|
|
--fontcolor: #282a36;
|
|
--linkcolor: #9CFF00;
|
|
--visitedcolor: #9CFF00;
|
|
--precolor: #fff;
|
|
--prebgcolor: #000;
|
|
--alertbgcolor: white;
|
|
--hrcolor: #9CFF00;
|
|
--blockquotecolor: white;
|
|
--pcodecolor: #000;
|
|
--sitetitlecolor: #9CFF00;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bgcolor: #282a36;
|
|
--fontcolor: #f8f8f2;
|
|
--linkcolor: #9CFF00;
|
|
--visitedcolor: #9CFF00;
|
|
--precolor: #f8f8f2;
|
|
--prebgcolor: #383838;
|
|
--alertbgcolor: #44475a;
|
|
--hrcolor: #39FF13;
|
|
--blockquotecolor: #44475a;
|
|
--pcodecolor: #6272a4;
|
|
--sitetitlecolor: #f1fa8c;
|
|
}
|
|
}
|
|
body {
|
|
max-width: 800px;
|
|
margin: 40px auto;
|
|
padding: 0 10px;
|
|
font: 14px/1.5 monospace;
|
|
color: var(--fontcolor);
|
|
background: var(--bgcolor);
|
|
}
|
|
a:link {
|
|
color: var(--linkcolor);
|
|
text-decoration: none;
|
|
}
|
|
a:visited {
|
|
color: var(--visitedcolor);
|
|
}
|
|
a:active {
|
|
color: var(--visitedcolor);
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
line-height: 1.2;
|
|
color: #39FF13;
|
|
}
|
|
h2 {
|
|
padding-top: 15px;
|
|
}
|
|
h3 {
|
|
padding-top: 10px;
|
|
}
|
|
p {
|
|
margin-top: 1.5rem;
|
|
}
|
|
p > code,
|
|
li > code {
|
|
color: var(--precolor);
|
|
background: var(--pcodecolor);
|
|
padding: 2px;
|
|
}
|
|
code {
|
|
color: var(--precolor);
|
|
background: var(--prebgcolor);
|
|
padding: 2px;
|
|
}
|
|
pre {
|
|
color: var(--precolor);
|
|
background: var(--prebgcolor);
|
|
padding: 24px;
|
|
overflow-x: auto;
|
|
}
|
|
article {
|
|
padding: 24px 0;
|
|
}
|
|
.center {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
}
|
|
figcaption {
|
|
color: #9CFF00;
|
|
font: 12px/1.5 monospace;
|
|
text-align: center;
|
|
}
|
|
figure {
|
|
margin: auto;
|
|
}
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin: auto;
|
|
}
|
|
.avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
}
|
|
.alert {
|
|
color: var(--fontcolor);
|
|
background: var(--alertbgcolor);
|
|
padding: 24px;
|
|
overflow-x: auto;
|
|
}
|
|
.article-nextprev {
|
|
display: flex;
|
|
flex-flow: row wrap-reverse;
|
|
justify-content: space-between;
|
|
}
|
|
hr {
|
|
margin: 35px 33% 15px;
|
|
border-color: var(--hrcolor);
|
|
border-width: 3px;
|
|
}
|
|
hr.small {
|
|
margin: 35px 44% 25px;
|
|
border: 1px dashed var(--hrcolor);
|
|
}
|
|
blockquote {
|
|
background: var(--blockquotecolor);
|
|
margin: auto;
|
|
padding: 5px 25px;
|
|
}
|
|
ol,
|
|
ul {
|
|
padding-left: 1rem;
|
|
}
|
|
ul > li {
|
|
list-style-type: disclosure-closed;
|
|
}
|
|
.toc {
|
|
border: 1px solid var(--hrcolor);
|
|
margin: 0.5rem;
|
|
padding: 0rem 2rem;
|
|
}
|
|
h1.site-title {
|
|
color: var(--sitetitlecolor);
|
|
text-align: center;
|
|
}
|
|
.bio-card .bio {
|
|
display: flex;
|
|
}
|
|
.bio-card .bio > img {
|
|
margin-right: 2rem;
|
|
align-self: flex-start;
|
|
}
|
|
.bio-card .bio > p {
|
|
align-self: center;
|
|
text-align: left;
|
|
}
|
|
.bio-card .bio-name {
|
|
margin-top: 0;
|
|
}
|
|
@media all and (max-width: 800px) {
|
|
.bio-card .bio {
|
|
justify-content: space-around;
|
|
flex-direction: column;
|
|
}
|
|
.bio-card .bio > img {
|
|
align-self: center;
|
|
margin: auto;
|
|
}
|
|
.bio-card .bio > p {
|
|
align-self: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
@media print {
|
|
a,
|
|
a:visited {
|
|
color: #000;
|
|
text-decoration: none;
|
|
}
|
|
a::after{
|
|
content: " (" attr(href) ") ";
|
|
}
|
|
blockquote,
|
|
code {
|
|
background: #fff;
|
|
margin: 0;
|
|
padding: 0 1.5em;
|
|
border: none;
|
|
}
|
|
nav,
|
|
footer,
|
|
hr,
|
|
.noprint {
|
|
display: none !important;
|
|
}
|
|
}
|