implemented preview of article markdown via AJAX

css/base.css

@@ -168,6 +168,7 @@ code {
 .view_card {
   margin: 0 auto;
   margin-top: 50px;
+  margin-bottom: 50px;
   width: 70%;
   padding: 18px;
   height: max-content;
@@ -335,6 +336,7 @@ textarea {
   margin: 15px 15px 15px 0px;
   box-sizing: border-box;
   transition-duration: 500ms;
+  resize: none;
 }
 
 input:focus,
@@ -348,10 +350,12 @@ textarea:hover {
 
 textarea {
   border-radius: 18px;
-  height: 500px;
+  height: 70%;
 }
 
-.checkboxes {}
+.checkboxes {
+  height: max-content;
+}
 
 input[type="radio"] {
   display: none;
@@ -639,6 +643,58 @@ input[type="file"] {
   display: none;
 }
 
+::selection {
+  color: black;
+  background: orange;
+}
+
+.grid-2x1 {
+  margin: 0 auto;
+  width: 90%;
+  display: grid;
+  grid-template-columns: 50% 50%;
+
+}
+
+.grid-2x1 .form_card,
+.grid-2x1 #md_preview {
+  width: 80%;
+  height: 90%;
+  overflow-y: scroll;
+  box-sizing: border-box;
+}
+
+.grid-2x1 #composer {
+  padding-top: 150px;
+}
+
+#md_preview {
+  border: none;
+  display: block;
+}
+
+.full-height {
+  height: 700px;
+}
+
+::-webkit-scrollbar {
+  background-color: black;
+  border-radius: 18px;
+}
+
+::-webkit-scrollbar-button {
+  display: none;
+}
+
+::-webkit-scrollbar-track {
+  display: none;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: orange;
+  border-radius: 9px;
+}
+
 @media screen and (max-width: 992px) {
   h1 {
     font-size: 10vw;