CSS & JS splitting, small fix section badge

1 files changed, 88 insertions, 0 deletions

diff --git a/assets/css/post.css b/assets/css/post.css
new file mode 100644
index 0000000..2c7fcd5
--- /dev/null
+++ b/assets/css/post.css
@@ -0,0 +1,88 @@
+/* Post/Article */
+.post {
+    position: relative; /* Needed for post__scroll-top */
+}
+
+.post__content ol > li,
+.post__content ul > li {
+    margin-bottom: var(--gap-small);
+}
+
+.post__header {
+    margin-bottom: var(--gap-large);
+}
+
+.post__navigation > hr {
+    height: 2px;
+    margin-bottom: var(--gap-large);
+}
+
+.post__navigation-list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 1rem !important;
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+        gap: var(--gap-default);
+        margin: 0 !important;
+    }
+}
+
+.post__scroll-top {
+    background-color: var(--bg-special);
+    border-radius: var(--border-radius-max);
+    box-shadow: var(--shadow-default);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 2.5rem;
+    width: 2.5rem;
+    position: absolute;
+    bottom: 6rem;
+    right: 0;
+    z-index: 1000;
+
+    & svg {
+        height: 2rem;
+        width: 2rem;
+        padding-bottom: 0.2rem;
+    }
+
+    /* Arrow up  */
+    & svg > path {
+        stroke: var(--text-color);
+    }
+
+    &:hover {
+        background-color: var(--link-hover);
+
+        & svg > path {
+            stroke: var(--bg-main);
+        }
+    }
+}
+
+.post__tags {
+    margin: var(--margin-padding-Y-big);
+}
+
+.post__tags-heading {
+    font-weight: bold;
+}
+
+.post__tags-list {
+    display: flex;
+    gap: var(--gap-default);
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+    }
+}
+
+.post__tags-link {
+    font-weight: normal;
+}
+