diff --git a/src/components/CheckList.module.scss b/src/components/CheckList.module.scss index a44dbb4..2b0674e 100644 --- a/src/components/CheckList.module.scss +++ b/src/components/CheckList.module.scss @@ -1,11 +1,27 @@ .CheckList { --check-list-item-pad: 10px; --check-list-item-gap: 8px; + --check-list-color-shadow: #888; display: grid; grid-template-rows: auto 1fr; height: 100vh; + > span:first-of-type { + display: grid; + align-items: center; + grid-template-columns: auto auto 1fr; + gap: 2px; + box-shadow: 0 0px 20px -5px var(--check-list-color-shadow); + padding: var(--check-list-item-pad); + > span { + font-size: 1.2em; + } + :last-child { + justify-self: end; + } + } + ul { display: flex; list-style: none; diff --git a/src/components/CheckList.tsx b/src/components/CheckList.tsx index 69aea2c..7a1bc87 100644 --- a/src/components/CheckList.tsx +++ b/src/components/CheckList.tsx @@ -4,6 +4,7 @@ import planText from '../data/five-day.txt?raw' import { CheckListItem, isRangeComplete, versionLink } from '../model' import { loadCheckListState, saveCheckListState } from '../data' import { CheckBox } from './CheckBox' +import logo from '../assets/favicon-32x32.png' export function CheckList() { const checkList: CheckListItem[] = planText @@ -26,17 +27,20 @@ export function CheckList() { return (