Mercurial > code > home > repos > front-door-display
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> `; } } - -