From b65e65e40f48a482182cf37bcf9d8658968b5fbb Mon Sep 17 00:00:00 2001
From: s-hens <108551327+s-hens@users.noreply.github.com>
Date: Wed, 3 May 2023 20:49:03 +0100
Subject: [PATCH] Style tasks/matrix

---
 dist/index.html |  2 +-
 src/style.css   | 89 +++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 79 insertions(+), 12 deletions(-)
diff --git a/dist/index.html b/dist/index.html
index 94551eb..33ed41b 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -13,7 +13,7 @@
 <body>
 
     <header>
-        <h1><span class="material-icons-round">checklist</span> taskmatrix</h1>
+        <h1><span class="material-icons-round">task_alt</span> taskmatrix</h1>
         <nav>
             <button id="add-task-button"><span class="material-icons-round">add_circle</span>Add Task</button>
             <button id="cats-button"><span class="material-icons-round">create_new_folder</span>Categories</button>
diff --git a/src/style.css b/src/style.css
index a0e6cdf..b76a09c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,6 +3,7 @@
 :root {
     --white: #FDFDFD;
     --lightgrey: #F5F5F5;
+    --lightmedgrey: #b0b0b0;
     --medgrey: #6F6F6F;
     --darkgrey: #3D3D3D;
     --accent: #0065FD;
@@ -37,9 +38,14 @@ h2 {
     font-weight: 700;
 }
 
+h3 {
+    color: var(--accent);
+}
+
 h3, h4 {
-    margin: 0;
+    margin: 0 5px 0 0;
     font-weight: 700;
+    display: inline-block;
 }
 
 a:link, a:visited, a:active {
@@ -50,8 +56,24 @@ a:hover {
     text-decoration: none;
 }
 
+button:hover {
+    cursor: pointer;
+}
+
 .material-icons-round {
-    transform: translateY(3px);
+    color: var(--medgrey);
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--lightgrey);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--accent);
 }
 
 /* Header */
@@ -63,6 +85,11 @@ header  {
     grid-template-columns: 1fr auto;
 }
 
+h1 .material-icons-round {
+    color: var(--accent);
+    transform: translateY(3px);
+}
+
 nav {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -78,10 +105,6 @@ nav button {
     margin-left: 20px;
 }
 
-nav button:hover {
-    cursor: pointer;
-}
-
 nav button .material-icons-round {
     margin-right: 5px;
     transform: translateY(5px);
@@ -153,12 +176,12 @@ main {
 
 #a, #b, #c, #d {
     overflow: auto;
-    border: 1px solid var(--medgrey);
+    border: 1px solid var(--lightmedgrey);
     border-top: 0;
 }
 
 #a-head, #b-head, #c-head, #d-head {
-    border: 1px solid var(--medgrey);
+    border: 1px solid var(--lightmedgrey);
     border-bottom: 0;
 }
 
@@ -172,12 +195,56 @@ main {
 
 /* Tasks */
 
-.task, .task div {
-    border: 1px solid red;
+.task {
+    padding: 10px;
+    border-bottom: 1px solid var(--lightmedgrey);
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    grid-template-rows: auto auto auto;
+    align-items: center;
 }
 
-.done {
+.task:last-child {
+    border: 0;
+}
+
+.task button {
+    font-family: 'Nunito', sans-serif;
+    font-size: 1em;
+    font-weight: 700;
+    color: var(--darkgrey);
+    background-color: var(--white);
+    border: 0;
+    padding: 0;
+}
+
+.task button:hover .material-icons-round {
+    color: var(--accent);
+}
+
+.edit {
+    margin-right: 10px;
+}
+
+.task-deadline {
+    grid-area: 2 / 1 / 3 / 5;
+}
+
+.task-category {
+    grid-area: 3 / 1 / 4 / 5;
+}
+
+.task-notes {
+    grid-area: 4 / 1 / 5 / 5;
+}
+
+input[type="checkbox"] {
+    margin-right: 10px;
+}
+
+.done, .done h3, .done h4 {
     text-decoration: line-through;
+    color: var(--medgrey);
 }
 
 /* Footer */
