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/View/Tree/NodeContent/Markdown/MarkdownText.vue

@@ -34,13 +34,18 @@ function convertMarkdownToHtml(markdownText: string): string {
 
 <style lang="scss"> /* Not scoped due to element styling such as "a". */
 @use "@/presentation/assets/styles/main" as *;
-@import './markdown-styles.scss';
 
 $text-color: $color-on-primary;
 
 .markdown-text {
   color: $text-color;
   font-size: $font-size-absolute-normal;
-  @include markdown-text-styles;
+  ul {
+    /*
+      Set list style explicitly, because otherwise it changes based on parent <ul>s.
+      We reset the style from here.
+    */
+    list-style: square;
+  }
 }
 </style>

src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss

@@ -1,52 +0,0 @@
-@use "@/presentation/assets/styles/main" 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;
-  }
-
-  @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/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss

@@ -1,131 +0,0 @@
-@use "@/presentation/assets/styles/main" as *;
-@use "_code-styling" as *;
-@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');
-
-  /* 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('h1, h2, h3, h4, h5, h6', $base-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);
-}
-
-@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 markdown-text-styles {
-  $base-spacing: 1em;
-
-  a {
-    &[href] {
-      word-break: break-word; // Enables long URLs to wrap within the container, preventing horizontal overflow.
-    }
-    &[href^="http"]{
-      &:after {
-        /*
-          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;
-        content: '';
-  
-        display: inline-block;
-
-        /*
-          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;
-  
-        background-color: $text-color;
-        margin-left: math.div(1em, 4);
-      }
-      /*
-        Match color of global hover behavior. We need to do it manually because global hover sets
-        `color` property but here we need to modify `background-color` property because color only
-        works if SVG is embedded as HTML element (as `<svg/>`) not as `url(..)` as we do. Then the
-        only option is to use `mask` and `background-color` properties.
-      */
-      @include hover-or-touch {
-        &::after{
-          background-color: $color-highlight;
-        }
-      }
-    }
-  }
-
-  @include apply-uniform-vertical-spacing($base-spacing);
-  @include apply-uniform-horizontal-spacing($base-spacing);
-
-  ul {
-    /*
-        Set list style explicitly, because otherwise it changes based on parent <ul>s in tree view.
-        We reset the style from here.
-    */
-    list-style: square;
-  }
-
-  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,
-  );
-
-  sup {
-    @include reset-sup;
-
-    vertical-align: super;
-    font-size: $font-size-relative-smallest;
-  }
-}

src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue

@@ -158,7 +158,7 @@ $gap-between-circle-and-text  : 0.25em;
   }
 
   .label {
-    font-weight: bold; // TODO: Babaya sor
+    font-weight: bold;
     transition: all 0.3s ease-out, color 0s;
     &.label-off {
       @include locateNearCircle('left');