feat(fonts): use Inter

Added the environment variables VITE_ASSETS_BUILD_ID for the ID of the
used build and VITE_ASSETS_BASE_URL for the base URL of the assets.
A script for reading this configuration was also added.

src/features/footer/components/Footer.vue

@@ -54,7 +54,6 @@ const copyrightPeriod =
 .footer-segment {
     display: flex;
     justify-content: center;
-    align-items: center;
     gap: 32px;
     padding: var(--padding-y);
     background-color: var(--light-bg);

src/features/settings/views/SettingsView.vue

@@ -61,10 +61,6 @@ onMounted(async () => {
     });
     settingsLoaded.value = true;
 });
-
-const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
-    if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
-};
 </script>
 
 <template>
@@ -75,14 +71,13 @@ const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSi
             </h1>
         </header>
         <LeftSidebarLayout class="layout">
-            <template #sidebar="{ toggleSidebar }">
+            <template #sidebar>
                 <ul class="sidebar-sections-list">
                     <li v-for="section in settings">
                         <RouterLink
                             :to="`/settings/${section.name}`"
                             class="button button-link link sidebar-section"
                             :class="{ active: activeSection === section.name }"
-                            @click="toggleSidebarIfSmallScreen(toggleSidebar)"
                         >
                             {{ t(section.i18n) }}
                         </RouterLink>

src/features/sidebar/components/Sidebar.vue

@@ -61,10 +61,6 @@ const toggleSidebar = function toggleSidebar () {
 }
 
 @media (max-width: 48rem) {
-    .sidebar {
-        border: none;
-    }
-
     .sidebar:not(.expanded) .sidebar-expand-button {
         display: none;
     }

src/layouts/LeftSidebarLayout.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 
 const expanded = ref(props.expanded);
 
-const toggleSidebar = function toggleSidebar () {
+const toggleExpanded = function toggleExpanded () {
     expanded.value = !expanded.value;
 };
 </script>
@@ -37,13 +37,13 @@ const toggleSidebar = function toggleSidebar () {
 <template>
     <div class="layout-container" :class="{ expanded }">
         <div class="sidebar-expand-button-container">
-            <SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
         </div>
-        <Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
-            <slot name="sidebar" :toggleSidebar="toggleSidebar" />
+        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
+            <slot name="sidebar" />
         </Sidebar>
         <main class="main-content">
-            <slot :toggleSidebar="toggleSidebar" />
+            <slot />
         </main>
     </div>
 </template>

src/styles/common.css

@@ -86,9 +86,4 @@ input {
 
 .button:hover {
     background-color: var(--light-hover);
-}
-
-/* Temporary until a custom tap highlight is implemented. */
-* {
-    -webkit-tap-highlight-color: transparent;
 }