made compose button when on articles view.

articles.php

@@ -67,4 +67,12 @@ if (isset($_POST['form_id'])) {
     }
 }
 
+if (($view == 'list' || $view == 'sort') && (isset($_COOKIE['role_id']) && $_COOKIE['role_id'] <= 3)) {
+    echo '
+        <div id="floating_compose">
+            <a href="articles.php?view=compose"><i class="nf nf-md-note_plus"></i></a>
+        </div>
+    ';
+}
+
 include_once 'components/foot.php';

css/base.css

@@ -723,6 +723,7 @@ hr {
   border-radius: 9px;
 }
 
+
 @media screen and (max-width: 992px) {
   body {
     padding-bottom: 160px;
@@ -810,7 +811,7 @@ hr {
   .article_cards_grid,
   .article,
   .user_view {
-    width: 90%;
+    width: 95%;
   }
 
   .user_actions {
@@ -874,6 +875,14 @@ hr {
   .grid-2x1>div:last-of-type {
     display: none;
   }
+
+  #floating_compose {
+    padding: 15px;
+    border-radius: 50%;
+    position: fixed;
+    bottom: 200px;
+    right: 25px;
+  }
 }
 
 @media screen and (min-width: 993px) {
@@ -886,4 +895,12 @@ hr {
 
     top: 0;
   }
+
+  #floating_compose {
+    padding: 15px;
+    border-radius: 50%;
+    position: fixed;
+    bottom: 50px;
+    right: 50px;
+  }
 }

css/dark.css

@@ -110,6 +110,27 @@ textarea {
   border: 3px solid white;
 }
 
+#floating_compose {
+  border: 2px solid white;
+}
+
+#floating_compose,
+#floating_compose * {
+  background-color: white;
+  color: black;
+  transition-duration: 500ms;
+}
+
+#floating_compose:hover,
+#floating_compose:hover * {
+  background-color: black;
+  color: orange;
+}
+
+#floating_compose:hover {
+  border: 2px solid orange;
+}
+
 @media screen and (max-width: 992px) {
   nav {
     border-bottom: none;

css/light.css

@@ -110,6 +110,27 @@ textarea {
   border: 3px solid black;
 }
 
+#floating_compose {
+  border: 2px solid black;
+}
+
+#floating_compose,
+#floating_compose * {
+  background-color: black;
+  color: white;
+  transition-duration: 500ms;
+}
+
+#floating_compose:hover,
+#floating_compose:hover * {
+  background-color: white;
+  color: orange;
+}
+
+#floating_compose:hover {
+  border: 2px solid orange;
+}
+
 @media screen and (max-width: 992px) {
   nav {
     border-bottom: none;