new css, more purple

This commit is contained in:
tastytea 2023-10-14 18:01:19 +02:00
parent e1c3ce1efa
commit 1dddb610f3
Signed by: tastytea
SSH Key Fingerprint: SHA256:FBkvrOlhq5use1XEttyUGT4bUTDVA1ar9SgIc9P03cM
1 changed files with 105 additions and 157 deletions

View File

@ -1,44 +1,27 @@
@import url("monokai.css") screen and (prefers-color-scheme: dark);
@import url("pastie.css") (prefers-color-scheme: light), print;
:root
{
--bg: #1d1f21;
--bg-code: #101;
--bg-code-trans: #1018;
--bg-hover: #282a2e;
--bg-dark: #1b1b1b;
--fg: LightGray;
--fg-dim: Gray;
--link: SkyBlue;
--link-hover: MediumAquamarine;
--link-visited: Plum;
:root {
--bg: #308;
--fg: #e8e;
--accent: #f4c;
--semitrans: #0004;
--link: #4cf;
--fg-note: LimeGreen;
--fg-tip: CornflowerBlue;
--fg-important: Gold;
--fg-caution: Orange;
--fg-warning: OrangeRed;
--font-serif: "Source Serif Pro", serif;
--font-sans-serif: "Source Sans Pro", sans-serif;
--font-mono: "Source Code Pro", monospace;
}
@media (prefers-color-scheme: light), print
{
:root
{
--bg: #eee;
--bg-code: #fff; /* From pastie.css */
--bg-code-trans: #fff8;
--bg-hover: #f8f8f8;
--bg-dark: #ddd;
--fg: #1d1f21;
--fg-dim: Gray;
--link: MediumBlue;
--link-hover: ForestGreen;
--link-visited: MediumVioletRed;
@media (prefers-color-scheme: light), print {
:root {
--bg: #e8e;
--fg: #308;
--accent: #704;
--semitrans: #fff4;
--link: #04f;
--fg-note: ForestGreen;
--fg-tip: DodgerBlue;
@ -48,245 +31,220 @@
}
}
@media print
{
:root
{
@media print {
:root {
--bg: white;
--fg: black;
}
}
html
{
html {
background-color: var(--bg);
color: var(--fg);
font-family: var(--font-serif);
font-family: serif;
text-align: justify;
scroll-padding-top: 0.5em;
scrollbar-color: var(--accent) var(--semitrans);
}
/* Exception for /posts/, /tags/ and headlines */
.list, .terms, h1, h2, h3, h4, h5, h6
{
.list, .terms, h1, h2, h3, h4, h5, h6 {
text-align: left;
}
body
{
body {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
p
{
p {
text-indent: 0.5em;
margin: 0.5em auto;
}
.content > div:first-of-type > p:first-of-type,
.sectionbody > div:first-of-type > p:first-of-type
{
.sectionbody > div:first-of-type > p:first-of-type {
text-indent: 0;
}
/* No indent for <b> tags and whatnot. */
p *
{
p * {
text-indent: 0;
}
li p, dd p
{
li p, dd p {
text-indent: 0;
}
a
{
a {
color: var(--link);
}
a:visited
{
color: var(--link-visited);
a:visited {
color: color-mix(in srgb, var(--link) 50%, var(--fg));
}
a:hover, a:hover:visited
{
color: var(--link-hover);
a:hover, a:hover:visited {
color: var(--accent);
}
.header, .nav ul, .pagination ul, h1, h2, h3, h4, h5, h6
{
font-family: var(--font-sans-serif);
a:active {
background-color: var(--semitrans);
border-radius: 0.2em;
}
.header .title, .nav a
{
.header, .nav ul, .pagination ul, h1, h2, h3, h4, h5, h6 {
font-family: sans-serif;
}
h1, h2, h3, h4, h5, h6 {
text-shadow: -1px -2px 4px var(--accent);
}
.header .title, .nav a {
padding: 0.2em 0.4em;
text-decoration: none;
color: var(--fg);
}
.header .title
{
.header .title {
margin-left: -0.4em;
font-family: var(--font-serif);
font-family: serif;
font-variant: small-caps;
text-shadow: 0 0 8px var(--accent);
}
.header a:hover, .nav a:hover
{
background-color: var(--bg-hover);
.header a:hover, .nav a:hover {
background-color: var(--semitrans);
}
.header .description::before
{
.nav a {
text-shadow: 1px 2px 4px var(--accent);
}
.header .description::before {
content: "";
}
.description
{
.description {
font-size: 115%;
float: right;
color: var(--fg-dim);
filter: hue-rotate(-30deg);
}
hr
{
hr {
color: var(--fg);
}
.nav-top, .nav-bottom
{
.nav-top, .nav-bottom {
text-align: center;
}
/* Needed to position the language menu right. */
.nav ul
{
.nav ul {
width: 100%;
}
.language-menu
{
.language-menu {
float: right;
bottom: 0;
margin-right: 0 !important;
}
.language-menu a
{
.language-menu a {
font-size: 100%;
}
code, kbd, pre, samp
{
font-family: var(--font-mono);
code, kbd, pre, samp {
font-family: monospace;
}
p > code, td > code
{
background-color: var(--bg-code-trans);
p > code, td > code {
background-color: var(--semitrans);
text-shadow: 0 0 2px var(--accent);
padding: 0.1em;
}
pre
{
pre {
padding: 0.2em;
}
div.admonitionblock td.icon
{
border-color: var(--bg-hover);
div.admonitionblock td.icon {
border-color: var(--semitrans);
}
div.admonitionblock table
{
background-color: var(--bg-dark);
/* box-shadow: 0 0 0.1em 0 var(--link-hover); */
div.admonitionblock table {
background-color: color-mix(in srgb, var(--bg) 70%, var(--semitrans));
}
div.note td.icon
{
div.note td.icon {
color: var(--fg-note);
}
div.note table
{
div.note table {
box-shadow: 0 0 0.1em 0 var(--fg-note);
}
div.tip td.icon
{
div.tip td.icon {
color: var(--fg-tip);
}
div.tip table
{
div.tip table {
box-shadow: 0 0 0.1em 0 var(--fg-tip);
}
div.important td.icon
{
div.important td.icon {
color: var(--fg-important);
}
div.important table
{
div.important table {
box-shadow: 0 0 0.1em 0 var(--fg-important);
}
div.caution td.icon
{
div.caution td.icon {
color: var(--fg-caution);
}
div.caution table
{
div.caution table {
box-shadow: 0 0 0.1em 0 var(--fg-caution);
}
div.warning td.icon
{
div.warning td.icon {
color: var(--fg-warning);
}
div.warning table
{
div.warning table {
box-shadow: 0 0 0.1em 0 var(--fg-warning);
}
/* Overwrite background color for highlighted sections. */
.highlight
{
background-color: var(--bg-code) !important;
.highlight {
background-color: var(--semitrans) !important;
}
div, table, code, img
{
div, table, code, img {
border-radius: 0.2em;
}
kbd
{
kbd {
display: inline-block;
padding: 0.05em;
background-color: var(--fg);
color: var(--bg);
border: 0.15em inset var(--fg-dim);
border: 0.15em inset color-mix(in srgb, var(--fg) 50%, var(--semitrans));
border-radius: 0.2em;
}
.button
{
.button {
display: inline-block;
padding: 0 0.1em;
border: 0.15em outset var(--bg-dark);
border: 0.15em outset color-mix(in srgb, var(--bg) 50%, var(--semitrans));
border-radius: 0.2em;
}
.toc
{
.toc {
margin-top: 0.2em;
margin-bottom: 0.2em;
padding: 0 0.2em;
@ -295,58 +253,48 @@ kbd
border-radius: 0.1em;
}
.toc h2, .toc ul, .toc ol
{
.toc h2, .toc ul, .toc ol {
margin: 0 0;
}
.toc h2
{
.toc h2 {
font-size: 120%;
}
@media screen and (min-width: 80ch)
{
.toc
{
@media screen and (min-width: 80ch) {
.toc {
float: right;
margin-left: 1em;
}
}
.pagination
{
.pagination {
margin-top: 0.5em;
font-family: var(--font-sans-serif);
background-color: var(--bg-dark);
font-family: sans-serif;
background-color: color-mix(in srgb, var(--bg) 70%, var(--semitrans));
padding-left: 0.2em;
border-top: 0.1em dotted var(--bg-hover);
border-top: 0.1em dotted var(--accent);
}
.changelog
{
.changelog {
text-align: right;
}
.quoteblock
{
border-color: var(--bg-hover);
.quoteblock {
border-color: var(--semitrans);
}
#footnotes
{
#footnotes {
text-align: left;
}
:target
{
outline: 0.01em dotted var(--fg-dim);
:target {
outline: 0.01em dotted var(--accent);
}
/* Includes title above code examples */
.listingblock
{
background-color: var(--bg-dark);
.listingblock {
background-color: var(--semitrans);
}
.listingblock .title {