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/assets/styles/base/_code-styling.scss

@@ -0,0 +1,56 @@
+@use "@/presentation/assets/styles/colors" as *;
+@use "@/presentation/assets/styles/mixins" as *;
+@use "@/presentation/assets/styles/vite-path" as *;
+@use "@/presentation/assets/styles/typography" as *;
+@use 'sass:math';
+
+@mixin code-block() {
+  pre {
+    @content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has
+  }
+}
+
+@mixin inline-code() {
+  :not(pre)>code {
+    @content;
+  }
+}
+
+@mixin base-code() {
+  code {
+    @content;
+  }
+}
+
+@mixin style-code-elements(
+  $color-background,
+  $code-block-padding,
+) {
+  $font-size-code: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around.
+  $border-radius: 2px; // Subtle rounding still maintaining sharp design.
+
+  @include base-code {
+    font-family: $font-family-monospace;
+    border-radius: $border-radius;
+    font-size: $font-size-code;
+    color: $color-on-primary;
+  }
+
+  @include inline-code {
+    background: $color-background;
+    word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.
+
+    $font-size-code-in-decimal: math.div($font-size-code, 100%); // Converts percentage (e.g., 85%) to decimal (e.g., 0.85) for calculations.
+    $font-size-code-in-em: calc(1em * #{$font-size-code-in-decimal});
+    $vertical-padding: calc((1em - #{$font-size-code-in-em}) / 2);
+    $horizontal-padding: calc(#{$font-size-code-in-em} * 0.4);
+    padding: $vertical-padding $horizontal-padding;
+  }
+
+  @include code-block {
+    background: $color-background;
+    border-radius: $border-radius;
+    overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+    padding: $code-block-padding;
+  }
+}