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/_fonts.scss

@@ -6,7 +6,7 @@
 /* slabo-27px-regular - latin_latin-ext */
 @font-face {
   font-display: swap;
-  
+
   font-family: 'Slabo 27px';
   font-style: normal;
   font-weight: 400;
@@ -24,16 +24,6 @@
     url('#{$base-assets-path}/fonts/yesteryear-v18-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
 }
 
-/* roboto-slab-regular - latin */
-@font-face {
-  font-display: swap;
-  font-family: 'Roboto Slab';
-  font-style: normal;
-  font-weight: 400;
-  src: url('#{$base-assets-path}/fonts/roboto-slab-v34-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-       url('#{$base-assets-path}/fonts/roboto-slab-v34-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}
-
 /* roboto-slab-regular - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
 @font-face {
   font-display: swap;
@@ -62,13 +52,3 @@
   src: url('#{$base-assets-path}/fonts/source-code-pro-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
     url('#{$base-assets-path}/fonts/source-code-pro-v23-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
 }
-
-/* roboto-mono-regular - latin */
-@font-face {
-  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-  font-family: 'Roboto Mono';
-  font-style: normal;
-  font-weight: 400;
-  src: url('#{$base-assets-path}/fonts/roboto-mono-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
-    url('#{$base-assets-path}/fonts/roboto-mono-v23-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
-}

src/presentation/assets/styles/_globals.scss

@@ -1,29 +0,0 @@
-/* 
-    Defines global styles that applies to globally defined tags by default (body, main, article, div etc.)
-*/
-
-@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 *;
-
-* {
-  box-sizing: border-box;
-}
-
-a {
-  color: inherit;
-  cursor: pointer;
-  @include flat-button($disabled: false);
-}
-
-body {
-  background: $color-background;
-  font-family: $font-family-main;
-  font-size: $font-size-absolute-normal;
-}
-
-input {
-  font-family: unset; // Reset browser default
-}
-

src/presentation/assets/styles/_mixins.scss

@@ -118,3 +118,13 @@
     }
   }
 }
+
+@mixin set-property-ch-value-with-fallback($property, $value-in-ch) {
+  @supports (width: 1ch) {
+    #{$property}: #{$value-in-ch}ch;
+  }
+  // For browsers that does not support `ch` unit (e.g., Opera Mini):
+  $estimated-width-per-character-in-em: calc(1em / 2); // 1 character is approximately half the font size
+  $calculated-width-in-em: calc(#{$estimated-width-per-character-in-em} * #{$value-in-ch});
+  #{$property}: $calculated-width-in-em;
+}

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;
+  }
+}

src/presentation/assets/styles/base/_index.scss

@@ -0,0 +1,53 @@
+/*
+  Defines global styles that applies to globally defined tags by default (body, main, article, div etc.).
+  Styles Fundamental HTML elements.
+  Contains foundational CSS rules that have a broad impact on the project's styling.
+  CSS Base applies a style foundation for HTML elements that is consistent for baseline browsers
+*/
+
+@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 "_code-styling" as *;
+@use "_margin-padding" as *;
+@use "_link-styling" as *;
+
+$base-spacing: 1em;
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: $color-background;
+  font-family: $font-family-main;
+  font-size: $font-size-absolute-normal;
+
+  @include apply-uniform-spacing($base-spacing: $base-spacing)
+}
+
+input {
+  font-family: unset; // Reset browser default
+}
+
+blockquote {
+  padding: 0 $base-spacing;
+  border-left: .25em solid $color-primary;
+}
+
+@include style-code-elements(
+  $code-block-padding: $base-spacing,
+  $color-background: $color-primary-darker,
+);
+
+hr {
+  opacity: 0.6;
+}
+
+sup {
+  @include reset-sup;
+
+  vertical-align: super;
+  font-size: $font-size-relative-smallest;
+}

src/presentation/assets/styles/base/_link-styling.scss

