Added checklists to database, rendering and toggling items

static/less/main.less

@@ -23,13 +23,13 @@ html, body {
 }
 
 h1 {
-	margin-top: 0px;
 	font-size: 1.5em;
+	color: @header_1;
 }
 
 h2 {
-	margin-top: 32px;
 	font-size: 1.25em;
+	color: @header_1;
 }
 
 button {
@@ -352,10 +352,17 @@ header {
 }
 
 #markdown {
-	padding: 16px;
 	color: #333;
 	grid-area: content;
+
+	justify-self: center;
+	width: calc(100% - 32px);
 	max-width: 900px;
+	padding: 0.5rem;
+	border-radius: 8px;
+	margin-top: 8px;
+	margin-bottom: 0px;
+
 
 	table {
 		border-collapse: collapse;
@@ -379,6 +386,83 @@ header {
 	}
 }
 
+#checklist {
+	grid-area: checklist;
+	color: #333;
+
+	justify-self: center;
+	width: calc(100% - 32px);
+	max-width: 900px;
+	padding: 0.5rem;
+	border-radius: 8px;
+	margin-top: 8px;
+	margin-bottom: 0px;
+
+	.checklist-group {
+		margin-top: 1em;
+		font-weight: bold;
+
+	}
+
+	.checklist-item {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		align-items: center;
+		margin-top: 0.50em;
+		
+		&.checked {
+			text-decoration: line-through;
+			color: #888;
+		}
+
+		input[type="checkbox"] {
+			margin-left: 0px;
+			margin-right: 8px;
+
+			-webkit-appearance: none;
+			appearance: none;
+			background-color: #fff;
+			margin: 0 8px 0 0;
+			font: inherit;
+			color: currentColor;
+			width: 1.25em;
+			height: 1.25em;
+			border: 0.15em solid currentColor;
+			border-radius: 0.15em;
+			transform: translateY(-0.075em);
+
+			display: grid;
+			place-content: center;
+		}
+
+		input[type="checkbox"].ok {
+			border: 0.15em solid #54b356;
+		}
+
+		input[type="checkbox"].ok::before {
+			box-shadow: inset 1em 1em #54b356;
+		}
+		
+
+		input[type="checkbox"]::before {
+			content: "";
+			width: 0.70em;
+			height: 0.70em;
+			transform: scale(0);
+			transition: 120ms transform ease-in-out;
+			box-shadow: inset 1em 1em @checkbox_1;
+		}
+
+		input[type="checkbox"]:checked::before {
+			transform: scale(1);
+		}
+
+		label {
+			user-select: none;
+		}
+	}
+}
+
 /* ============================================================= *
  * Textarea replicates the height of an element expanding height *
  * ============================================================= */
@@ -555,6 +639,7 @@ header {
 		"tree child-nodes"
 		"tree name"
 		"tree content"
+		"tree checklist"
 		"tree files"
 		"tree blank"
 		;
@@ -565,6 +650,7 @@ header {
 		min-content /* child-nodes */
 		min-content /* name */
 		min-content /* content */
+		min-content /* checklist */
 		min-content /* files */
 		1fr; /* blank */
 	color: #fff;
@@ -597,6 +683,7 @@ header {
 		"child-nodes"
 		"name"
 		"content"
+		"checklist"
 		"files"
 		"blank"
 		;
@@ -607,9 +694,14 @@ header {
 		min-content /* child-nodes */
 		min-content /* name */
 		min-content /* content */
+		min-content /* checklist */
 		min-content /* files */
 		1fr; /* blank */
 	#tree { display: none }
+
+	#checklist {
+		padding: 16px;
+	}
 }// }}}
 .layout-keys {
 	display: grid;
@@ -681,7 +773,7 @@ header {
 		justify-self: start;
 	}
 
-	#file-section {
+	#file-section, #checklist, #markdown {
 		width: calc(100% - 32px);
 		padding: 16px;
 		margin-left: 16px;

static/less/theme.less

@@ -4,6 +4,11 @@
 @accent_2: #ecbf00;
 @accent_3: #c84a37;
 
+@header_1: #518048;
+@header_2: #518048;
+
+@checkbox_1: #666;
+
 /*
 @theme_gradient: linear-gradient(to right, #009fff, #ec2f4b);
 @theme_gradient: linear-gradient(to right, #f5af19, #f12711);