Normalize and improve font sizes

This commit standardizes font sizes across components for a uniform look. The icon sizes, font weights and line heights are also adjusted accordingly for better standardization and simplicity. - Introduce variables for standard font sizes, enhancing maintainability. - Remove explicit pixel values, replaced with scalable units based on root size. - Remove workaround for line-height adoptation of bigger font-size. - Use consistent small font-size for the code area. - Adjust checkbox tick to scale with font size.
2024-01-31 19:54:11 +01:00
parent a5ffed4cd6
commit 4da306b9f7
25 changed files with 70 additions and 70 deletions
--- a/src/presentation/components/Code/CodeButtons/IconButton.vue
+++ b/src/presentation/components/Code/CodeButtons/IconButton.vue
@@ -81,7 +81,7 @@ export default defineComponent({
  border-radius: 4px;

  .button__icon {
-    font-size: 2em;
+    font-size: $font-size-larger;
  }

  @include clickable;
@@ -99,10 +99,9 @@ export default defineComponent({
  .button__text {
    display: none;
    font-family: $font-artistic;
-    font-size: 1.5em;
+    font-size: $font-size-large;
    color: $color-primary;
    font-weight: 500;
-    line-height: 1.1;
    @include hover-or-touch {
      display: block;
    }
--- a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
+++ b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
@@ -63,14 +63,14 @@ export default defineComponent({
  padding: 0.2rem;
  .dollar {
    margin-right: 0.5rem;
-    font-size: 0.8rem;
+    font-size: $font-size-smaller;
    user-select: none;
  }
  .copy-action-container {
    margin-left: 1rem;
  }
  code {
-    font-size: 1rem;
+    font-size: $font-size-small;
  }
 }
 </style>
--- a/src/presentation/components/Code/TheCodeArea.vue
+++ b/src/presentation/components/Code/TheCodeArea.vue
@@ -203,6 +203,7 @@ function getDefaultCode(language: ScriptingLanguage): string {
    width: 100%;
    height: 100%;
    overflow: auto;
+    font-size: $font-size-small;
    &__highlight {
      background-color: $color-secondary-light;
      position: absolute;
--- a/src/presentation/components/Scripts/Menu/Selector/SelectionTypeDocumentation.vue
+++ b/src/presentation/components/Scripts/Menu/Selector/SelectionTypeDocumentation.vue
@@ -101,9 +101,6 @@ ul {
  padding-left: 0em;
  margin-top: 0.25em;
  list-style: disc;
-  li {
-    line-height: 1.2em;
-  }
 }
 .sections {
  display: flex;
--- a/src/presentation/components/Scripts/View/Cards/CardList.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardList.vue
@@ -142,7 +142,7 @@ function isClickable(element: Element) {
 .error {
  width: 100%;
  text-align: center;
-  font-size: 3.5em;
+  font-size: $font-size-largest;
  font-family: $font-normal;
 }

--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -145,7 +145,6 @@ $card-horizontal-gap    : $card-gap;
    @include clickable;
    background-color: $color-primary;
    color: $color-on-primary;
-    font-size: 1.5em;
    height: 100%;
    width: 100%;
    text-transform: uppercase;
@@ -169,6 +168,7 @@ $card-horizontal-gap    : $card-gap;
      flex-direction: column;
      flex: 1;
      justify-content: center;
+      font-size: $font-size-large;
    }
    .card__inner__selection_indicator {
      height: $card-inner-padding;
@@ -181,6 +181,7 @@ $card-horizontal-gap    : $card-gap;
      width: 100%;
      margin-top: .25em;
      vertical-align: middle;
+      font-size: $font-size-normal;
    }
  }
  .card__expander {
@@ -202,7 +203,7 @@ $card-horizontal-gap    : $card-gap;
    }

    .card__expander__close-button {
-      font-size: 1.5em;
+      font-size: $font-size-large;
      align-self: flex-end;
      margin-right: 0.25em;
      @include clickable;
--- a/src/presentation/components/Scripts/View/Cards/CardSelectionIndicator.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardSelectionIndicator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="icon">
    <AppIcon
      v-if="isAnyChildSelected && !areAllChildrenSelected"
      icon="battery-half"
@@ -53,3 +53,10 @@ export default defineComponent({
 });

 </script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+.icon {
+  font-size: $font-size-normal;
+}
+</style>
--- a/src/presentation/components/Scripts/View/TheScriptsView.vue
+++ b/src/presentation/components/Scripts/View/TheScriptsView.vue
@@ -151,7 +151,7 @@ $margin-inner: 4px;
    margin-top: 1em;
    color: $color-primary-light;
    .search__query__close-button {
-      font-size: 1.25em;
+      font-size: $font-size-large;
      margin-left: 0.25rem;
    }
  }
@@ -160,7 +160,7 @@ $margin-inner: 4px;
    flex-direction: column;
    word-break:break-word;
    color: $color-on-primary;
-    font-size: 1.5em;
+    font-size: $font-size-large;
    padding:10px;
    text-align:center;
    > div {
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
@@ -1,5 +1,9 @@
 <template>
-  <MarkdownText :text="renderedMarkdown" class="documentation-text" />
+  <MarkdownText
+    class="documentation-text"
+    :text="renderedMarkdown"
+    @click.stop
+  />
 </template>

 <script lang="ts">
@@ -55,7 +59,7 @@ function formatAsMarkdownListItem(content: string): string {
  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: calc(24px * 75/100);
+  font-size: $font-size-normal;
  font-family: $font-main;
 }
 </style>
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/ToggleDocumentationButton.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/ToggleDocumentationButton.vue
@@ -49,8 +49,7 @@ export default defineComponent({
 .documentation-button {
  vertical-align: middle;
  color: $color-primary;
-  font-size: 24px;
-
+  font-size: $font-size-large;
  :deep() { // This override leads to inconsistent highlight color, it should be re-styled.
    @include hover-or-touch {
      color: $color-primary-darker;
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue
@@ -2,7 +2,6 @@
  <!-- eslint-disable vue/no-v-html -->
  <div
    class="markdown-text"
-    @click.stop
    v-html="htmlOutput"
  />
 </template>
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue
@@ -24,17 +24,6 @@ export default defineComponent({

 .node-title {
  font-family: $font-main;
-  font-size: 1.5em;
-  line-height: 24px;
-  /*
-    Following is a workaround fixing overflow-y caused by line height being smaller than font.
-    It should be removed once a proper line-height matching the font-size (not smaller than) is used.
-  */
-  $line-height-compensation: calc((1.5em - 24px) / 4);
-  padding-top: $line-height-compensation;
-  padding-bottom: $line-height-compensation;
-  margin-top: calc(-1 * $line-height-compensation);
-  margin-bottom: calc(-1 * $line-height-compensation);
-  overflow-y: none;
+  font-size: $font-size-large;
 }
 </style>
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
@@ -68,13 +68,15 @@ export default defineComponent({
@use 'sass:math';
@use "@/presentation/assets/styles/main" as *;

+$font-size              : $font-size-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            : 30px;
+$size-height            : $font-size + 8px;
 $size-circle            : math.div($size-height * 2, 3);
 $padding-horizontal     : 0.40em;
 $gap                    : 0.25em;
@@ -106,8 +108,7 @@ $gap                    : 0.25em;
  width: auto;
  height: $size-height;
  border-radius: $size-height;
-  line-height: $size-height;
-  font-size: math.div($size-height, 2);
+  font-size: $font-size;

  input.toggle-input {
    position: absolute;
--- a/src/presentation/components/Scripts/View/Tree/TreeView/Node/NodeCheckbox.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/Node/NodeCheckbox.vue
@@ -53,13 +53,13 @@ export default defineComponent({
@use "@/presentation/assets/styles/main" as *;
@use "./../tree-colors" as *;

-$sideSizeInPx: 30px;
+$side-size-in-px: $font-size-larger;

 .checkbox {
  position: relative;

-  width: $sideSizeInPx;
-  height: $sideSizeInPx;
+  width: $side-size-in-px;
+  height: $side-size-in-px;

  box-sizing: border-box;
  border: 1px solid $color-node-checkbox-border-unchecked;
@@ -76,12 +76,12 @@ $sideSizeInPx: 30px;
  &.indeterminate {
    border-color: $color-node-checkbox-border-unchecked;

-    &:after {
+    &:after { // Draw line (─)
      background-color: $color-node-checkbox-border-indeterminate;
      top: 50%;
      left: 20%;
      right: 20%;
-      height: 2px;
+      height: 1.5px;
    }
  }

@@ -89,15 +89,18 @@ $sideSizeInPx: 30px;
    background: $color-node-checkbox-bg-checked;
    border-color: $color-node-checkbox-border-checked;

-    &:after {
+    &:after { // Draw checkmark tick (✔️)
+
      box-sizing: content-box;
      border: 1.5px solid $color-node-checkbox-tick-checked;
      border-left: 0;
      border-top: 0;
-      left: 9px;
-      top: 3px;
-      height: 15px;
-      width: 8px;
+
+      left: $side-size-in-px * 0.33;
+      top: $side-size-in-px * 0.11;
+      height: $side-size-in-px * 0.50;
+      width: $side-size-in-px * 0.25;
+
      transform: rotate(45deg) scaleY(1);
      transition: transform .25s;
      transform-origin: center;
--- a/src/presentation/components/Shared/Modal/ModalDialog.vue
+++ b/src/presentation/components/Shared/Modal/ModalDialog.vue
@@ -74,7 +74,7 @@ export default defineComponent({
  .dialog__close-button {
    color: $color-primary-dark;
    width: auto;
-    font-size: 1.5em;
+    font-size: $font-size-large;
    margin-right: 0.25em;
    align-self: flex-start;
  }
--- a/src/presentation/components/Shared/TooltipWrapper.vue
+++ b/src/presentation/components/Shared/TooltipWrapper.vue
@@ -225,6 +225,7 @@ $color-tooltip-background: $color-primary-darkest;
  color: $color-on-primary;
  border-radius: 16px;
  padding: 5px 10px 4px;
+  font-size: $font-size-normal;

  /*
    This margin creates a visual buffer between the tooltip and the edges of the document.
--- a/src/presentation/components/TheFooter/DownloadUrlList.vue
+++ b/src/presentation/components/TheFooter/DownloadUrlList.vue
@@ -2,8 +2,8 @@
  <span
    class="container"
    :class="{
-      'container-unsupported': !hasCurrentOsDesktopVersion,
-      'container-supported': hasCurrentOsDesktopVersion,
+      unsupported: !hasCurrentOsDesktopVersion,
+      supported: hasCurrentOsDesktopVersion,
    }"
  >
    <span class="description">
@@ -62,11 +62,8 @@ export default defineComponent({
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
-  &-unsupported {
-    opacity: $color-primary-light;
-  }
-  &-supported {
-    font-size: 1em;
+  .unsupported {
+    color: $color-primary-light;
  }
  .description {
    &__icon {
@@ -81,7 +78,7 @@ export default defineComponent({
  &__url {
    &:not(:first-child)::before {
      content: "|";
-      font-size: 0.6rem;
+      font-size: $font-size-smaller;
      padding: 0 5px;
    }
  }
--- a/src/presentation/components/TheFooter/DownloadUrlListItem.vue
+++ b/src/presentation/components/TheFooter/DownloadUrlListItem.vue
@@ -3,8 +3,8 @@
    <a
      :href="downloadUrl"
      :class="{
-        url__active: hasCurrentOsDesktopVersion && isCurrentOs,
-        url__inactive: hasCurrentOsDesktopVersion && !isCurrentOs,
+        active: hasCurrentOsDesktopVersion && isCurrentOs,
+        inactive: hasCurrentOsDesktopVersion && !isCurrentOs,
      }"
    >{{ operatingSystemName }}</a>
  </span>
@@ -64,11 +64,8 @@ function hasDesktopVersion(os: OperatingSystem): boolean {
 <style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;
 .url {
-  &__active {
-    font-size: 1em;
-  }
-  &__inactive {
-    font-size: 0.70em;
+  .inactive {
+    font-size: $font-size-smaller;
  }
 }
 </style>
--- 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-size: 1rem;
    font-family: $font-normal;
    &__item:not(:first-child) {
      &::before {
--- a/src/presentation/components/TheHeader.vue
+++ b/src/presentation/components/TheHeader.vue
@@ -46,16 +46,14 @@ export default defineComponent({
    margin: 0;
    text-transform: uppercase;
    font-family: $font-main;
-    font-size: 2.5em;
-    line-height: 1.1;
+    font-size: $font-size-largest;
  }
  .subtitle {
    margin: 0;
-    font-size: 1.5em;
+    font-size: $font-size-larger;
    color: $color-primary;
    font-family: $font-artistic;
    font-weight: 500;
-    line-height: 1.2;
  }
 }
 </style>
--- a/src/presentation/components/TheSearchBar.vue
+++ b/src/presentation/components/TheSearchBar.vue
@@ -113,7 +113,7 @@ export default defineComponent({
  outline: none;
  color: $color-primary;
  font-family: $font-normal;
-  font-size:1em;
+  font-size: $font-size-normal;
  &:focus {
    color: $color-primary-darker;
  }
@@ -127,7 +127,7 @@ export default defineComponent({
  text-align: center;
  color: $color-on-primary;
  border-radius: 0 5px 5px 0;
-  font-size: 20px;
+  font-size: $font-size-large;
  padding:5px;
 }
 </style>