This commit improves mobile support. `:hover` CSS selector is not mobile
friendly because there is typically no mouse support on mobile. This
commit make hover behavior to become active during touch on mobile.
`:hover` selector is emulated on mobile devices. But this emulated
behavior is not desired. When emulated, the CSS style gets attached when
starting touching but does not get removed after stopping touching. This
sticky behavior is undesired.
This commit solve this issue by using Saas mixing that uses `:active`
selector instead of `:hover` when `:hover` is not really supported but
emulated.
- Add more documentation.
- Use `main.scss` instead of importing components individually. This
improves productivity without compilation errors due to missing
imports and allows for easier future file/folder changes and
refactorings inside `./styles`.
- Use partials with underscored naming. Because it documents that the
files should not be individually imported.
- Introduce `third-party-extensions` folder to group styles that
overwrites third party components.
- Refactor variable names from generic to specific.
- Use Sass modules (`@use` and `@forward`) over depreciated `@import`
syntax.
- Separate font assets from Sass files (`styles/`). Create `assets/`
folder that will contain both.
- Create `_globals.css` for global styling of common element instead of
using `App.vue`.
