styling, improve fps

public/scripts/AppFps.js

@@ -2,6 +2,7 @@
 window.VT = window.VT || {};
 
 VT.AppFps = function (el) {
+  var sampleSize = 20;
   var times = [];
 
   tick();
@@ -11,20 +12,20 @@ VT.AppFps = function (el) {
 
     times.push(performance.now());
 
-    if (times.length < 60) return;
+    if (times.length <= sampleSize) return;
 
     var min = Infinity;
     var max = 0;
     var sum = 0;
 
-    for (var i = 1; i < 60; ++i) {
+    for (var i = 1; i < sampleSize + 1; ++i) {
       var delta = times[i] - times[i - 1];
       min = Math.min(min, delta);
       max = Math.max(max, delta);
       sum += delta;
     }
 
-    var fps = (60 / sum) * 1000;
+    var fps = (sampleSize / sum) * 1000;
 
     el.innerText =
       fps.toFixed(0) +

public/scripts/TodoApp.js

@@ -27,7 +27,7 @@ VT.TodoApp = function (el) {
     '  <p>',
     '    VANILLA TODO &copy 2020 <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>',
+    '    <a href="https://github.com/morris/vanilla-todo">About →</a>',
     '  </p>',
     '</footer>',
   ].join('\n');

public/scripts/TodoFrameCustom.js

@@ -119,7 +119,7 @@ VT.TodoFrameCustom = function (el) {
   }
 
   function updateHeight() {
-    var height = 400;
+    var height = 280;
     var container = el.querySelector('.container');
 
     var i, l;

public/scripts/TodoFrameDays.js

@@ -96,7 +96,7 @@ VT.TodoFrameDays = function (el) {
   }
 
   function updateHeight() {
-    var height = 400;
+    var height = 280;
     var container = el.querySelector('.container');
 
     for (var i = 0, l = container.children.length; i < l; ++i) {

public/styles/app-collapsible.css

@@ -6,6 +6,10 @@
   background: #eee;
 }
 
+.app-collapsible > .bar > .app-button:active {
+  background: #fff;
+}
+
 .app-collapsible > .body {
   transition: height 0.2s ease-out;
   overflow: hidden;

public/styles/app-footer.css

@@ -5,6 +5,10 @@
   color: #999;
 }
 
+.app-footer a {
+  color: #999;
+}
+
 .app-footer > p {
   margin: 0;
 }

public/styles/app-header.css

@@ -1,5 +1,5 @@
 .app-header {
-  background: #249;
+  background: #001f3f;
   padding: 10px 20px;
 }
 

public/styles/todo-day.css

@@ -26,7 +26,7 @@
 }
 
 .todo-day.-today > .header > .dayofweek {
-  color: #c22;
+  color: #85144b;
 }
 
 .todo-day.-today > .header > .date {