Made tab transition time more dynamic

main.js

@@ -35,6 +35,7 @@ function switchTab(tabID, playAnimation=true) {
         tabID = tabID.id.split('button-')[1];
     }
 
+    let tabTransitionTime = Number(getComputedStyle(document.body).getPropertyValue('--tab-transition-time').slice(0, -2));
     let tabs = document.getElementsByTagName('main')[0].children;
     let tab = document.getElementById(`tab-${tabID}`);
     let buttons = document.getElementsByTagName('header')[0].getElementsByTagName('button');
@@ -51,7 +52,7 @@ function switchTab(tabID, playAnimation=true) {
         if (tabs[i] == tab) { continue; }
         tabs[i].classList.add('hiddenTab');
         if (playAnimation) {
-            setTimeout(() => { tabs[i].style.display = 'none'; }, 500);
+            setTimeout(() => { tabs[i].style.display = 'none'; }, tabTransitionTime);
         } else {
             tabs[i].style.display = 'none';
         }
@@ -68,7 +69,7 @@ function switchTab(tabID, playAnimation=true) {
 
     // Show selected tab
     if (playAnimation) {
-        setTimeout(() => { tab.style.display = 'unset'; }, 500);
+        setTimeout(() => { tab.style.display = 'unset'; }, tabTransitionTime);
     } else {
         tab.style.display = 'unset';
     }

styles.css

@@ -8,6 +8,7 @@
     --button-border-highlight-colour: #f7b3a9;
 
     --header-size: 50px;
+    --tab-transition-time: 250ms; /* Must be in ms for JS parsing */
 }
 
 
@@ -58,7 +59,7 @@ main {
 
 main > article {
     display: unset;
-    transition: filter 0.5s, opacity 0.5s;
+    transition: filter var(--tab-transition-time), opacity var(--tab-transition-time);
 }
 
 .hiddenTab {