remove fps, improve icon css

public/index.html

@@ -20,7 +20,6 @@
     <link rel="modulepreload" href="scripts/AppDatePicker.js" />
     <link rel="modulepreload" href="scripts/AppDraggable.js" />
     <link rel="modulepreload" href="scripts/AppFlip.js" />
-    <link rel="modulepreload" href="scripts/AppFps.js" />
     <link rel="modulepreload" href="scripts/AppIcon.js" />
     <link rel="modulepreload" href="scripts/AppSortable.js" />
     <link rel="modulepreload" href="scripts/TodoApp.js" />

public/scripts/AppFps.js

@@ -1,36 +0,0 @@
-/**
- * @param {HTMLElement} el
- */
-export function AppFps(el) {
-  const sampleSize = 20;
-  let times = [];
-
-  tick();
-
-  function tick() {
-    requestAnimationFrame(tick);
-
-    times.push(performance.now());
-
-    if (times.length <= sampleSize) return;
-
-    let min = Infinity;
-    let max = 0;
-    let sum = 0;
-
-    for (let i = 1; i < sampleSize + 1; ++i) {
-      const delta = times[i] - times[i - 1];
-      min = Math.min(min, delta);
-      max = Math.max(max, delta);
-      sum += delta;
-    }
-
-    const fps = (sampleSize / sum) * 1000;
-
-    el.innerText = `${fps.toFixed(0)} fps (${min.toFixed(0)} ms - ${max.toFixed(
-      0,
-    )} ms)`;
-
-    times = [];
-  }
-}

public/scripts/TodoApp.js

@@ -1,6 +1,5 @@
 import { AppCollapsible } from './AppCollapsible.js';
 import { AppFlip } from './AppFlip.js';
-import { AppFps } from './AppFps.js';
 import { AppIcon } from './AppIcon.js';
 import { TodoController } from './TodoController.js';
 import { TodoFrameCustom } from './TodoFrameCustom.js';
@@ -15,8 +14,9 @@ export function TodoApp(el) {
 
   el.innerHTML = /* html */ `
     <header class="app-header">
-      <h1 class="title">VANILLA TODO</h1>
-      <p class="app-fps fps"></p>
+      <h1 class="title">
+        VANILLA TODO
+      </h1>
     </header>
     <div class="todo-frame -days"></div>
     <div class="app-collapsible">
@@ -31,7 +31,7 @@ export function TodoApp(el) {
     </div>
     <footer class="app-footer">
       <p>
-        VANILLA TODO &copy; 2020&ndash;2023 <a href="https://morrisbrodersen.de">Morris Brodersen</a>
+        VANILLA TODO &copy; 2020&ndash;2024 <a href="https://morrisbrodersen.de">Morris Brodersen</a>
         &mdash; A case study on viable techniques for vanilla web development.
         <a href="https://github.com/morris/vanilla-todo">About →</a>
       </p>
@@ -47,7 +47,6 @@ export function TodoApp(el) {
 
   el.querySelectorAll('.app-collapsible').forEach(AppCollapsible);
   el.querySelectorAll('.app-icon').forEach(AppIcon);
-  el.querySelectorAll('.app-fps').forEach(AppFps);
 
   TodoFrameDays(el.querySelector('.todo-frame.-days'));
   TodoFrameCustom(el.querySelector('.todo-frame.-custom'));

public/styles/app-header.css

@@ -6,15 +6,7 @@
 .app-header > .title {
   color: var(--header-text);
   font-size: 1em;
+  line-height: 1.25em;
   margin: 0;
-}
-
-.app-header > .fps {
-  position: absolute;
-  top: 10px;
-  right: 20px;
-  margin: 0;
-  font-size: 0.8em;
-  line-height: 1.5em;
-  color: var(--header-text);
+  text-align: center;
 }

public/styles/app-icon.css

@@ -1,15 +1,18 @@
 .app-icon {
   display: inline-block;
-  vertical-align: text-top;
+  vertical-align: baseline;
+  height: 1em;
 }
 
 .app-icon > svg {
   display: inline-block;
   width: 1em;
   height: 1em;
-  vertical-align: bottom;
+  vertical-align: middle;
   fill: currentcolor;
   transition: transform 0.1s ease-out;
+  position: relative;
+  top: -0.1em;
 }
 
 .app-icon.-r180 > svg {