style recycled

Author: Softgod4

index.html

@@ -14,17 +14,17 @@
         <article class="header flex flex-col">
             <h1>Rust 🦀 and WebAssembly 🕸</h1>
             <div class="actions flex flex-row">
-                <p>Todo by Softgod 📝</p>
+                <p class="text-center">Todo by Softgod 📝</p>
             </div>
         </article>
-        <div class="todo">
-            <div id="rust-logo">
+        <div class="todo flex flex-col justify-center align-start">
+            <div id="rust-logo" class="w-100 flex justify-center align-center">
                 <img src="/image/rust-logo.png" alt="rust-logo">
             </div>
-            <div class="tasks">
+            <div class="tasks w-100">
                 <article class="tasks-engine flex justify-between align-center">
-                    <h2>Tasks</h2>
-                    <button id="remove-all">Remove first task</button>
+                    <h2 class="text-start">Tasks</h2>
+                    <button class="text-start" id="remove-all">Remove first task</button>
                 </article>
                 <div class="tasks-list">
                     <label class="tasks-list__item">
@@ -67,7 +67,7 @@ <h2>Tasks</h2>
             </div>
             <div class="add-task flex justify-start align-center">
                 <input type="text" placeholder="todo name" id="input-task">
-                <button id="add-task">Add task</button>
+                <button id="add-task" class="w-100">Add task</button>
             </div>
         </div>
     </div>

style/global.css

@@ -96,7 +96,7 @@ html {
 body {
   font-family: "Inter", sans-serif;
   font-optical-sizing: auto;
-  font-weight: 400;
+  font-weight: 300;
   font-size: 14px;
   background: #252627;
 }
@@ -173,7 +173,9 @@ a:hover {
   }
 }
 
-button, input[type=submit], input[type=reset] {
+button,
+input[type=submit],
+input[type=reset] {
   background: none;
   color: inherit;
   border: none;
@@ -202,10 +204,26 @@ button, input[type=submit], input[type=reset] {
   align-items: center;
 }
 
+.align-start {
+  align-items: start;
+}
+
 .flex-col {
   flex-direction: column;
 }
 
 .flex-row {
   flex-direction: row;
+}
+
+.text-start {
+  text-align: start;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.w-100 {
+  width: 100%;
 }/*# sourceMappingURL=global.css.map */

style/global.css.map

@@ -94,10 +94,10 @@ html {
     height: 100%;
 }
 
-body {   
+body {
     font-family: "Inter", sans-serif;
     font-optical-sizing: auto;
-    font-weight: 400;
+    font-weight: 300;
     font-size: 14px;
     background: #252627;
 }
@@ -140,7 +140,7 @@ strong {
 
 input {
     outline: none;
-    box-sizing: border-box; 
+    box-sizing: border-box;
 }
 
 table {
@@ -173,19 +173,23 @@ a:hover {
     }
 }
 
-button, input[type="submit"], input[type="reset"] {
-	background: none;
-	color: inherit;
-	border: none;
-	padding: 0;
-	font: inherit;
-	cursor: pointer;
-	outline: inherit;
+button,
+input[type="submit"],
+input[type="reset"] {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
+
+// inline styles
 .flex {
     display: flex;
 }
@@ -202,10 +206,26 @@ button, input[type="submit"], input[type="reset"] {
     align-items: center;
 }
 
+.align-start {
+    align-items: start;
+}
+
 .flex-col {
     flex-direction: column;
 }
 
 .flex-row {
     flex-direction: row;
+}
+
+.text-start {
+    text-align: start;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.w-100 {
+    width: 100%;
 }

style/global.scss

@@ -4,7 +4,6 @@
   top: 0;
   background: #ffffff;
   padding: 42px 28px;
-  width: auto;
   text-align: start;
   margin: 16px;
   z-index: 9;
@@ -22,9 +21,7 @@
   justify-content: end;
 }
 .header div p {
-  text-align: center;
   font-size: 14px;
-  font-weight: 300;
   color: #98A2B3;
   cursor: pointer;
 }
@@ -34,26 +31,17 @@
 
 .todo {
   background: #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: start;
-  flex-direction: column;
   border-radius: 4px;
   padding: 22px 28px;
   border: 1px solid hsl(210, 4%, 30%);
   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 }
-.todo .tasks {
-  width: 100%;
-}
 .todo .tasks-engine {
   margin-top: 12px;
 }
 .todo .tasks-engine h2 {
   color: #667085;
-  text-align: start;
   font-size: 12px;
-  font-weight: 300;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -62,7 +50,6 @@
   color: #667085;
   text-align: start;
   font-size: 12px;
-  font-weight: 300;
   cursor: pointer;
   -webkit-text-decoration: underline dotted;
           text-decoration: underline dotted;
@@ -80,7 +67,6 @@
   align-items: center;
   position: relative;
   font-size: 14px;
-  font-weight: 300;
   color: #1D2939;
   cursor: pointer;
   transition: all 0.12s;
@@ -89,7 +75,7 @@
   background-color: #0d7261;
 }
 .todo .tasks-list__item:hover p {
-  color: white;
+  color: #ffffff;
 }
 .todo .tasks-list__item article input[type=checkbox]:checked {
   -moz-appearance: none;
@@ -109,14 +95,13 @@
   height: 19px;
 }
 .todo .add-task {
-  width: 100%;
   margin-top: 16px;
 }
 .todo .add-task button {
   width: 50%;
   height: 34px;
   background: #1D2939;
-  color: white;
+  color: #ffffff;
   padding: 8px 12px;
   border: 1px solid #dfe1e5;
   border-left: none;
@@ -134,9 +119,6 @@
 }
 
 #rust-logo {
-  width: 100%;
-  display: flex;
-  justify-content: center;
   transition: all 0.5s;
   position: relative;
   left: 0;
@@ -152,6 +134,5 @@
 .not-valid {
   margin-top: 12px;
   font-size: 16px;
-  font-weight: 300;
   color: #1D2939;
 }/*# sourceMappingURL=main.css.map */