This commit upgrades TypeScript to the latest version 5.3 and introduces
`verbatimModuleSyntax` in line with the official Vue guide
recommendatinos (vuejs/docs#2592).
By enforcing `import type` for type-only imports, this commit improves
code clarity and supports tooling optimization, ensuring imports are
only bundled when necessary for runtime.
Changes:
- Bump TypeScript to 5.3.3 across the project.
- Adjust import statements to utilize `import type` where applicable,
promoting cleaner and more efficient code.
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.
- Bump all ESLint dependencies related to TypeScript to their latest
version. This was made possible by the resolution of compatibility
issues with `@vue/eslint-config-airbnb-with-typescript`.
See vuejs/eslint-config-airbnb#58 for details.
- Refactor code to comply with the latest linting configuration.
- Improve documentation in the ESLint configuration file to better
describe the functionality and limitations of
`@vue/typescript/recommended`.
See vuejs/eslint-config-typescript#67 for details.
- Document functionality and limitation of `@vue/typescript/recommended`
more clearly in ESLint configuration file.
This commit fixes layout shifts experienced in macOS Safari when
hovering over top menu items. Instead of making text bold — which was
causing layout shifts — the hover effect now changes the text color.
This ensures a consistent UI across different browsers and platforms.
Additionally, this commit fixes the styling of the privacy button
located in the bottom right corner. Previously styled as an `<a>`
element, it is now correctly represented as a `<button>`.
Furthermore, the commit enhances HTML conformity and accessibility by
correctly using `<button>` and `<a>` tags instead of relying on click
interactions on `<span>` elements.
This commit introduces `FlatButton` Vue component and a new
`flat-button` mixin. These centralize button usage and link styles,
aligning the hover/touch reactions of buttons across the application,
thereby creating a more consistent user interface.
