diff --git a/static/css/doc.css b/static/css/doc.css index f15b5e4..c6bdcbf 100644 --- a/static/css/doc.css +++ b/static/css/doc.css @@ -87,6 +87,10 @@ main.doc { } } + & p:has(img.pic) { + text-align: center; + } + & header { & h1 { padding-bottom: 0.25lh; diff --git a/static/css/main.css b/static/css/main.css index 9064dff..a373272 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -88,6 +88,22 @@ body { outline-offset: 0.2rem; } +::selection { + background-color: color-mix( + in srgb, + var(--background-color), + var(--accent-pink) 75% + ); + color: var(--text-color); +} + +@media (prefers-color-scheme: dark) { + ::selection { + background-color: var(--accent-pink); + color: var(--background-color); + } +} + /* Set up typography */ body, @@ -260,7 +276,7 @@ th-literate-program { padding: 0.8rem 1.2rem; margin: 1.2rem 0; background-color: var(--shaded-background); - border-radius: 0.5em; + border-radius: 0.4em; transition: background-color var(--transition-duration); } @@ -313,6 +329,10 @@ img { border-radius: 0; } + &[src*="+illust"] { + border-radius: 0; + } + /* TODO: These could be autogenerated! */ &[src*="+width72"] { @@ -1100,7 +1120,7 @@ th-literate-program[data-mode="output"] { /* Syntax highlighting */ :root { - --syntax-comment: #6c657b; + --syntax-comment: #78579f; --syntax-identifier: var(--text-color); --syntax-keyword1: #b03b0d; --syntax-keyword2: #02739d; @@ -1127,7 +1147,7 @@ th-literate-program[data-mode="output"] { .th-syntax-highlighting span { &.comment { - --recursive-slnt: -16; + --recursive-slnt: -8; color: var(--syntax-comment); }