From 881b44f1566e44d94bdba0ccd24b8c51d63f7bf3 Mon Sep 17 00:00:00 2001
From: Morris Brodersen <mb@morrisbrodersen.de>
Date: Fri, 2 Feb 2024 17:47:36 +0100
Subject: [PATCH] remove fps, improve icon css

---
 public/index.html            |  1 -
 public/scripts/AppFps.js     | 36 ------------------------------------
 public/scripts/TodoApp.js    |  9 ++++-----
 public/styles/app-header.css | 12 ++----------
 public/styles/app-icon.css   |  7 +++++--
 5 files changed, 11 insertions(+), 54 deletions(-)
 delete mode 100644 public/scripts/AppFps.js

diff --git a/public/index.html b/public/index.html
index 0671a40..a0a0ad6 100644
--- a/public/index.html
+++ b/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" />
diff --git a/public/scripts/AppFps.js b/public/scripts/AppFps.js
deleted file mode 100644
index 7a77f40..0000000
--- a/public/scripts/AppFps.js
+++ /dev/null
@@ -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 = [];
-  }
-}
diff --git a/public/scripts/TodoApp.js b/public/scripts/TodoApp.js
index 90ac838..e9fb8e7 100644
--- a/public/scripts/TodoApp.js
+++ b/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'));
diff --git a/public/styles/app-header.css b/public/styles/app-header.css
index 9541c62..4f2f26f 100644
--- a/public/styles/app-header.css
+++ b/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;
 }
diff --git a/public/styles/app-icon.css b/public/styles/app-icon.css
index 0707940..b68dcf2 100644
--- a/public/styles/app-icon.css
+++ b/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 {