Apply global styles for visual consistency

This commit centralizes the styling of key UI elements across the
project to ensure:

- Consistent look and feel.
- Enhanced code reusability.
- Simpified maintenance, improving development speed.

It establishes a uniform foundation that can be leveraged across
different parts of the project, even enabling the styling to be shared
across different websites (supporting issue #49).

Key changes:

- Apply the following shared styles globally:
  * Styling of code, blockquotes, superscripts, horizontal rules and
    anchors.
  * Vertical and horizontal spacing.
- Segregate base styling into dedicated SCSS files for clearer structure
  and increased maintainability.
- Remove custom styling from affected components, enabling global style
  reuse for visual uniformity, reduced redundancy, and enhanced
  semantics.

Other supporting changes:

- Rename `globals.scss` to `base.scss` for better clarity.
- Add `.editorconfig` for `.scss` files to ensure consistent whitespace
  usage.
- Remove `2` file from the project root, that was included in the source
  code by mistake.
- Remove unused font-face imports

src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue

@@ -1,53 +1,51 @@
 <template>
-  <div>
+  <section>
     <p class="privacy-rating">
       Privacy: <CircleRating :rating="privacyRating" />
     </p>
     <hr />
-    <div class="sections">
-      <section>
-        {{ description }}
-      </section>
-      <section class="recommendation">
-        <AppIcon icon="lightbulb" class="icon" />
-        <span class="text">{{ recommendation }}</span>
-      </section>
-      <section
-        v-if="includes?.length > 0"
-        class="includes"
-      >
-        <AppIcon icon="square-check" class="icon" />
-        <span class="text">
-          Includes:
-          <ul>
-            <li
-              v-for="inclusionItem in includes"
-              :key="inclusionItem"
-            >
-              {{ inclusionItem }}
-            </li>
-          </ul>
-        </span>
-      </section>
-      <section
-        v-if="considerations?.length > 0"
-        class="considerations"
-      >
-        <AppIcon icon="triangle-exclamation" class="icon" />
-        <span class="text">
-          Considerations:
-          <ul>
-            <li
-              v-for="considerationItem in considerations"
-              :key="considerationItem"
-            >
-              {{ considerationItem }}
-            </li>
-          </ul>
-        </span>
-      </section>
-    </div>
-  </div>
+    <p>
+      {{ description }}
+    </p>
+    <p class="recommendation">
+      <AppIcon icon="lightbulb" class="icon" />
+      <span>{{ recommendation }}</span>
+    </p>
+    <p
+      v-if="includes?.length > 0"
+      class="includes"
+    >
+      <AppIcon icon="square-check" class="icon" />
+      <span>
+        Includes:
+        <ul>
+          <li
+            v-for="inclusionItem in includes"
+            :key="inclusionItem"
+          >
+            {{ inclusionItem }}
+          </li>
+        </ul>
+      </span>
+    </p>
+    <p
+      v-if="considerations?.length > 0"
+      class="considerations"
+    >
+      <AppIcon icon="triangle-exclamation" class="icon" />
+      <span>
+        <strong>Considerations:</strong>
+        <ul>
+          <li
+            v-for="considerationItem in considerations"
+            :key="considerationItem"
+          >
+            {{ considerationItem }}
+          </li>
+        </ul>
+      </span>
+    </p>
+  </section>
 </template>
 
 <script lang="ts">
@@ -88,48 +86,32 @@ export default defineComponent({
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
+@mixin horizontal-stack {
+  display: flex;
+  gap: 0.5em;
+}
+
+@mixin apply-icon-color($color) {
+  .icon {
+    color: $color;
+  }
+}
+
 .privacy-rating {
-  margin: 0.5em;
   text-align: center;
 }
-hr {
-  margin: 1em 0;
-  opacity: 0.6;
-}
-ul {
-  @include reset-ul;
-  padding-left: 0em;
-  margin-top: 0.25em;
-  list-style: disc;
-}
-.sections {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75em;
-  margin-bottom: 0.75em;
-  .includes {
-    display: flex;
-    gap: 0.5em;
-    .icon {
-      color: $color-success;
-    }
-  }
 
-  .considerations {
-    display: flex;
-    gap: 0.5em;
-    font-weight: bold;
-    .icon {
-      color: $color-danger;
-    }
-  }
-  .recommendation {
-    display: flex;
-    align-items: center;
-    gap: 0.5em;
-    .icon {
-      color: $color-caution;
-    }
-  }
+.includes {
+  @include horizontal-stack;
+  @include apply-icon-color($color-success);
+}
+.considerations {
+  @include horizontal-stack;
+  @include apply-icon-color($color-danger);
+}
+.recommendation {
+  @include horizontal-stack;
+  @include apply-icon-color($color-caution);
+  align-items: center;
 }
 </style>