v0.1.0 completed. only the owner can create new articles, users can modify their password, username, email, or delete their account, there's auth and permissions preventing accessing other user's information, and more. onto the road to v0.2.0

css/base.css

@@ -161,17 +161,19 @@ code {
   margin-top: 50px;
   padding: 18px;
   height: max-content;
-  width: 60%;
+  width: 70%;
   border-radius: 18px;
 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+
+  transition-duration: 1s;
 }
 
 .form_card {
-  width: 40%;
+  width: 50%;
 }
 
 .form_card form {
@@ -292,7 +294,7 @@ textarea {
   height: 500px;
 }
 
-.form_tags {}
+.checkboxes {}
 
 .form_checkbox_container {
   display: block;
@@ -377,16 +379,82 @@ input[type="file"] {
   box-sizing: border-box;
 }
 
-@media (max-width: 980px) {
-  h1 {
-    font-size: 4vw;
-  }
-
-  p {
-    font-size: 2vw;
-  }
-
-  .card {
-    margin: 75% auto;
-  }
+.user_view {
+  width: 70%;
+  margin: 0 auto;
+}
+
+.user_view h1,
+.user_view .card_pic_box {
+  margin: 15px;
+}
+
+.user_view .line {
+  margin: 0px 0px 30px 0px;
+}
+
+.user_actions {
+  margin: 15px;
+  padding: 15px;
+  display: flex;
+  justify-content: space-evenly;
+  border-radius: 12px;
+}
+
+.form_card h3,
+.form_card h5 {
+  padding-bottom: 15px;
+}
+
+.profile_picture {
+  height: 128px;
+  width: auto;
+  border-radius: 50%;
+}
+
+/* The Modal (background) */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  backdrop-filter: blur(10px);
+}
+
+/* Modal Content */
+.form_card {
+  position: relative;
+}
+
+.modal_content {
+  display: fit-content;
+  margin: auto;
+  width: 40%;
+  height: max-content;
+}
+
+.modal_content .form_card {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* The Close Button */
+.modal_close {
+  position: absolute;
+  font-size: 48px;
+  top: 15px;
+  right: 30px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.modal_close:hover,
+.modal_close:focus {
+  color: orange;
+  cursor: pointer;
 }

css/dark.css

@@ -41,6 +41,7 @@ code {
 .article_card,
 .form_card {
   border: 5px solid white;
+  background-color: black;
 }
 
 .button {
@@ -82,3 +83,23 @@ textarea {
 .upload_button {
   border: 3px solid white;
 }
+
+/* .form_card:hover, */
+/* .form_card:focus, */
+/* .article_card:hover, */
+/* .article_card:focus { */
+/*   box-shadow: 0 2px 4px 0 white, 0 4px 8px 0 white; */
+/* } */
+
+.modal {
+  background-color: black;
+  background-color: rgba(0, 0, 0, 0.9);
+}
+
+.modal_close {
+  color: white;
+}
+
+.user_actions {
+  border: 3px solid white;
+}

css/light.css

@@ -41,6 +41,7 @@ code {
 .article_card,
 .form_card {
   border: 5px solid black;
+  background-color: white;
 }
 
 .button {
@@ -82,3 +83,23 @@ textarea {
 .upload_button {
   border: 3px solid black;
 }
+
+/* .form_card:hover, */
+/* .form_card:focus, */
+/* .article_card:hover, */
+/* .article_card:focus { */
+/*   box-shadow: 0 2px 4px 0 black, 0 4px 8px 0 black; */
+/* } */
+
+.modal {
+  background-color: white;
+  background-color: rgba(256, 256, 256, 0.9);
+}
+
+.modal_close {
+  color: black;
+}
+
+.user_actions {
+  border: 3px solid black;
+}