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;
+ }
+}