diff src/WeekGuide.ts @ 17:472003015880

restyle using css grid
author drewp@bigasterisk.com
date Fri, 07 Jun 2024 21:22:37 -0700
parents deb0c25655eb
children
line wrap: on
line diff
--- a/src/WeekGuide.ts	Thu Jun 06 17:52:46 2024 -0700
+++ b/src/WeekGuide.ts	Fri Jun 07 21:22:37 2024 -0700
@@ -12,20 +12,16 @@
   static styles = [
     shared,
     css`
-      :host,
-      :host > div {
-        display: inline-block;
-      }
-      .wday > span {
+      span {
         display: inline-block;
         background: #282a36;
-        padding: 5px;
-        border: 3px outset #333;
+        padding: 2px;
+        border: 2px outset #333;
         text-align: center;
         vertical-align: middle;
         border-radius: 10px;
       }
-      .wday > span.today {
+      span.today {
         background: #282a36;
         border-color: #ff79c6;
         color: #ff79c6;
@@ -37,17 +33,13 @@
     const day = format(new Date(), "EEE").toLowerCase();
 
     return html`
-      <div class="wday">
-        <span class="wday-sun ${day == "sun" ? "today" : ""}">Sunday</span>
-        <span class="wday-mon ${day == "mon" ? "today" : ""}">Monday</span>
-        <span class="wday-tue ${day == "tue" ? "today" : ""}">Tuesday</span>
-        <span class="wday-wed ${day == "wed" ? "today" : ""}">Wednesday</span>
-        <span class="wday-thu ${day == "thu" ? "today" : ""}">Thursday</span>
-        <span class="wday-fri ${day == "fri" ? "today" : ""}">Friday</span>
-        <span class="wday-sat ${day == "sat" ? "today" : ""}">Saturday</span>
-      </div>
+      <span class="wday-sun ${day == "sun" ? "today" : ""}">Sunday</span>
+      <span class="wday-mon ${day == "mon" ? "today" : ""}">Monday</span>
+      <span class="wday-tue ${day == "tue" ? "today" : ""}">Tuesday</span>
+      <span class="wday-wed ${day == "wed" ? "today" : ""}">Wednesday</span>
+      <span class="wday-thu ${day == "thu" ? "today" : ""}">Thursday</span>
+      <span class="wday-fri ${day == "fri" ? "today" : ""}">Friday</span>
+      <span class="wday-sat ${day == "sat" ? "today" : ""}">Saturday</span>
     `;
   }
 }
-
-