UI improvements

[stereobooster]

Note: this is all highly subjective. I'd rather want to discuss those idea. If you think they make sense I can make separate issues/pull requests.

Collapsible header

Links in the header gets corrupted on small screens:

One of possible solution is to use something similar to Bulma

Kbd can look more like keyboard button

For example in github Enter. And in tailwind

Remove quotes from blockquote

Because when I add citation like this

quote

-- author

It doesn't make sense

Support line numbers in code-blocks

In order to do this need to adjust styles/scripts a bit:

• line numbers should not be selectable (user-select: none;)
• line numbers should not be in code if user uses copy button
• ideally line numbers should have fixed position (if there is horizontal scroll)

Scroll observer for ToC

So when user scrolls they know at which section they are

[jpanther]

I generally like these suggestions, with the following comments...

• Collapsible header would be a useful addition, perhaps with some way of prioritising what gets collapsed. The current header partials could use a bit of an overhaul in terms of reducing code repetition and making them more flexible.
• The theme already has specific styles for kbd tags so I don't think this is an issue, or do you not like the current styling?
• Removing quotes from block quotes makes sense also, although I feel like that's more an upstream issue with Tailwind typography
• Scroll observer for ToC is something that's been on my todo list for a long time so I'd love a simple implementation for this. Ideally I don't want to include a bunch of third party code. The ToC system in Hugo is extremely limited and so it's not easy to work with and this has been my hurdle to making a better styled template.

[stereobooster]

For TOC - maybe not easiest to implement, but pretty cool https://kld.dev/toc-animation/. I implemented it for Astro.

[stereobooster]

Removing quotes from block quotes makes sense also, although I feel like that's more an upstream issue with Tailwind typography

module.exports = {
  theme: {
    extend: {
      typography: {
        quoteless: {
          css: {
            'blockquote p:first-of-type::before': { content: 'none'},
            'blockquote p:first-of-type::after': { content: 'none' },
          },
        },
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/typography')],
}

I can do a PR for that (if you want)