partially implemented todo tracker

css/base.css

@@ -19,6 +19,7 @@ h2,
 h3,
 h4,
 h5,
+h6,
 p,
 small,
 label,
@@ -61,6 +62,11 @@ h5 a {
   font-size: 1.5vw;
 }
 
+h6,
+h6 a {
+  font-size: 1.25vw;
+}
+
 p,
 a,
 label,
@@ -167,32 +173,17 @@ code {
   margin-bottom: 5px;
 }
 
-.row_no_margin {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin: 0;
-}
-
-.row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin: 15px 0px 15px 0px;
-}
-
 .center-h {
   margin: 0 auto;
 }
 
-.article_filters form .row_no_margin {
+.article_filters form .row_space_between {
   display: flex;
   align-items: center;
   margin-top: 25px;
 }
 
-.article_filters form .row_no_margin p {
+.article_filters form .row_space_between p {
   margin-bottom: 0;
   padding-bottom: 0;
 }
@@ -755,8 +746,62 @@ hr {
   margin-bottom: 5px;
 }
 
-.margin_right {
-  margin-right: 15px;
+.todo_display {
+  margin: 0 auto;
+  margin-top: 25px;
+  width: 80%;
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.todo_actions {
+  padding: 15px;
+  border: 2px solid white;
+  border-radius: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 25px;
+}
+
+.todo_actions form {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.todo_category_window {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow-x: scroll;
+  overflow-y: none;
+}
+
+.todo_category {
+  display: block;
+  min-width: 400px;
+  margin-right: 50px;
+  overflow-y: scroll;
+  overflow-x: none;
+}
+
+.todo_category h4 {
+  text-align: center;
+  position: relative;
+}
+
+.todo_list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.todo_item {
+  width: 100%;
 }
 
 @media screen and (max-width: 992px) {
@@ -788,6 +833,11 @@ hr {
     font-size: 3vw;
   }
 
+  h6,
+  h6 a {
+    font-size: 2.5vw;
+  }
+
   p,
   a,
   label,
@@ -827,7 +877,7 @@ hr {
     flex-direction: row-reverse;
   }
 
-  nav .row_no_margin {
+  nav .row_space_between .no_margin {
     flex-direction: row-reverse;
   }
 

css/rewrite.css

@@ -0,0 +1,95 @@
+/********** Borders & Outlines **********/
+.std_border,
+.med_border,
+.sm_border {
+  border-radius: 9px;
+}
+
+.std_border {
+  border: 3px solid white;
+}
+
+.med_border {
+  border: 2px solid white;
+}
+
+.sm_border {
+  border: 1px solid white;
+}
+
+.debug {
+  border: 1px solid red;
+}
+
+/********** Rows & Columns **********/
+.row {
+  display: flex;
+  flex-direction: row;
+}
+
+.row_space_between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin: 15px 0px 15px 0px;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.center {
+  align-items: center;
+  justify-content: center;
+}
+
+/********** Margins & Padding **********/
+.margin {
+  margin: 15px;
+}
+
+.no_margin {
+  margin: 0;
+}
+
+.top_margin {
+  margin-top: 15px;
+}
+
+.right_margin {
+  margin-right: 15px;
+}
+
+.bottom_margin {
+  margin-bottom: 15px;
+}
+
+.left_margin {
+  margin-left: 15px;
+}
+
+.padding {
+  padding: 15px;
+}
+
+.no_padding {
+  padding: 0;
+}
+
+.top_padding {
+  padding-top: 15px;
+}
+
+.right_padding {
+  padding-right: 15px;
+}
+
+.bottom_padding {
+  padding-bottom: 15px;
+}
+
+.left_padding {
+  padding-left: 15px;
+}