@@ -0,0 +1,42 @@
+@use "@/presentation/assets/styles/mixins" as *;
+@use "@/presentation/assets/styles/typography" as *;
+@use 'sass:math';
+
+a {
+  color: inherit;
+  cursor: pointer;
+  @include flat-button($disabled: false);
+
+  &[href] {
+    word-break: break-word; // Enables long URLs to wrap within the container, preventing horizontal overflow.
+  }
+  &[href^="http"]{
+    &:after {
+      display: inline-block;
+      content: '';
+
+      /*
+        Use mask element instead of content/background-image etc.
+        This way we can apply current font color to it to match the theme
+      */
+      mask: url(@/presentation/assets/icons/external-link.svg) no-repeat 50% 50%;
+      mask-size: cover;
+      background-color: currentColor;
+
+      /*
+        Use absolute sizing instead of relative. Relative sizing looks bad and inconsistent if there are external elements
+        inside small text (such as inside `<sup>`) and bigger elements like in bigger text. Making them always have same size
+        make the text read and flow better.
+      */
+      width: $font-size-absolute-x-small;
+      height: $font-size-absolute-x-small;
+
+      vertical-align: text-top;
+
+      @include set-property-ch-value-with-fallback(
+        $property: margin-left,
+        $value-in-ch: 0.25,
+      )
+    }
+  }
+}

src/presentation/assets/styles/base/_margin-padding.scss

@@ -0,0 +1,64 @@
+@use 'sass:math';
+
+@mixin no-margin($selectors) {
+  #{$selectors} {
+    margin: 0;
+  }
+}
+
+@mixin no-padding($selectors) {
+  #{$selectors} {
+    padding: 0;
+  }
+}
+
+@mixin left-padding($selectors, $horizontal-spacing) {
+  #{$selectors} {
+    padding-inline-start: $horizontal-spacing;
+  }
+}
+
+@mixin bottom-margin($selectors, $vertical-spacing) {
+  #{$selectors} {
+    &:not(:last-child) {
+      margin-bottom: $vertical-spacing;
+    }
+  }
+}
+
+@mixin apply-uniform-vertical-spacing($base-vertical-spacing) {
+  /* Reset default top/bottom margins added by browser. */
+  @include no-margin('p');
+  @include no-margin('h1, h2, h3, h4, h5, h6');
+  @include no-margin('blockquote');
+  @include no-margin('pre');
+  @include no-margin('hr');
+  @include no-margin('ul, ol');
+
+  /* Add spacing between elements using `margin-bottom` only (bottom-up instead of top-down strategy). */
+  $small-vertical-spacing: math.div($base-vertical-spacing, 2);
+  @include bottom-margin('p', $base-vertical-spacing);
+  @include bottom-margin('li > p', $small-vertical-spacing); // Reduce margin for paragraphs directly within list items to visually group related content.
+  @include bottom-margin('h1, h2, h3, h4, h5, h6', $small-vertical-spacing);
+  @include bottom-margin('ul, ol', $base-vertical-spacing);
+  @include bottom-margin('li', $small-vertical-spacing);
+  @include bottom-margin('table', $base-vertical-spacing);
+  @include bottom-margin('blockquote', $base-vertical-spacing);
+  @include bottom-margin('pre', $base-vertical-spacing);
+  @include bottom-margin('article', $base-vertical-spacing);
+  @include bottom-margin('hr', $base-vertical-spacing);
+}
+
+@mixin apply-uniform-horizontal-spacing($base-horizontal-spacing) {
+  /* Reset default left/right paddings added by browser. */
+  @include no-padding('ul, ol');
+
+  /* Add spacing for list items. */
+  $large-horizontal-spacing: $base-horizontal-spacing * 2;
+  @include left-padding('ul, ol', $large-horizontal-spacing);
+}
+
+@mixin apply-uniform-spacing($base-spacing) {
+  @include apply-uniform-vertical-spacing($base-spacing);
+  @include apply-uniform-horizontal-spacing($base-spacing);
+}

src/presentation/assets/styles/main.scss

@@ -4,7 +4,7 @@
 @forward "./typography";
 @forward "./media";
 @forward "./colors";
-@forward "./globals";
+@forward "./base";
 @forward "./mixins";
 
 @forward "./components/card";