From 59a2156507daf7f4f8eb49d6c7a82e2c7ce2ade1 Mon Sep 17 00:00:00 2001
From: Peter Kleiweg <kleiweg@ziggo.nl>
Date: Thu, 23 Apr 2026 15:18:11 +0200
Subject: [PATCH] www: trasition: opaque

---
 www/app.js     |  7 +++++--
 www/style2.css | 10 ++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/www/app.js b/www/app.js
index c0e20cd..eb0f032 100644
--- a/www/app.js
+++ b/www/app.js
@@ -112,7 +112,7 @@ async function loadSource(source, week) {
   }
 
   document.getElementById('subtitle').innerHTML =
-    source + '<br>' + data[week].start + ' t/m ' + data[week].last
+    source + ' — t/m ' + data[week].last
 
   const d = document.createElement('div')
   const tab = document.createElement('table')
@@ -133,7 +133,7 @@ async function loadPart(part, week) {
   }
 
   document.getElementById('subtitle').innerHTML =
-    part + '<br>' + data[week].start + ' t/m ' + data[week].last
+    part + ' — t/m ' + data[week].last
 
   const d = document.createElement('div')
   const tab = document.createElement('table')
@@ -181,7 +181,9 @@ async function kies() {
   }
 
   const dd = document.getElementById('data')
+  const st = document.getElementById('subtitle')
   dd.classList.add('fade')
+  st.classList.add('fade')
   await sleep(20)
 
   if (source == 'alles' || source == '') {
@@ -192,6 +194,7 @@ async function kies() {
     loadWeken(source, part)
   }
   dd.classList.remove('fade')
+  st.classList.remove('fade')
 }
 
 async function init() {
diff --git a/www/style2.css b/www/style2.css
index 968e801..0b30812 100644
--- a/www/style2.css
+++ b/www/style2.css
@@ -141,11 +141,13 @@ label:hover {
   text-decoration: underline;
 }
 
+#subtitle,
 #data {
-  background-color: inherit;
-  transition: all 200ms linear;
+  opacity: 1;
+  transition: opacity 200ms linear;
 }
+#subtitle.fade,
 #data.fade {
-  background-color: #00fa9a;
-  transition: all 20ms linear;
+  opacity: 0;
+  transition: opacity 20ms linear;
 }