Content pages and table of contents

assets/css/partials/card.css

@@ -3,7 +3,7 @@
   --card-dark-background: #131212;
 }
 
-article {
+.card {
   background-color: var(--card-background);
   color: var(--text);
   border-radius: 1.875rem;
@@ -11,34 +11,39 @@ article {
   margin-bottom: 2rem;
 }
 
-article h3 {
+.card h3 {
   font-size: 2rem;
   margin-bottom: 1.75rem;
   text-transform: capitalize;
 }
 
-article p {
-  margin-bottom: 4rem;
+.card .date {
+  font-weight: bold;
 }
 
-article #links {
+.card p {
+  margin-top: 1rem;
+  margin-bottom: 3rem;
+}
+
+.card #links {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-article .read-more,
-article .demo {
+.card .read-more,
+.card .demo {
   display: inline-flex;
   align-items: center;
 }
 
-article .read-more svg,
-article .demo svg {
-  margin-left: 0.5rem;
+.card .read-more svg,
+.card .demo svg {
+  margin-left: 0.25rem;
 }
 
-article .demo {
+.card .demo {
   background-color: #353535;
   color: var(--white);
   border-radius: 0.4375rem;
@@ -46,20 +51,21 @@ article .demo {
   padding: 0.5rem 1rem;
 }
 
-article .demo .eye {
+.card .demo .eye {
   stroke: var(--white);
 }
 
 @media only screen and (max-width: 1024px) {
-  article {
+  .card {
     padding: 2.5rem 1.5rem;
   }
 
-  article h3 {
+  .card h3 {
     font-size: 1.5rem;
+    margin-bottom: 1.25rem;
   }
 
-  article p {
+  .card p {
     margin-bottom: 1.75rem;
   }
 }

assets/css/partials/header.css

@@ -5,7 +5,7 @@
   --nav-dark-background: #121212;
 }
 
-header, nav {
+header, #mobile-navigation {
   width: 85%;
   border-radius: 0.75rem;
   text-transform: uppercase;
@@ -23,7 +23,7 @@ header {
   justify-content: space-between;
 }
 
-nav:not(.breadcrumb) {
+#mobile-navigation {
   background-color: var(--nav-background);
   display: none;
   position: fixed;
@@ -40,7 +40,7 @@ header #header-face h3 {
   font-weight: 600;
 }
 
-header #menus a, nav:not(.breadcrumb) #menus a {
+header #menus a, #mobile-navigation #menus a {
   text-decoration: none;
   font-weight: 600;
   font-size: 15px;
@@ -52,7 +52,7 @@ header #menus {
   column-gap: 1.563rem;
 }
 
-nav:not(.breadcrumb) #menus {
+#mobile-navigation #menus {
   display: flex;
   flex-direction: column;
   align-items: end;
@@ -60,7 +60,7 @@ nav:not(.breadcrumb) #menus {
   row-gap: 3.125rem;
 }
 
-nav:not(.breadcrumb) hr {
+#mobile-navigation hr {
   margin-top: 3.125rem;
   margin-bottom: 1.25rem;
 }
@@ -71,13 +71,13 @@ header #links {
   column-gap: 1.5rem;
 }
 
-nav:not(.breadcrumb) #links {
+#mobile-navigation #links {
   display: flex;
   justify-content: end;
   column-gap: 1.5rem;
 }
 
-nav:not(.breadcrumb) #links .theme-toggler {
+#mobile-navigation #links .theme-toggler {
   margin-right: auto;
 }
 
@@ -90,7 +90,7 @@ header #nav-toggler {
 }
 
 @media only screen and (max-width: 1024px) {
-  header, nav:not(.breadcrumb) {
+  header, #mobile-navigation {
     margin: 1.5rem auto;
     padding: 0.938rem 1.25rem;
   }

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

@@ -0,0 +1,3 @@
+#TableOfContents ul {
+    list-style-type: none;
+}

assets/css/single.css

@@ -0,0 +1,39 @@
+main #metadata {
+    margin-bottom: 2rem;
+}
+
+main #metadata h1 {
+    margin-bottom: 1rem;
+}
+
+main #metadata div {
+    display: flex;
+    justify-content: space-between;
+}
+
+main #metadata #share {
+    cursor: pointer;
+}
+
+main #content {
+    display: flex;
+    column-gap: 2rem;
+}
+
+main h2, main h3, main h4 {
+    margin-bottom: 1rem;
+}
+
+main p, main ul, main ol {
+    margin-bottom: 2rem;
+}
+
+@media only screen and (max-width: 1024px) {
+    main #content {
+        display: block;
+    }
+
+    main #content #TableOfContents {
+        display: none;
+    }
+}