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/TheFooter/TheFooter.vue

@@ -81,9 +81,7 @@ export default class TheFooter extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
-@import "@/presentation/styles/fonts.scss";
-@import "@/presentation/styles/media.scss";
+@use "@/presentation/assets/styles/main" as *;
 
 .icon {
   margin-right: 0.5em;
@@ -93,13 +91,13 @@ export default class TheFooter extends Vue {
 .footer {
   display: flex;
   justify-content: space-between;
-  @media screen and (max-width: $big-screen-width) {  
+  @media screen and (max-width: $media-screen-big-width) {  
     flex-direction: column;
     align-items: center;
   }
   &__section {
     display: flex;
-    @media screen and (max-width: $big-screen-width) {  
+    @media screen and (max-width: $media-screen-big-width) {  
       justify-content: space-around;
       width:100%;  
       &:not(:first-child) {
@@ -108,13 +106,13 @@ export default class TheFooter extends Vue {
     }
     flex-wrap: wrap;
     font-size: 1rem;
-    font-family: $normal-font;
+    font-family: $font-normal;
     &__item:not(:first-child) {
       &::before {
         content: "|";
         padding: 0 5px;
       }
-      @media screen and (max-width: $big-screen-width) {  
+      @media screen and (max-width: $media-screen-big-width) {  
         margin-top: 3px;
         &::before {
           content: "";