diff --git a/demo-to-do/index.html b/demo-to-do/index.html index 0db7642..b79686b 100644 --- a/demo-to-do/index.html +++ b/demo-to-do/index.html @@ -32,6 +32,7 @@ type="text" placeholder="Try typing 'Buy milk'" pattern="[a-z|A-Z|0-9| |,|;|-]+" + title="Click to start adding a task" /> diff --git a/demo-to-do/styles/base.css b/demo-to-do/styles/base.css index 7e7bab3..fc09f58 100644 --- a/demo-to-do/styles/base.css +++ b/demo-to-do/styles/base.css @@ -24,9 +24,3 @@ input, button { font-family: inherit; font-size: inherit; } - -@media print { - body::before { - content: 'Print version!'; - } -} diff --git a/demo-to-do/styles/to-do-styles.css b/demo-to-do/styles/to-do-styles.css index b2c2362..5adbe9a 100644 --- a/demo-to-do/styles/to-do-styles.css +++ b/demo-to-do/styles/to-do-styles.css @@ -27,6 +27,7 @@ form { .new-task-form:hover { background-color: var(--task-hover-background); + outline: 2px solid var(--color); } .new-task-form label { @@ -34,11 +35,32 @@ form { flex-shrink: 0; } +@media (max-width: 450px) { + body { + font-size: 12pt; + --spacing: .4rem; + } + + .new-task-form label { + width: 1.5rem; + white-space: nowrap; + overflow: hidden; + } +} + +@media (min-width: 2000px) { + body { + font-size: 18pt; + --spacing: 1rem; + } +} + .new-task-form #new-task { padding: var(--spacing); opacity: 0; flex: 1; color: var(--color); + width: 100%; } .new-task-form:focus-within { @@ -131,3 +153,36 @@ form { color: var(--delete-color); border-color: var(--delete-color); } + +@media print { + body { + background: none; + } + + form { + margin: 0; + max-width: none; + } + + .new-task-form { + display: none; + } + + #tasks { + margin-top: 0; + } + + .task { + background: none; + border-bottom: 1px solid; + border-radius: 0; + } + + .task:hover { + background: none; + } + + .task .delete { + display: none; + } +}