Styling cleanup

cells.css

@@ -22,7 +22,13 @@
   transition: background-color .15s ease;
   font-size: 1em;
 }
-.cell:hover h1 { text-shadow: 0 0 .2em }
+.cell.today h1 {
+  border-radius: 2em;
+  background: var(--today);
+  border: .2em solid var(--today);
+  margin: -.2em;
+}
+.cell:hover h1 { text-shadow: 0 0 .2em var(--shadow); }
 
 /* Fixed heights for cells and labels */
 .week-row .cell, .week-row .week-label { height: var(--cell-h) }

colors.css

@@ -8,6 +8,7 @@
   --weekend: #888;
   --firstday: #000;
   --select: #aaf;
+  --shadow: #fff;
   --label-bg: #fafbfe;
   --label-bg-rgb: 250, 251, 254;
 }
@@ -50,6 +51,7 @@
     --weekend: #999;
     --firstday: #fff;
     --select: #44f;
+    --shadow: #888;
     --label-bg: #1a1d25;
     --label-bg-rgb: 26, 29, 37;
   }
@@ -85,7 +87,7 @@
 
 /* Selection styles */
 .weekend { color: var(--weekend) }
-.firstday { color: var(--firstday); text-shadow: 0 0 .1em; }
+.firstday { color: var(--firstday); text-shadow: 0 0 .1em #fff; }
 
 .selected {
   background: var(--select);
@@ -93,10 +95,3 @@
   box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
 }
 .selected .event { opacity: .7 }
-
-.today h1 {
-  border-radius: 2em;
-  background: var(--today);
-  border: .2em solid var(--today);
-  margin: -.2em;
-}

events.css

@@ -29,6 +29,7 @@
   height: 1.2em;
   align-self: center;     /* vertically center within the overlay row */
   justify-self: stretch;  /* stretch across chosen grid columns */
+  text-align: center;
   pointer-events: auto;   /* clickable despite overlay having none */
   z-index: 1;
 }

index.html

@@ -11,7 +11,7 @@
 <header>
     <h1 id="title">Calendar</h1>
     <div class="header-controls">
-        <label>Selection: <input type="text" id="selected-date" class="date-input" readonly></label>
+        <input type="text" id="selected-date" class="date-input" readonly>
         <div id="today-date" class="today-date"></div>
     </div>
 </header>