Added a few media queries for various screen sizes

MGLICH · Sep 6, 2022 · 31ec627 · 31ec627
1 parent 5bf550a
commit 31ec627
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 6 deletions.
diff --git 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"
         />
         <input type="submit" value="➡️" />
       </div>

diff --git 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
@@ -27,18 +27,40 @@ form {
 
 .new-task-form:hover {
   background-color: var(--task-hover-background);
+  outline: 2px solid var(--color);
 }
 
 .new-task-form label {
   cursor: text;
   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;
+  }
+}