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/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue

@@ -1,16 +1,16 @@
 <template>
-  <span class="code-wrapper">
+  <code class="copyable-command">
     <span class="dollar">$</span>
-    <code ref="codeElement"><slot /></code>
-    <div class="copy-action-container">
+    <span ref="copyableTextHolder"><slot /></span>
+    <span class="copy-action-container">
       <TooltipWrapper>
         <FlatButton icon="copy" @click="copyCode" />
         <template #tooltip>
           Copy
         </template>
       </TooltipWrapper>
-    </div>
-  </span>
+    </span>
+  </code>
 </template>
 
 <script lang="ts">
@@ -27,10 +27,10 @@ export default defineComponent({
   setup() {
     const { copyText } = injectKey((keys) => keys.useClipboard);
 
-    const codeElementRef = shallowRef<HTMLElement | undefined>();
+    const copyableTextHolderRef = shallowRef<HTMLElement | undefined>();
 
     async function copyCode() {
-      const element = codeElementRef.value;
+      const element = copyableTextHolderRef.value;
       if (!element) {
         throw new Error('Code element could not be found.');
       }
@@ -43,7 +43,7 @@ export default defineComponent({
 
     return {
       copyCode,
-      codeElement: codeElementRef,
+      copyableTextHolder: copyableTextHolderRef,
     };
   },
 });
@@ -52,25 +52,16 @@ export default defineComponent({
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
-.code-wrapper {
+.copyable-command {
   display: inline-flex;
-  white-space: nowrap;
-  justify-content: space-between;
-  font-family: $font-family-monospace;
-  background-color: $color-primary-darker;
-  color: $color-on-primary;
-  align-items: center;
-  padding: 0.2rem;
+  padding: 0.25em;
+  font-size: $font-size-absolute-small;
   .dollar {
     margin-right: 0.5rem;
-    font-size: $font-size-absolute-x-small;
     user-select: none;
   }
   .copy-action-container {
     margin-left: 1rem;
   }
-  code {
-    font-size: $font-size-absolute-small;
-  }
 }
 </style>