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/base.css

@@ -1,6 +1,6 @@
 @font-face {
-  font-family: 'Hack Nerd Font Mono';
-  src: url('/data/resources/HackNerdFontMono-Regular.woff');
+  font-family: "Hack Nerd Font Mono";
+  src: url("/data/resources/HackNerdFontMono-Regular.woff");
   font-weight: normal;
   font-style: normal;
 }
@@ -36,7 +36,7 @@ li,
 select,
 option,
 span {
-  font-family: 'Hack Nerd Font Mono', Hack, sans-serif;
+  font-family: "Hack Nerd Font Mono", Hack, sans-serif;
   padding: 0;
   margin: 0;
 }
@@ -84,7 +84,7 @@ p {
 }
 
 small {
-  font-size: .75vw;
+  font-size: 0.75vw;
 }
 
 a,
@@ -307,6 +307,18 @@ table tr td label {
   border-radius: 50%;
 }
 
+.link {
+  color: orange;
+  cursor: pointer;
+}
+
+.divLink {
+  text-decoration: none;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
 .underline {
   text-decoration: underline;
   text-decoration-thickness: 3px;
@@ -408,7 +420,6 @@ input[type="radio"] {
 
   height: 29px;
   width: max-content;
-
 }
 
 .checkmark {
@@ -417,7 +428,6 @@ input[type="radio"] {
   left: 0;
   height: 25px;
   width: 25px;
-
 }
 
 .form_checkbox_container input {
@@ -681,7 +691,6 @@ input[type="file"] {
   width: 90%;
   display: grid;
   grid-template-columns: 50% 50%;
-
 }
 
 .grid-2x1 .form_card,
@@ -755,9 +764,6 @@ hr {
   margin-bottom: 5px;
 }
 
-
-
-
 @media screen and (max-width: 992px) {
   body {
     padding-bottom: 160px;

css/dark.css

@@ -32,7 +32,7 @@ nav ul li a {
 }
 
 code {
-  background-color: #2F2F2F;
+  background-color: #2f2f2f;
 }
 
 .line {
@@ -149,6 +149,12 @@ select:-webkit-autofill {
   border: 2px solid white;
 }
 
+.std_border,
+.med_border,
+.sm_border {
+  border-color: white;
+}
+
 @media screen and (max-width: 992px) {
   nav {
     border-bottom: none;

css/light.css

@@ -32,7 +32,7 @@ nav ul li a {
 }
 
 code {
-  background-color: #C6C6C6;
+  background-color: #c6c6c6;
 }
 
 .line {
@@ -149,6 +149,12 @@ select:-webkit-autofill {
   border: 2px solid black;
 }
 
+.std_border,
+.med_border,
+.sm_border {
+  border-color: black;
+}
+
 @media screen and (max-width: 992px) {
   nav {
     border-bottom: none;

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 **********/