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

@@ -1,24 +1,27 @@
 <template>
   <div v-if="isOpen" class="dev-toolkit-container">
     <div class="dev-toolkit">
-      <div class="toolkit-header">
-        <div class="title">
+      <h3 class="toolkit-header">
+        <span class="title">
           Tools
-        </div>
+        </span>
         <FlatButton icon="xmark" class="close-button" @click="close" />
-      </div>
+      </h3>
       <hr />
-      <div class="action-buttons">
-        <button
+      <ul class="action-buttons">
+        <li
           v-for="action in devActions"
           :key="action.name"
-          type="button"
-          class="action-button"
-          @click="action.handler"
         >
-          {{ action.name }}
-        </button>
-      </div>
+          <button
+            type="button"
+            class="action-button"
+            @click="action.handler"
+          >
+            {{ action.name }}
+          </button>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
@@ -91,10 +94,6 @@ interface DevAction {
   display:flex;
   flex-direction: column;
 
-  hr {
-    width: 100%;
-  }
-
   .toolkit-header {
     display:flex;
     flex-direction: row;
@@ -108,7 +107,6 @@ interface DevAction {
   }
 
   .title {
-    font-weight: bold;
     text-align: center;
   }
 
@@ -116,8 +114,11 @@ interface DevAction {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    @include reset-ul;
+
+    .action-button {
+      @include reset-button;
 
-    button {
       display: block;
       padding: 5px 10px;
       background-color: $color-primary;