diff --git a/src/presentation/assets/fonts/roboto-mono-v23-latin-regular.woff2 b/src/presentation/assets/fonts/roboto-mono-v23-latin-regular.woff2
new file mode 100644
index 00000000..53d081f3
Binary files /dev/null and b/src/presentation/assets/fonts/roboto-mono-v23-latin-regular.woff2 differ
diff --git a/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.ttf b/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.ttf
new file mode 100644
index 00000000..072ed894
Binary files /dev/null and b/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.ttf differ
diff --git a/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2 b/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2
new file mode 100644
index 00000000..caef1380
Binary files /dev/null and b/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2 differ
diff --git a/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.ttf b/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.ttf
new file mode 100644
index 00000000..6d37b13c
Binary files /dev/null and b/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.ttf differ
diff --git a/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2 b/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2
new file mode 100644
index 00000000..95910906
Binary files /dev/null and b/src/presentation/assets/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2 differ
diff --git a/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf b/src/presentation/assets/fonts/slabo-27px-v14-latin_latin-ext-regular.ttf
similarity index 68%
rename from src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf
rename to src/presentation/assets/fonts/slabo-27px-v14-latin_latin-ext-regular.ttf
index 4533665c..37a4d3ec 100644
Binary files a/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf and b/src/presentation/assets/fonts/slabo-27px-v14-latin_latin-ext-regular.ttf differ
diff --git a/src/presentation/assets/fonts/slabo-27px-v14-latin_latin-ext-regular.woff2 b/src/presentation/assets/fonts/slabo-27px-v14-latin_latin-ext-regular.woff2
new file mode 100644
index 00000000..e2cf942e
Binary files /dev/null and b/src/presentation/assets/fonts/slabo-27px-v14-latin_latin-ext-regular.woff2 differ
diff --git a/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot b/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot
deleted file mode 100644
index 166a6df1..00000000
Binary files a/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot and /dev/null differ
diff --git a/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.svg b/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.svg
deleted file mode 100644
index 20c9a645..00000000
--- a/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.svg
+++ /dev/null
@@ -1,313 +0,0 @@
-
-
-
diff --git a/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff b/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff
deleted file mode 100644
index a786f68a..00000000
Binary files a/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff and /dev/null differ
diff --git a/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2 b/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2
deleted file mode 100644
index b7c27544..00000000
Binary files a/src/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2 and /dev/null differ
diff --git a/src/presentation/assets/fonts/source-code-pro-v23-latin-regular.ttf b/src/presentation/assets/fonts/source-code-pro-v23-latin-regular.ttf
new file mode 100644
index 00000000..eb045d7b
Binary files /dev/null and b/src/presentation/assets/fonts/source-code-pro-v23-latin-regular.ttf differ
diff --git a/src/presentation/assets/fonts/source-code-pro-v23-latin-regular.woff2 b/src/presentation/assets/fonts/source-code-pro-v23-latin-regular.woff2
new file mode 100644
index 00000000..b62bc793
Binary files /dev/null and b/src/presentation/assets/fonts/source-code-pro-v23-latin-regular.woff2 differ
diff --git a/src/presentation/assets/fonts/yesteryear-v8-latin-regular.ttf b/src/presentation/assets/fonts/yesteryear-v18-latin-regular.ttf
similarity index 78%
rename from src/presentation/assets/fonts/yesteryear-v8-latin-regular.ttf
rename to src/presentation/assets/fonts/yesteryear-v18-latin-regular.ttf
index 6245f2c4..bf7fa5aa 100644
Binary files a/src/presentation/assets/fonts/yesteryear-v8-latin-regular.ttf and b/src/presentation/assets/fonts/yesteryear-v18-latin-regular.ttf differ
diff --git a/src/presentation/assets/fonts/yesteryear-v18-latin-regular.woff2 b/src/presentation/assets/fonts/yesteryear-v18-latin-regular.woff2
new file mode 100644
index 00000000..4e2826b0
Binary files /dev/null and b/src/presentation/assets/fonts/yesteryear-v18-latin-regular.woff2 differ
diff --git a/src/presentation/assets/fonts/yesteryear-v8-latin-regular.eot b/src/presentation/assets/fonts/yesteryear-v8-latin-regular.eot
deleted file mode 100644
index d8d631dd..00000000
Binary files a/src/presentation/assets/fonts/yesteryear-v8-latin-regular.eot and /dev/null differ
diff --git a/src/presentation/assets/fonts/yesteryear-v8-latin-regular.svg b/src/presentation/assets/fonts/yesteryear-v8-latin-regular.svg
deleted file mode 100644
index 33854697..00000000
--- a/src/presentation/assets/fonts/yesteryear-v8-latin-regular.svg
+++ /dev/null
@@ -1,726 +0,0 @@
-
-
-
diff --git a/src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff b/src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff
deleted file mode 100644
index 73cdd87b..00000000
Binary files a/src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff and /dev/null differ
diff --git a/src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff2 b/src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff2
deleted file mode 100644
index ddaa61ed..00000000
Binary files a/src/presentation/assets/fonts/yesteryear-v8-latin-regular.woff2 and /dev/null differ
diff --git a/src/presentation/assets/styles/_fonts.scss b/src/presentation/assets/styles/_fonts.scss
index 671b8aa8..e570ba71 100644
--- a/src/presentation/assets/styles/_fonts.scss
+++ b/src/presentation/assets/styles/_fonts.scss
@@ -1,35 +1,74 @@
-// https://google-webfonts-helper.herokuapp.com/fonts
-
@use "@/presentation/assets/styles/vite-path" as *;
-/* slabo-27px-regular - latin-ext_latin */
+// This file should only contain @font-face definitions
+// Helpful resource: https://gwfh.mranftl.com/fonts
+
+/* slabo-27px-regular - latin_latin-ext */
@font-face {
+ font-display: swap;
+
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 */
+ src: url('#{$base-assets-path}/fonts/slabo-27px-v14-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('#{$base-assets-path}/fonts/slabo-27px-v14-latin_latin-ext-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* yesteryear-regular - latin */
@font-face {
+ font-display: swap;
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 */
+ src: url('#{$base-assets-path}/fonts/yesteryear-v18-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('#{$base-assets-path}/fonts/yesteryear-v18-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
-$font-normal : 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
-$font-artistic : 'Yesteryear', cursive;
-$font-main : 'Slabo 27px';
+/* roboto-slab-regular - latin */
+@font-face {
+ font-display: swap;
+ font-family: 'Roboto Slab';
+ font-style: normal;
+ font-weight: 400;
+ src: url('#{$base-assets-path}/fonts/roboto-slab-v34-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('#{$base-assets-path}/fonts/roboto-slab-v34-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+
+/* roboto-slab-regular - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
+@font-face {
+ font-display: swap;
+ font-family: 'Roboto Slab';
+ font-style: normal;
+ font-weight: 400;
+ src: url('#{$base-assets-path}/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('#{$base-assets-path}/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+/* roboto-slab-700 - cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese */
+@font-face {
+ font-display: swap;
+ font-family: 'Roboto Slab';
+ font-style: normal;
+ font-weight: 700;
+ src: url('#{$base-assets-path}/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('#{$base-assets-path}/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+
+/* source-code-pro-regular - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Source Code Pro';
+ font-style: normal;
+ font-weight: 400;
+ src: url('#{$base-assets-path}/fonts/source-code-pro-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('#{$base-assets-path}/fonts/source-code-pro-v23-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
+
+/* roboto-mono-regular - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Roboto Mono';
+ font-style: normal;
+ font-weight: 400;
+ src: url('#{$base-assets-path}/fonts/roboto-mono-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+ url('#{$base-assets-path}/fonts/roboto-mono-v23-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
+}
diff --git a/src/presentation/assets/styles/_globals.scss b/src/presentation/assets/styles/_globals.scss
index 9ab97ee4..9f0787c3 100644
--- a/src/presentation/assets/styles/_globals.scss
+++ b/src/presentation/assets/styles/_globals.scss
@@ -3,23 +3,27 @@
*/
@use "@/presentation/assets/styles/colors" as *;
-@use "@/presentation/assets/styles/fonts" as *;
@use "@/presentation/assets/styles/mixins" as *;
@use "@/presentation/assets/styles/vite-path" as *;
@use "@/presentation/assets/styles/typography" as *;
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
a {
- color: inherit;
- cursor: pointer;
- @include flat-button($disabled: false);
+ color: inherit;
+ cursor: pointer;
+ @include flat-button($disabled: false);
}
body {
- background: $color-background;
- font-family: $font-main;
- font-size: $font-size-absolute-normal;
+ background: $color-background;
+ font-family: $font-family-main;
+ font-size: $font-size-absolute-normal;
}
+
+input {
+ font-family: unset; // Reset browser default
+}
+
diff --git a/src/presentation/assets/styles/_mixins.scss b/src/presentation/assets/styles/_mixins.scss
index b2c8dc34..a65c7983 100644
--- a/src/presentation/assets/styles/_mixins.scss
+++ b/src/presentation/assets/styles/_mixins.scss
@@ -1,5 +1,4 @@
@use "@/presentation/assets/styles/colors" as *;
-@use "@/presentation/assets/styles/fonts" as *;
@use "@/presentation/assets/styles/typography" as *;
@mixin hover-or-touch($selector-suffix: '', $selector-prefix: '&') {
diff --git a/src/presentation/assets/styles/_typography.scss b/src/presentation/assets/styles/_typography.scss
index 7c516561..c160efef 100644
--- a/src/presentation/assets/styles/_typography.scss
+++ b/src/presentation/assets/styles/_typography.scss
@@ -1,19 +1,24 @@
+// Keep the amount of fonts minimal. No more than 3 (except logo and monospace)
+// for visual consistency and readability.
+$font-family-main : 'Roboto Slab', serif;
+$font-family-logo : 'Slabo 27px', serif;
+$font-family-monospace : 'Source Code Pro', monospace;
+$font-family-cursive : 'Yesteryear', cursive;
+
/*
This naming convention for font sizes adheres to CSS standards, distinguishing between absolute and relative sizes.
We prefix each variable with its type (absolute or relative) for clear identification and context.
*/
-
// Absolute sizes use the CSS data type, representing specific, fixed sizes unaffected by the parent element's size.
// See: https://archive.today/2024.02.02-005228/https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size.
-$font-size-absolute-x-small : 14px;
-$font-size-absolute-small : 16px;
-$font-size-absolute-normal : 18px;
-$font-size-absolute-large : 22px;
-$font-size-absolute-x-large : 26px;
+$font-size-absolute-x-small : 13px;
+$font-size-absolute-small : 15px;
+$font-size-absolute-normal : 17px;
+$font-size-absolute-large : 21px;
+$font-size-absolute-x-large : 27px;
$font-size-absolute-xx-large : 40px;
-
// Relative sizes employ the CSS data type, allowing font size adjustments based on the parent element's size.
// See: https://archive.today/2024.02.02-010054/https://developer.mozilla.org/en-US/docs/Web/CSS/relative-size.
-$font-size-relative-smallest : 80%; // Common browser standard for `font-size: smaller;`
-$font-size-relative-smaller : 85%; // Common browser standard for `font-size: smaller;`
+$font-size-relative-smallest : 80%;
+$font-size-relative-smaller : 85%;
diff --git a/src/presentation/components/Code/CodeButtons/IconButton.vue b/src/presentation/components/Code/CodeButtons/IconButton.vue
index 5257efb3..93a598c9 100644
--- a/src/presentation/components/Code/CodeButtons/IconButton.vue
+++ b/src/presentation/components/Code/CodeButtons/IconButton.vue
@@ -98,10 +98,9 @@ export default defineComponent({
}
.button__text {
display: none;
- font-family: $font-artistic;
+ font-family: $font-family-cursive;
font-size: $font-size-absolute-large;
color: $color-primary;
- font-weight: 500;
@include hover-or-touch {
display: block;
}
diff --git a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
index ec541ac7..bd0ec2f8 100644
--- a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
+++ b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
@@ -56,7 +56,7 @@ export default defineComponent({
display: inline-flex;
white-space: nowrap;
justify-content: space-between;
- font-family: $font-normal;
+ font-family: $font-family-monospace;
background-color: $color-primary-darker;
color: $color-on-primary;
align-items: center;
diff --git a/src/presentation/components/Code/TheCodeArea.vue b/src/presentation/components/Code/TheCodeArea.vue
index d7c29474..d6b024a5 100644
--- a/src/presentation/components/Code/TheCodeArea.vue
+++ b/src/presentation/components/Code/TheCodeArea.vue
@@ -210,6 +210,7 @@ function getDefaultCode(language: ScriptingLanguage, project: ProjectDetails): s
height: 100%;
overflow: auto;
font-size: $font-size-absolute-small;
+ font-family: $font-family-monospace;
&__highlight {
background-color: $color-secondary-light;
position: absolute;
diff --git a/src/presentation/components/Scripts/Menu/MenuOptionList.vue b/src/presentation/components/Scripts/Menu/MenuOptionList.vue
index 0a6eebb3..fd698efe 100644
--- a/src/presentation/components/Scripts/Menu/MenuOptionList.vue
+++ b/src/presentation/components/Scripts/Menu/MenuOptionList.vue
@@ -27,7 +27,6 @@ export default defineComponent({
$gap: 0.25rem;
.list {
- font-family: $font-normal;
display: flex;
:deep(.items) {
> * + *::before {
diff --git a/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue b/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
index 04a69d17..e62e7dfb 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
+++ b/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
@@ -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;
}
diff --git a/src/presentation/components/Scripts/View/Cards/CardList.vue b/src/presentation/components/Scripts/View/Cards/CardList.vue
index 51af12bc..faeefe25 100644
--- a/src/presentation/components/Scripts/View/Cards/CardList.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardList.vue
@@ -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');
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
index e8e7f80b..c156c4d7 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
@@ -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;
}
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue
index 7c1f64f9..3c149f91 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue
@@ -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;
}
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss
index 8de02a69..c5397143 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss
@@ -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 {
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue
index 111d7a8a..42e4d569 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue
@@ -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;
}
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
index 89d15f10..e2990553 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
@@ -64,4 +64,3 @@ export default defineComponent({
},
});
-./Reverter/Reverter
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
index 17ae86eb..9cbb9d9d 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
@@ -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');
diff --git a/src/presentation/components/Shared/FlatButton.vue b/src/presentation/components/Shared/FlatButton.vue
index f6feba1f..36f01d2d 100644
--- a/src/presentation/components/Shared/FlatButton.vue
+++ b/src/presentation/components/Shared/FlatButton.vue
@@ -62,7 +62,6 @@ export default defineComponent({
.flat-button {
display: inline-flex;
gap: 0.5em;
- font-family: $font-normal;
&.disabled {
@include flat-button($disabled: true);
}
diff --git a/src/presentation/components/TheFooter/PrivacyPolicy.vue b/src/presentation/components/TheFooter/PrivacyPolicy.vue
index aaf1d3ee..2e96019c 100644
--- a/src/presentation/components/TheFooter/PrivacyPolicy.vue
+++ b/src/presentation/components/TheFooter/PrivacyPolicy.vue
@@ -80,7 +80,6 @@ export default defineComponent({
.privacy-policy {
display: flex;
flex-direction: column;
- font-family: $font-normal;
text-align:center;
.line {
diff --git a/src/presentation/components/TheFooter/TheFooter.vue b/src/presentation/components/TheFooter/TheFooter.vue
index 802c217e..7b51186a 100644
--- a/src/presentation/components/TheFooter/TheFooter.vue
+++ b/src/presentation/components/TheFooter/TheFooter.vue
@@ -124,7 +124,6 @@ export default defineComponent({
}
}
flex-wrap: wrap;
- font-family: $font-normal;
&__item:not(:first-child) {
&::before {
content: "|";
diff --git a/src/presentation/components/TheHeader.vue b/src/presentation/components/TheHeader.vue
index be6e4b35..581df408 100644
--- a/src/presentation/components/TheHeader.vue
+++ b/src/presentation/components/TheHeader.vue
@@ -49,15 +49,15 @@ export default defineComponent({
.brand {
margin: 0;
text-transform: uppercase;
- font-family: $font-main;
+ font-family: $font-family-logo;
font-size: $font-size-absolute-xx-large;
}
.slogan {
margin: 0;
font-size: $font-size-absolute-x-large;
color: $color-primary;
- font-family: $font-artistic;
- font-weight: 500;
+ font-family: $font-family-cursive;
+ font-weight: normal; // Resets the browser default bold (700) font weight for elements
}
}
diff --git a/src/presentation/components/TheSearchBar.vue b/src/presentation/components/TheSearchBar.vue
index 9e84d7b5..2020c41b 100644
--- a/src/presentation/components/TheSearchBar.vue
+++ b/src/presentation/components/TheSearchBar.vue
@@ -112,7 +112,6 @@ export default defineComponent({
padding-right:10px;
outline: none;
color: $color-primary;
- font-family: $font-normal;
font-size: $font-size-absolute-normal;
&:focus {
color: $color-primary-darker;