44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change fonts for improved readability

Browse Source 
Key changes:

- Change main font to Roboto Slab for enhanced readability.
- Change code font to 'Source Code Pro' for consistent monospace code
  rendering.
- Import and set code font explicitly for uniform appearance across
  platforms.
- Update Slabo 27px (logo font) version from v6 to v14.
- Update Yesteryear (cursive font) version from v8 to v18.
- Drop support for historic browser-specific formats, retaining only
  WOFF2 for modern and TTF for legacy browsers.
- Use `font-display: swap` to improve perceived load times and minimize
  layout shifts.

Supporting changes:

- Simplify font-weight usage to 'normal' and 'bold' for consistency.
- Adjust inline code padding for better scalability and prevent
  overflow.
- Introduce `$font-main` as main font variable.
- Remove specification of main font as it's best practice to rely on the
  default font defined on `body` style.
- Specify font in code area to ensure it uses the code font consistently
  as the rest of the application.
- Remove local font search through `local` to simplify the import logic
  and prioritize consistency over performance.
- Import bold font explicitly (`font-weight: 700`) for smooth and
  consistent rendering.
- Move `font-family` definitions to `_typography.scss` to better adhere
  to the common standards and conventions.
- Refactor font variables to have `font-family-` prefix instead of
  `font-` to improve clarity and differentiation between `font-size`
  variables.
- Rename 'artistic' font to 'cursive' for preciseness and clarity.
- Use smaller font sizes to match the new main font size, as Roboto Slab
  is relatively larger.
- Add missing fallbacks for serif fonts to improve fault tolerance.
- Change padding slightly on toggle switch for revert buttons to align
  well with new main font and its sizing.
This commit is contained in:
undergroundwires
2024-02-16 11:27:31 +01:00
parent ebd82853dd
commit d5bbc321f9
40 changed files with 120 additions and 1117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/presentation/components/Scripts/Menu/MenuOptionList.vue
View File

@@ -27,7 +27,6 @@ export default defineComponent({
$gap: 0.25rem;
.list {
font-family: $font-normal;
display: flex;
:deep(.items) {
> * + *::before {

5
src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
View File

@@ -110,7 +110,6 @@ ul {
.includes {
display: flex;
gap: 0.5em;
font-weight: 500;
.icon {
color: $color-success;
}
@@ -119,9 +118,7 @@ ul {
.considerations {
display: flex;
gap: 0.5em;
.text {
font-weight: 500;
}
font-weight: bold;
.icon {
color: $color-danger;
}

2
src/presentation/components/Scripts/View/Cards/CardList.vue
View File

@@ -129,7 +129,6 @@ function isClickable(element: Element) {
.cards {
display: flex;
flex-flow: row wrap;
font-family: $font-main;
gap: $card-gap;
/*
Padding is used to allow scale animation (growing size) for cards on hover.
@@ -143,7 +142,6 @@ function isClickable(element: Element) {
width: 100%;
text-align: center;
font-size: $font-size-absolute-xx-large;
font-family: $font-normal;
}
@include fade-transition('fade-transition');

2
src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
View File

@@ -58,8 +58,6 @@ function formatAsMarkdownListItem(content: string): string {
flex-direction: column;
flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
font-size: $font-size-absolute-normal;
font-family: $font-main;
}
</style>

1
src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue
View File

@@ -41,7 +41,6 @@ $text-color: $color-on-primary;
.markdown-text {
color: $text-color;
font-size: $font-size-absolute-normal;
font-family: $font-main;
@include markdown-text-styles;
}
</style>

13
src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss
View File

@@ -1,4 +1,5 @@
@use "@/presentation/assets/styles/main" as *;
@use 'sass:math';
@mixin code-block() {
pre {
@@ -22,18 +23,24 @@
$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-normal;
font-family: $font-family-monospace;
border-radius: $border-radius;
font-size: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around.
font-size: $font-size-code;
}
@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.
padding: 0.2em 0.4em; // Balanced padding for readability, with `em` units scaling with font size.
$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 {

1
src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue
View File

@@ -23,7 +23,6 @@ export default defineComponent({
@use "@/presentation/assets/styles/main" as *;
.node-title {
font-family: $font-main;
font-size: $font-size-absolute-large;
}
</style>

1
src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
View File

@@ -64,4 +64,3 @@ export default defineComponent({
},
});
</script>
./Reverter/Reverter

33
src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
View File

@@ -75,22 +75,24 @@ export default defineComponent({
@use 'sass:math';
@use "@/presentation/assets/styles/main" as *;
$font-size : $font-size-absolute-small;
$font-size : $font-size-absolute-small;
$color-toggle-unchecked : $color-primary-darker;
$color-toggle-checked : $color-on-secondary;
$color-text-unchecked : $color-on-primary;
$color-text-checked : $color-on-secondary;
$color-bg-unchecked : $color-primary;
$color-bg-checked : $color-secondary;
$size-height : $font-size + 8px;
$size-circle : math.div($size-height * 2, 3);
$padding-horizontal : 0.40em;
$gap : 0.25em;
$color-toggle-unchecked : $color-primary-darker;
$color-toggle-checked : $color-on-secondary;
$color-text-unchecked : $color-on-primary;
$color-text-checked : $color-on-secondary;
$color-bg-unchecked : $color-primary;
$color-bg-checked : $color-secondary;
$padding-horizontal : calc($font-size * 0.4);
$padding-vertical : calc($font-size * 0.3);
$size-height : calc($font-size + ($padding-vertical * 2));
$size-circle : math.div($size-height * 2, 3);
$gap-between-circle-and-text : 0.25em;
@mixin locateNearCircle($direction: 'left') {
$circle-width: calc(#{$size-circle} + #{$padding-horizontal});
$circle-space: calc(#{$circle-width} + #{$gap});
$circle-space: calc(#{$circle-width} + #{$gap-between-circle-and-text});
@if $direction == 'left' {
margin-left: $circle-space;
} @else {
@@ -103,9 +105,10 @@ $gap : 0.25em;
overflow: hidden;
position: relative;
width: auto;
font-size: $font-size;
height: $size-height;
border-radius: $size-height;
font-size: $font-size;
input.toggle-input {
position: absolute;
@@ -120,7 +123,7 @@ $gap : 0.25em;
.toggle-animation {
display: flex;
align-items: center;
gap: $gap;
gap: $gap-between-circle-and-text;
width: 100%;
height: 100%;
background-color: $color-bg-unchecked;
@@ -155,7 +158,7 @@ $gap : 0.25em;
}
.label {
font-weight: bold;
font-weight: bold; // TODO: Babaya sor
transition: all 0.3s ease-out, color 0s;
&.label-off {
@include locateNearCircle('left');