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/Code/CodeButtons/Code.vue

@@ -25,13 +25,12 @@ export default class Code extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
-@import "@/presentation/styles/fonts.scss";
+@use "@/presentation/assets/styles/main" as *;
 
 .code-wrapper {
     white-space: nowrap;
     justify-content: space-between;
-    font-family: $normal-font;
+    font-family: $font-normal;
     background-color: $color-primary-darker;
     color: $color-on-primary;
     padding-left: 0.3rem;

src/presentation/components/Code/CodeButtons/IconButton.vue

@@ -24,8 +24,7 @@ export default class IconButton extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
-@import "@/presentation/styles/fonts.scss";
+@use "@/presentation/assets/styles/main" as *;
 
 .button {
     display: flex;
@@ -57,7 +56,7 @@ export default class IconButton extends Vue {
     }
     &__text {
         display: none;
-        font-family: $artistic-font;
+        font-family: $font-artistic;
         font-size: 1.5em;
         color: $color-primary;
         font-weight: 500;

src/presentation/components/Code/CodeButtons/MacOsInstructions.vue

@@ -104,8 +104,7 @@ export default class MacOsInstructions extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
-@import "@/presentation/styles/fonts.scss";
+@use "@/presentation/assets/styles/main" as *;
 
 li {
   margin: 10px 0;