sync, implemented sort, viewing user pages & articles written, updating db

css/base.css

@@ -60,12 +60,6 @@ label,
   font-size: 1vw;
 }
 
-p::after {
-  content: "";
-  display: inline-block;
-  width: 100%;
-}
-
 small {
   font-size: .75vw;
 }
@@ -171,9 +165,9 @@ code {
 .view_card {
   margin: 0 auto;
   margin-top: 50px;
+  width: 70%;
   padding: 18px;
   height: max-content;
-  width: 70%;
   border-radius: 18px;
 
   display: flex;
@@ -184,6 +178,11 @@ code {
   transition-duration: 1s;
 }
 
+.article_card {
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .form_card {
   width: 50%;
 }
@@ -292,7 +291,8 @@ table tr td label {
   text-decoration-color: orange;
 }
 
-#theme-toggle {
+#theme-toggle,
+label i {
   width: 32px;
   height: 32px;
   border: none;
@@ -300,16 +300,25 @@ table tr td label {
   font-size: 1.5vw;
 }
 
-#theme-toggle * {
+#theme-toggle *,
+label i {
   transition-duration: 500ms;
 }
 
-#theme-toggle *:hover {
+#theme-toggle *:hover,
+label i:hover {
   color: orange;
 }
 
+label i {
+  width: 32px;
+  height: 32px;
+  font-size: 1.5vw;
+  transition-duration: 500ms;
+}
+
 .article {
-  width: 50%;
+  width: 60%;
   margin: 0 auto;
 }
 
@@ -589,3 +598,46 @@ input[type="file"] {
 [data-href] {
   cursor: pointer;
 }
+
+.article_cards_grid {
+  width: 70%;
+  margin: 0 auto;
+  display: block;
+}
+
+.article_grid {
+  display: grid;
+  grid-template-columns: 15% 85%;
+}
+
+.article_toc {
+  margin-right: 15px;
+}
+
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+  /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}