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
43 lines
1.2 KiB
SCSS
43 lines
1.2 KiB
SCSS
@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,
|
|
)
|
|
}
|
|
}
|
|
}
|