From cb34c538ccbdb9e6b39892172d5243e9657baa2f Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 4 Apr 2025 18:54:12 +0200
Subject: [PATCH] feat: :sparkles: add page content component

---
 src/components/page-content.webc | 66 ++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/components/page-content.webc

diff --git a/src/components/page-content.webc b/src/components/page-content.webc
new file mode 100644
index 0000000..b09aa1c
--- /dev/null
+++ b/src/components/page-content.webc
@@ -0,0 +1,66 @@
+<section class="page-content">
+  <navigation label="Character" page :collection="char" webc:nokeep></navigation>
+
+  <slot></slot>
+</section>
+
+<style>
+  .page-content {
+    width: 100%;
+    max-width: 65ch;
+
+    background-color: var(--clr-box-background);
+    border: var(--border-thin) solid var(--clr-box-border);
+    border-radius: var(--border-radius);
+
+    & :where(h1, h2, h3, h4, h5, h6) {
+      --heading-spacing: 0.25em;
+      position: relative;
+      font-weight: bold;
+      margin-block: 0 var(--heading-spacing);
+      padding-block: 0 var(--heading-spacing);
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        left: 0;
+        bottom: 0;
+        height: 0.125em;
+        width: 2em;
+        border-radius: 1em;
+        background: linear-gradient(
+          to right,
+          oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
+          oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
+        );
+      }
+    }
+
+    & h1 {
+      font-size: 3em;
+    }
+
+    & h2 {
+      font-size: 2em;
+    }
+
+    & p {
+      text-align: justify;
+    }
+
+    & article a {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 0.1875em;
+      text-decoration-thickness: 0.125em;
+      text-decoration-skip-ink: all;
+      text-decoration-color: var(--clr-link-underline);
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: var(--clr-link);
+      }
+    }
+  }
+</style>