still some bugs and auth issues to iron out. need to implement a new action button/bar, the card for moments in a space, creating new moments and essays, dynamically refreshing the spaces view when a new post is created.

css/rewrite.css

@@ -1,8 +1,32 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 /********** Width & Sizing **********/
 .full_width {
   width: 100%;
 }
 
+.std_width {
+  width: 70%;
+}
+
+.med_width {
+  width: 40%;
+}
+
+.sm_width {
+  width: 25%;
+}
+
 /********** Borders & Outlines **********/
 .std_border,
 .med_border,
@@ -11,15 +35,15 @@
 }
 
 .std_border {
-  border: 3px solid white;
+  border: 3px solid black;
 }
 
 .med_border {
-  border: 2px solid white;
+  border: 2px solid black;
 }
 
 .sm_border {
-  border: 1px solid white;
+  border: 1px solid black;
 }
 
 .debug {
@@ -32,12 +56,8 @@
   flex-direction: row;
 }
 
-.row_space_between {
-  display: flex;
+.space_between {
   justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin: 15px 0px 15px 0px;
 }
 
 .column {
@@ -46,6 +66,7 @@
 }
 
 .center {
+  margin: 0 auto;
   align-items: center;
   justify-content: center;
 }
@@ -103,74 +124,67 @@
   padding-left: 15px;
 }
 
-/********** FORMS **********/
-
-
-/********** TODO ITEMS **********/
-.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;
-
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-}
-
-.todo_category_window {
-  display: flex;
-  flex-direction: row;
+/************ Modals ************/
+#stdModal {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
-  overflow-x: scroll;
-  overflow-y: none;
-}
+  display: none;
+  backdrop-filter: blur(20px);
 
-.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;
+  justify-content: center;
   align-items: center;
 }
 
-.todo_item {
-  width: 100%;
+#stdModal>* {}
+
+/******** Action Buttons ********/
+.circleLayout {
+  width: 350px;
+  /* Adjust as needed */
+  height: 350px;
+  border-radius: 50%;
+  /* Important for positioning children */
+  position: fixed;
+  bottom: 50px;
+  right: 50px;
+  overflow: hidden;
 }
 
-.todo_item_details {
-  display: none;
+.actionButton {
+  position: absolute;
+
+  border-radius: 50%;
+  width: 75px;
+  height: 75px;
+  background-color: orange;
+  color: black;
 }
 
-.modal_activation_area {}
+#actionButton {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 
-.modal_activation_area:hover {
-  cursor: pointer;
+#newPost {
+  top: 50%;
+  left: 0%;
+  transform: translate(0%, -50%);
+}
+
+#newSpace {
+  top: 15%;
+  left: 15%;
+  transform: translate(-15%, -15%);
+}
+
+#filterSort {
+  top: 0%;
+  left: 50%;
+  transform: translate(-50%, 0%);
 }
 
 /********** Animations **********/