Add semantic ID's and classes to improve theming/userscript experience

[Zetaphor]

There is currently a major lack of semantic ID's and classes in the UI markup. This makes everything from detecting if the site is running Lemmy (for userscript) to theming more difficult than necessary.

This PR attempts to remedy that by adding semantics to the markup in a way that will simplify CSS queries and make site theming simpler. I'm aiming to take a light touch approach while still being thorough.

In the end I intend to rewrite the base CSS themes included with Lemmy to better utilize these markup enhancements. The current theme files are a bit messy and include lots of extraneous styling.

Changes made

Changed page elements to use semantic HTML tags

• The footer uses <footer>
• Posts and comments use article
• Sidebars are now using aside with contained section elements
• Sidebar sections have distinguishing ID's

Added ID's and classes to improve CSS specificity for themes and userscripts

• #app gained the lemmy-site class
• ID's added to nav and footer
• Semantic classes added to nav sections and icons
• MarkdownTextArea component id and formId renamed from comment-textarea-{randomString} to markdown-textarea-{randomString} as the component is used for more than comments
• CommentForm accepts a class string to distinguish between a top level post reply and a comment thread reply
• Additional classes added to post listings to enable simpler CSS targeting (container, score, media)
• Added class to the more button on comment nodes

[Zetaphor]

The idea of using semantic elements (nav, footer) was brought up in a Matrix thread.

This would be an improvement for theming, but would also likely be a breaking change for any existing custom CSS and possibly even userscripts that modify layout.

I'm not opposed to this, especially this early in the lifecycle of Lemmy adoption, but I'd like to solicit feedback for the negative case (the positive is self evident).

[L3v3L]

The idea of using semantic elements (nav, footer) was brought up in a Matrix thread.

This would be an improvement for theming, but would also likely be a breaking change for any existing custom CSS and possibly even userscripts that modify layout.

I'm not opposed to this, especially this early in the lifecycle of Lemmy adoption, but I'd like to solicit feedback for the negative case (the positive is self evident).

I guess the same could be said about any structural change of the frontend, and I doubt we consider this problem then.
I think most userscripters will welcome this change, as it will make their scripts more descriptive and less prone to breaking in the future. I'm not sure but this might even help people that use assistive software.

[Zetaphor]

So far nothing makes any structural changes to the frontend, I was trying to avoid that where possible by starting with the light touch of adding semantic sugar.

I do think the site could benefit from some breaking structural changes, but I think that would be outside of the scope of this task. That said I think the semantic tags definitely fall within the scope of this theming/userscript goal.

Unless someone has a compelling argument to the contrary I'm going to move forward with the change

[Zetaphor]

I think this should be good enough to put up for review. It's now at a point where I feel I can start rewriting the included themes to utilize these new attributes.

[Zetaphor]

I also added a class to the more button on a comment node as per a suggestion from another user

[Zetaphor]

Thanks everyone! <3