diff --git a/static/css/blog/post.css b/static/css/blog/post.css index ba6b770..15576a5 100644 --- a/static/css/blog/post.css +++ b/static/css/blog/post.css @@ -1,14 +1,16 @@ @media (prefers-color-scheme: light) { :root { --selection: rgba(92, 54, 131, 0.7); - --visited: #005cc5; + --bg: #ffffff; + --font-color: #18181b; } } @media (prefers-color-scheme: dark) { :root { --selection: rgba(124, 75, 173, 0.5); - --visited: #8be9fd; + --bg: #171e26; + --font-color: #a1a1aa; } } @@ -21,9 +23,88 @@ html { "Segoe UI Symbol"; font-size: var(--font-size); scroll-behavior: smooth; + background-color: var(--bg); } ::selection { color: rgb(255, 255, 255); background: var(--selection); } + +/* Anchors */ +h1:hover > a::before, +h2:hover > a::before, +h3:hover > a::before, +h4:hover > a::before, +h5:hover > a::before, +h6:hover > a::before { + visibility: visible; + text-decoration: none; +} + +h1 > a::before, +h2 > a::before, +h3 > a::before, +h4 > a::before, +h5 > a::before, +h6 > a::before { + content: "#"; + visibility: hidden; + padding-right: 0.1em; +} + +h1 > a, +h2 > a, +h3 > a, +h4 > a, +h5 > a, +h6 > a { + text-decoration: none; +} + +* { + color: var(--font-color); +} + +p { + color: var(--font-color); + font-size: var(--font-size); +} + +body { + margin: 0 auto; + max-width: 720px; +} + +footer { + text-align: center; +} + +.hljs { + margin-inline: 0.4em; +} + +/* for block of numbers */ +.hljs-ln-numbers { + text-align: right; +} + +.hljs-ln + > tbody + > tr:last-child:has(td:last-child > span:-moz-only-whitespace) { + visibility: collapse; +} + +/* Temporary fix for layout.css.has-selector.enabled available only on + * Firefox under certain circumstances */ +.hljs-ln > tbody > tr:last-child { + visibility: collapse; +} + +/* code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, + monospace; +} */