diff --git a/app/assets/stylesheets/markdown.css b/app/assets/stylesheets/markdown.css new file mode 100644 index 000000000..6ddc326c4 --- /dev/null +++ b/app/assets/stylesheets/markdown.css @@ -0,0 +1,30 @@ +.heading__link { + --hover-size: 0; + --opacity: 0.5; + --size: 0.8em; + + background: url(link.svg) no-repeat center bottom 0.2em; + background-size: var(--size); + block-size: 1em; + color: var(--color-link); + display: inline-flex; + font-size: var(--size); + inline-size: var(--size); + padding: 1em 0 0; + opacity: var(--opacity); + overflow: hidden; + transition: opacity 300ms ease; + vertical-align: middle; + + @media (hover: hover) { + --opacity: 0; + + :is(h1, h2, h3, h4, h5, h6):hover & { + --opacity: 0.5; + } + } + + @media (prefers-color-scheme: dark) { + filter: invert(1); + } +}