/* design inspired by https://github.com/secretGeek/html_wysiwyg/ */ * { display:block; } a,code,em,strong { display:inline } *{ font-family:Monospace; margin:1.5em 0; padding:0; text-decoration:none } /* pretty typesetting */ * { hanging-punctuation: first allow-end last; } /* tags with attributes. */ a[href]:focus::before { content: "" } link[rel]::before { content: "" } :root { --body-bg: #f2f2f2; --body-color: #333333; --tag-color: #898989; } /* Dark mode */ @media (prefers-color-scheme: dark) { :root { --body-bg: #262626; --body-color: #d8d8d8; --tag-color: #8c8c8c; } } /* brutify */ *::before,*::after { color:var(--tag-color); font-weight:100; font-size:0.8em; } head { font-size:1.0em; } footer { font-size:1.0em; } html { max-width:80ch; padding:2ch; margin:auto; background: var(--body-bg); color:var(--body-color); font-size:1.2em; } /* remove padding for mobile */ @media screen and (max-width: 84ch) { html { max-width: 96%; padding: 2%; } } /* special escaping for close style */ style::before { content:'