Refactor Saas naming, structure and modules

- 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`.

src/presentation/components/App.vue

@@ -33,27 +33,7 @@ export default class App extends Vue {
 </script>
 
 <style lang="scss">
-@import "@/presentation/styles/colors.scss";
-@import "@/presentation/styles/fonts.scss";
-@import "@/presentation/styles/media.scss";
-
-* {
-  box-sizing: border-box;
-}
-
-a {
-    color:inherit;
-    text-decoration: underline;
-    cursor: pointer;
-    &:hover {
-        color: $color-primary;
-    }
-}
-
-body {
-  background: $color-background;
-  font-family: $main-font;
-}
+@use "@/presentation/assets/styles/main" as *;
 
 #app {
   margin-right: auto;
@@ -76,6 +56,4 @@ body {
   }
 }
 
-@import "@/presentation/styles/tooltip.scss";
-@import "@/presentation/styles/tree.scss";
 </style>