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.

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;
     }
   }

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>

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 {