Finish table of contents and pagination

assets/css/partials/card.css

@@ -36,11 +36,7 @@
 .card .demo {
   display: inline-flex;
   align-items: center;
-}
-
-.card .read-more svg,
-.card .demo svg {
-  margin-left: 0.25rem;
+  column-gap: 0.25rem;
 }
 
 .card .demo {

assets/css/partials/pagination.css

@@ -0,0 +1,41 @@
+.pagination {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+}
+
+.pagination {
+  display: flex;
+  column-gap: 1rem;
+}
+
+.pagination .pagination ul,
+.pagination li {
+  list-style: none;
+}
+
+.pagination a {
+  border-radius: 0.5625rem;
+  background-color: #8b8b8b;
+  color: var(--white);
+  padding: 0.25rem 0.75rem;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+}
+
+.pagination a.first,
+.pagination a.last {
+  background-color: #606060;
+}
+
+.pagination a.active {
+  background-color: #232323;
+}
+
+@media only screen and (max-width: 768px) {
+  .pagination {
+    justify-content: center;
+  }
+}

assets/css/partials/table-of-contents.css

@@ -1,3 +1,27 @@
-#TableOfContents ul {
-    list-style-type: none;
-}
+:root {
+  --toc-light-background: #f2f2f2;
+  --toc-dark-background: #131212;
+}
+
+#table-of-contents {
+  margin-top: 3rem;
+  height: 30rem;
+  max-height: 20rem;
+  padding: 1.2rem 1.6rem;
+  border-radius: 1.875rem;
+  background-color: var(--toc-background);
+}
+
+#table-of-contents h3 {
+    margin-bottom: 1rem;
+}
+
+#table-of-contents nav ul {
+  list-style-type: none;
+  padding-inline-start: 2rem;
+  margin-bottom: 0rem;
+}
+
+#table-of-contents nav > ul:first-of-type {
+  padding: 0rem;
+}