doserver.top/templates/_style.html

306 lines
7.3 KiB
HTML
Raw Normal View History

2024-08-24 13:20:53 +01:00
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico" type="image/ico">
<title>{{$.Title}}</title>
<style>
/* Light Theme */
:root {
--backdrop-color: #C9C99A;
--background-color: #F6F6F6;
--table-color: #DDC;
--table-subcolor: #E6E6E0;
--text-color: #220;
--text-subcolor: #828550;
--background-inlinecode: #DDC;
--background-codeblock: #1E1E00;
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
:root {
--backdrop-color: #222;
--background-color: #3a3a2f;
--table-color: #4f4f3e;
--table-subcolor: #474738;
--text-color: #EED;
--text-subcolor: #998;
--background-inlinecode: #2a2a1e;
--background-codeblock: #21211b;
}
}
/* Dark Theme - High Contrast */
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
:root {
--backdrop-color: #000;
--background-color: #000;
--table-color: #252525;
--table-subcolor: #252525;
--text-color: #fff;
--text-subcolor: #BBB;
--background-inlinecode: #191919;
--background-codeblock: #111;
}
}
/* Light Theme - High Contrast */
@media (prefers-contrast: more) and (not (prefers-color-scheme: dark)) {
:root {
--backdrop-color: #fff;
--background-color: #fff;
--table-color: #E9E9E9;
--table-subcolor: #EEE;
--text-color: #000;
--text-subcolor: #555;
--background-inlinecode: #EEE;
--background-codeblock: #000;
}
}
body {
font: 17px/1.5 system-ui;
background: var(--backdrop-color);
color: var(--text-color);
padding: 0;
}
#page {
background: var(--background-color);
padding-bottom: 3.5em;
padding-top: 1em;
padding-right: 8%;
padding-left: 8%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
a {
/* Links */
color: var(--text-color);
font-weight: bold;
text-underline-offset: 5px;
}
/* Headers */
h1,
h2,
h3,
h4,
h5 {
line-height: 1.1;
margin-top: 2em;
padding-bottom: 4px;
}
h1:before {
content: "# ";
color: var(--text-subcolor);
}
h2:before {
content: "## ";
color: var(--text-subcolor);
}
h3:before {
content: "### ";
color: var(--text-subcolor);
}
h4:before {
content: "#### ";
color: var(--text-subcolor);
}
.publish-date {
margin: -1.5em 0 0 0;
color: var(--text-subcolor);
}
hr {
/* Horizontal Rule */
height: 1px;
border: 0;
background: #BBB;
margin: 2em 0;
}
/* Lists */
li li,
li ul,
ul li,
ul ul {
margin: 0.1em 0 0.1em 0;
2024-08-24 13:20:53 +01:00
}
ul {
padding: 0 0 0 2em;
list-style-type: '- ';
margin: -0.8em 0 1.2em 0;
2024-08-24 13:20:53 +01:00
}
li {
margin: -0.8em 0 1.2em 0;
2024-08-24 13:20:53 +01:00
}
/* 1-a-i-A-I-1 */
ol {list-style-type: decimal;}
ol ol { list-style-type: lower-alpha;}
ol ol ol { list-style-type: lower-roman;}
ol ol ol ol { list-style-type: upper-alpha;}
ol ol ol ol ol { list-style-type: upper-roman;}
ol ol ol ol ol ol { list-style-type: decimal;}
2024-08-24 13:20:53 +01:00
small {
font-size: 14px;
}
header {
margin-top: 3em;
margin-bottom: 2em;
text-align: center;
}
footer {
margin-top: 4em;
text-align: center;
color: var(--text-subcolor);
}
footer p {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
footer>ul {
margin: 2em 0;
}
header ul,
footer ul {
list-style: none;
padding: 0;
}
header li,
footer li {
display: inline-block;
margin: 0 0.4em 1em;
}
blockquote {
border-left: 8px solid var(--text-subcolor);
2024-08-24 13:42:48 +01:00
padding: 0 0 0 1em;
2024-08-24 13:20:53 +01:00
font-style: italic;
margin-left: calc(-1em - 8px);
2024-08-24 13:42:48 +01:00
margin-right: 0;
2024-08-24 13:20:53 +01:00
}
img {
max-width: 100%;
height: auto;
}
code {
/* Inline code */
padding: 0 4px;
display: inline-block;
background: var(--background-inlinecode);
}
/* Codeblocks */
pre {
font-size: 14px;
background: var(--background-codeblock);
color: white;
display: block;
overflow-x: auto;
padding: 2em;
margin-left: calc(-1em - 8px);
margin-right: calc(-1em - 8px);
}
pre code {
font-size: inherit;
background: inherit;
padding: 0;
}
/* Table Stuff */
table {
width: 85%;
margin-left: auto;
margin-right: auto;
table-layout: auto;
border-collapse: collapse;
line-break: strict;
border: 5px solid var(--table-color);
}
table td {
border-left: 5px solid var(--table-color);
border-right: 5px solid var(--table-color);
}
thead th,
thead td {
font-weight: bold;
}
tbody th,
tbody tr {
font-weight: normal;
}
th,
td {
border: 0;
text-align: left;
padding: 8px;
}
thead {
background: var(--table-color);
color: var(--text-color);
}
tr:nth-child(even) {
background: var(--table-subcolor);
}
sup { /* Superscript */
line-height: 1;
font-size: 80%;
unicode-bidi: isolate;
}
/* Superscript Link References */
sup a {
font-weight: normal;
text-decoration: none;
}
sup a:before {
content: "[";
}
sup a:after {
content: "]";
}
/* Mobile Modifications */
@media(max-width: 300px) {
header,
footer {
text-align: left;
margin-left: 0.5em;
}
header li,
footer li {
display: block;
margin: 0 0 1em 0;
}
}
</style>
<!-- </head> -->