improve usability, accessibility and user experience

[koebel]

A few issues regarding usability, accessibility and user experience of our blog that I noticed:

• main title of the blog doesn't get rendered as H1 but as<div class="title">: this is not good for accessibility, there should always be a H1 tag
• there is hardly no difference in how H2 and H3 titles are displayed (font size 2.6 rem vs. 2.2 rem), looks almost the same
• table of content: no difference between different title levels, structure would be clearer if H3 is a little bit indented or smaller than H2 or uses a different bullet triangle..., see also https://github.com/JankariTech/blog/issues/88
• social share buttons don't seem to be working, see also https://github.com/JankariTech/blog/issues/69
• section "The Blog Project": maybe this is some placeholder text from a template? doesn't say anything meaningful, to me as a reader this is just confusing.
• Publishing date of blog post: it seems like the time of publishing doesn't properly displayed. It's always 12AM for all blog posts. If we think it is relevant to display the time of publishing, then make sure that the correct time is displayed, else just print the date without time. --> see also https://github.com/JankariTech/blog/issues/71

[koebel]

In the table of content it seems that currently the arrow for long heading is smaller that for shorter items. To me, this is very confusing. A smaller arrow icon is usually associated with a sub point...

In addition, also alignment of the table of content seems to be messed up...

Update: it seems like this is to some degree related to https://github.com/JankariTech/blog/issues/88