Skip to content

Commit

Permalink
Style tasks/matrix
Browse files Browse the repository at this point in the history
  • Loading branch information
s-hens committed May 3, 2023
1 parent ce64199 commit b65e65e
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 12 deletions.
2 changes: 1 addition & 1 deletion dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
89 changes: 78 additions & 11 deletions src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
:root {
--white: #FDFDFD;
--lightgrey: #F5F5F5;
--lightmedgrey: #b0b0b0;
--medgrey: #6F6F6F;
--darkgrey: #3D3D3D;
--accent: #0065FD;
Expand Down Expand Up @@ -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 {
Expand All @@ -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 */
Expand All @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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;
}

Expand All @@ -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 */
Expand Down

0 comments on commit b65e65e

Please sign in to comment.