The pfy.ch stylesheet
For the small tools I make that should look like the site.
This is the CSS pfy.ch uses, pulled out so I can use it on other
things. It styles plain HTML tags, so you don't need any classes. The
body is the glass panel over the background, and the
header, footer and anything directly inside
main turn into cards.
Links to other pages are underlined, and
links to other sites also get a ↗︎.
Put text in a sparkle span to give it the
logo gradient.
Text
Inline elements
Footnotes1, H2O,
x2, ⌘ K, highlighted text,
crossed out text and small text.
Blockquotes get a line down the left side and nothing else.
const example = 'long lines in a code block scroll sideways instead of wrapping';- A list item
-
Another one, with
inline codeand an HTML abbreviation
- Footnotes use the same markup marked outputs, so posts work as they are. ↩
