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:
53
src/presentation/assets/styles/base/_index.scss
Normal file
53
src/presentation/assets/styles/base/_index.scss
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user