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
This commit is contained in:
undergroundwires
2024-02-17 23:09:58 +01:00
parent d5bbc321f9
commit faa7a38a7d
27 changed files with 484 additions and 556 deletions

View File

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