Reorganize css styles and fix tutorial body

[MatteoRobbiati]

In this PR:

• I decided to reorganize the global.css file because being very large it had become very messy. I divided the styles according to the target audience, e.g. containers, buttons, text, etc.
• I changed the post-body (tutorial container) css in order to obtain tutorial pages which automatically fit the screen dimension.

[alecandido]

Just to be extremely annoying (sorry, I'll stop at some point): this PR has two distinct goals, so it could have been done in two shorter PRs :)

[alecandido]

Concerning your global.css rework:

• try to drop as much content as possible
• move as much as possible to layouts: https://nextjs.org/docs/basic-features/layouts
  • shared style should be in upper level layouts
  • more specific style is going to fit in individual pages
• move component specific style to components themselves (you are already using styled-components, so try to use consistently)

[alecandido]

Sorry, forget what I said about styled-components: CSS-in-JS might be useful, but it is definitely a non-trivial choice and incredibly evolving. I'll open a dedicated issue to discuss it.

For the time being, my suggestion is to drop styled-components, for consistency and simplicity. We just follow Occam's razor, and we use tool that we already have:

• global styles (possibly defined and imported in layouts)
  • I'd put the CSS directly in pages/, next to the layout that is using it
• css-modules, that is supported out of the box by Next.js
• if needed SASS (or better SCSS), but not at the moment https://nextjs.org/docs/basic-features/built-in-css-support

The other tool I would use is PostCSS, that is extremely useful and somewhat orthogonal. But I'll setup myself, and open a dedicated issue for that as well.

[alecandido]

Do we still need this? Or is it outdated? @MatteoRobbiati

[MatteoRobbiati]

Do we still need this? Or is it outdated? @MatteoRobbiati

The organization of the css I did is useful (I mean now, because the global.css is in a very bad shape). Of course your suggestion must be followed (to reduce the css dimension and to avoid the styled divisions), but I think we can open a new PR linked to the issue we raised.

The second task I did is already implemented into the master, I think there will be no conflicts.

[alecandido]

[alecandido]

I'm not suggesting to implement anything more, the options are just two: either merging as is, or closing (without merge).

[MatteoRobbiati]

I'm not suggesting to implement anything more, the options are just two: either merging as is, or closing (without merge).

I think this is very updated. I tried to solve the conflicts but seems to be worse than I thought, so I suggest to close without merge.