feat: move novels here and add relevant page templates

2 files changed, 49 insertions, 0 deletions

diff --git a/assets/css/components/_fictions.scss b/assets/css/components/_fictions.scss
new file mode 100644
index 00000000..c235a5f2
--- /dev/null
+++ b/assets/css/components/_fictions.scss
@@ -0,0 +1,48 @@
+#fiction-section {
+    .fiction-welcome {
+        margin: 2rem 0;
+        display: flex;
+        align-items: center;
+        gap: 2rem;
+        @media screen and (max-width: 768px) {
+            gap: 1rem;
+        }
+
+        .fiction-welcome-image img {
+            width: 10rem;
+            @media screen and (max-width: 768px) {
+                width: 7rem;
+            }
+            opacity: 0.8;
+        }
+    }
+
+    .fiction-list {
+        margin: 4rem 0;
+        .fiction-item {
+            text-align: center;
+            margin: 2rem 0;
+
+            .fiction-item-title {
+                margin: 0;
+            }
+            .fiction-item-meta {
+                color: var(--secondary-text-color);
+            }
+        }
+    }
+}
+
+.fiction-page {
+    .fiction-header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+.fiction-page-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
diff --git a/assets/css/index.scss b/assets/css/index.scss
index fa643102..3406cf86 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -13,6 +13,7 @@
 @import "components/comment";
 @import "components/shortcodes";
 @import "components/card";
+@import "components/fictions";
 @import "components/library";
 @import "components/footer";
 @import "components/animation";