311fcb1813
This commit standardizes the visual styling of inline code and code blocks, ensuring consistency across macOS, Android, Linux and Windows platforms. The discrepancies observed in font rendering on macOS, which caused the inline code font to appear larger, have been addressed. This behavior was only observed on macOS using different browsers such as Firefox, Safari, Chromium-based browsers including Electron. Key changes: - Standardize font size relative to the parent element. - Remove font-weight for uniformity, especially when the specific weight is not included with the application. - Add a consistent background color to inline codes, aligning their look with code blocks. - Refactor code styling into a separate SCSS file for improved modularity and maintainability. - Update the documentation to reflect these visual design choices for privacy.sexy's UI. These changes enhance the overall user experience by providing a consistent look and feel for code elements within the UI, regardless of the user's platform or browser.
45 lines
2.2 KiB
SCSS
45 lines
2.2 KiB
SCSS
// https://google-webfonts-helper.herokuapp.com/fonts
|
|
|
|
@use "@/presentation/assets/styles/vite-path" as *;
|
|
|
|
/* slabo-27px-regular - latin-ext_latin */
|
|
@font-face {
|
|
font-family: 'Slabo 27px';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
|
|
src: local('Slabo 27px'), local('Slabo27px-Regular'),
|
|
url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
|
url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
|
|
url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
|
url('#{$base-assets-path}/fonts/slabo-27px-v6-latin-ext_latin-regular.svg#Slabo27px') format('svg'); /* Legacy iOS */
|
|
}
|
|
|
|
/* yesteryear-regular - latin */
|
|
@font-face {
|
|
font-family: 'Yesteryear';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.eot'); /* IE9 Compat Modes */
|
|
src: local('Yesteryear'), local('Yesteryear-Regular'),
|
|
url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
|
url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
|
|
url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
|
url('#{$base-assets-path}/fonts/yesteryear-v8-latin-regular.svg#Yesteryear') format('svg'); /* Legacy iOS */
|
|
}
|
|
|
|
$font-normal : 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
|
$font-artistic : 'Yesteryear', cursive;
|
|
$font-main : 'Slabo 27px';
|
|
|
|
$font-size-smaller : 14px;
|
|
$font-size-small : 16px;
|
|
$font-size-normal : 18px;
|
|
$font-size-large : 22px;
|
|
$font-size-larger : 26px;
|
|
$font-size-largest : 40px;
|
|
|
|
$font-size-relative-smaller: 85%;
|