Jan Raasch 2025-01-10 17:52:38 +01:00
parent 6af9655c0b
commit 72c42319e0

View file

@ -1,56 +1,75 @@
<style> <style>
:root {
--width: 800px;
--font-main: Verdana, sans-serif;
--font-secondary: Verdana, sans-serif;
--font-scale: 1em;
--background-color: #fff;
--heading-color: #222;
--text-color: #444;
--link-color: #3273dc;
--visited-color: #8b6fcb;
--code-background-color: #f2f2f2;
--code-color: #222;
--blockquote-color: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #333;
--heading-color: #eee;
--text-color: #ddd;
--link-color: #8cc2dd;
--visited-color: #8b6fcb;
--code-background-color: #777;
--code-color: #ddd;
--blockquote-color: #ccc;
}
}
body { body {
font-family: Verdana, sans-serif; font-family: var(--font-secondary);
font-size: var(--font-scale);
margin: auto; margin: auto;
padding: 20px; padding: 20px;
max-width: 720px; max-width: var(--width);
text-align: left; text-align: left;
background-color: #fff; background-color: var(--background-color);
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
line-height: 1.5; line-height: 1.5;
color: #444; color: var(--text-color);
} }
h1, h1, h2, h3, h4, h5, h6 {
h2, font-family: var(--font-main);
h3, color: var(--heading-color);
h4,
h5,
h6,
strong,
b {
color: #222;
} }
a { a {
color: #3273dc; color: var(--link-color);
/*color: #ff5e6c;*/ cursor: pointer;
}
.title {
text-decoration: none; text-decoration: none;
border: 0;
} }
.title span { a:hover {
font-weight: 400; text-decoration: underline;
} }
nav a { nav a {
margin-right: 10px; margin-right: 8px;
} }
textarea { strong, b {
width: 100%; color: var(--heading-color);
font-size: 16px;
} }
input { button {
font-size: 16px; margin: 0;
cursor: pointer;
} }
content { main {
line-height: 1.6; line-height: 1.6;
} }
@ -58,57 +77,58 @@
width: 100%; width: 100%;
} }
hr {
border: 0;
border-top: 1px dashed;
}
img { img {
max-width: 100%; max-width: 100%;
} }
code { code {
padding: 2px 5px; font-family: monospace;
background-color: #f2f2f2; padding: 2px;
} background-color: var(--code-background-color);
color: var(--code-color);
pre code { border-radius: 3px;
color: #222;
display: block;
padding: 20px;
white-space: pre-wrap;
font-size: 14px;
overflow-x: auto;
}
div.highlight pre {
background-color: initial;
color: initial;
}
div.highlight code {
background-color: unset;
color: unset;
} }
blockquote { blockquote {
border-left: 1px solid #999; border-left: 1px solid #999;
color: #222; color: var(--code-color);
padding-left: 20px; padding-left: 20px;
font-style: italic; font-style: italic;
} }
footer { footer {
padding: 25px; padding: 25px 0;
text-align: center; text-align: center;
} }
.helptext { .title:hover {
color: #777; text-decoration: none;
font-size: small;
} }
.errorlist { .title h1 {
color: #eba613; font-size: 1.5em;
font-size: small;
} }
/* blog posts */ .inline {
width: auto !important;
}
.highlight, .code {
padding: 1px 15px;
background-color: var(--code-background-color);
color: var(--code-color);
border-radius: 3px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}
/* blog post list */
ul.blog-posts { ul.blog-posts {
list-style-type: none; list-style-type: none;
padding: unset; padding: unset;
@ -123,51 +143,6 @@
} }
ul.blog-posts li a:visited { ul.blog-posts li a:visited {
color: #8b6fcb; color: var(--visited-color);
} }
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #ddd;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
color: #eee;
}
a {
color: #8cc2dd;
}
code {
background-color: #777;
}
pre code {
color: #ddd;
}
blockquote {
color: #ccc;
}
textarea,
input {
background-color: #252525;
color: #ddd;
}
.helptext {
color: #aaa;
}
}
</style> </style>