faa7a38a7d
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
57 lines
1.7 KiB
SCSS
57 lines
1.7 KiB
SCSS
@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;
|
|
}
|
|
}
|