From e7a8011e24716effd2ea3de102ad91a3f77004b7 Mon Sep 17 00:00:00 2001 From: Abylai Date: Thu, 20 Apr 2023 19:48:52 +0500 Subject: [PATCH] init:tasl clean code --- index.html | 78 +++++++++++++++++++++++++++++++++++++++++++----------- style.css | 42 +++++++++++++++-------------- 2 files changed, 84 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index ef4aa1f60ca..886c6fe8350 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,65 @@ - -Todo App - - - + + + + Todo App + + + -
Want more details?
-

-

Todo

-

Completed

-
- +
+ matrix + Want more details +
+
+

+ +

+ + +
+

+ +

Todo

+ + +

Completed

+ +
+ \ No newline at end of file diff --git a/style.css b/style.css index ab36227705e..c24c899dd49 100644 --- a/style.css +++ b/style.css @@ -4,21 +4,23 @@ body { color: #333; font-family: Lato, sans-serif; } -.aaa { +.matrix { width: 500px; margin: 0 auto; display: block; text-align: right; } -.aaa img { +.matrix-img { width: 100%; } -.aaa .more_inf { +.matrix, +.more-inf { font-family: fantasy, cursive; } @media (max-width:768px) { -.aaa { text-align: center; +.matrix { + text-align: center; } } .centered-main-page-element { @@ -38,13 +40,14 @@ ul { margin:0; padding: 0px; } -li, h3 { +.add-item, +.header-title { list-style:none; } input,button{ outline:none; } -button { +.button { background: none; border: 0px; color: #888; @@ -53,12 +56,12 @@ button { font-family: Lato, sans-serif; cursor: pointer; } -button:hover { +.button:hover { color: #3a3A3a; } /* Heading */ -h3, -label[for='new-task'] { +.header-title, +.task-label { color: #333; font-weight: 700; font-size: 15px; @@ -93,7 +96,7 @@ input#new-task { } /* Task list */ -li { +.add-item { overflow: hidden; padding: 20px 0; border-bottom: 1px solid #eee; @@ -102,34 +105,34 @@ li { justify-content: space-between; align-items: center; } -li > * { +.add-item > * { vertical-align: middle; } -li > input[type="checkbox"] { +.add-item > input[type="checkbox"] { margin: 0 10px; } -li > label { +.add-item > label { padding-left: 10px; box-sizing: border-box; font-size: 18px; width: 226px; } -li > input[type="text"] { +.add-item > input[type="text"] { width: 226px } -button.delete img { +.delete img { height: 2em; transform: rotateZ(45deg); transition: transform 200ms ease-in; } -button.delete img:hover { +.delete img:hover { transform: rotateZ(0); } /* Completed */ ul#completed-tasks label { - text-decoration: line-through + text-decoration: line-through; color: #888; } @@ -138,11 +141,10 @@ ul li input[type=text] { display:none } -ul li.editMode input[type=text] { +.editMode input[type=text] { display:inline-block; width:224px } - -ul li.editMode label { +.editMode label { display:none; } \ No newline at end of file