Startseite Erkunden Hilfe
Registrieren Anmelden
novel
/
fe
2
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

update

Leo vor 3 Jahren
Ursprung
e7871d72de
Commit
e6e3f84208
13 geänderte Dateien mit 5034 neuen und 234 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 19 1
      components/common/Footer/index.tsx
  2. 22 5
      components/common/Header/index.tsx
  3. 5 0
      package.json
  4. 1 0
      pages/_document.js
  5. 0 108
      pages/novel/[slug].tsx
  6. 308 0
      pages/novel/[slug]/[chapter].tsx
  7. 3846 0
      pages/novel/[slug]/index.tsx
  8. 29 0
      public/icons.svg
  9. 58 0
      styles/chapter.module.scss
  10. 200 84
      styles/globals.scss
  11. 56 15
      styles/novel-info.module.scss
  12. 370 18
      tailwind.config.js
  13. 120 3
      yarn.lock

+ 19 - 1
components/common/Footer/index.tsx
Datei anzeigen 

@@ -1,3 +1,21 @@
 
+import Link from "next/link";
 
 export default function Footer() {
 
 export default function Footer() {
 
-  return <footer>footer</footer>;
 
+  return (
 
+    <footer className="footer">
 
+      <div className="container">
 
+        <Link href="/">
 
+          <a className="logo" title="NovelDit">
 
+            <img src="/logo.svg" alt="NovelDit" />
 
+            <span>NovelDit</span>
 
+          </a>
 
+        </Link>
 
+        <p className="copyright">© 2022 NovelDit Inc. All rights reserved.</p>
 
+        <div className="links">
 
+          <a href="/privacy-policy">Privacy policy</a>
 
+          <div className="divider"></div>
 
+          <a href="/changelog">Changelog</a>
 
+        </div>
 
+      </div>
 
+    </footer>
 
+  );
 
 }
 
 }

+ 22 - 5
components/common/Header/index.tsx
Datei anzeigen 

@@ -3,8 +3,6 @@ import clsx from "clsx";
 
 import Link from "next/link";
 
 import Link from "next/link";
 
 import ClickAwayListener from "@mui/base/ClickAwayListener";
 
 import ClickAwayListener from "@mui/base/ClickAwayListener";
 
 
 
-import logo from "../../../public/logo.svg";
 
-
 
 export default function Header() {
 
 export default function Header() {
 
   const [open, setOpen] = useState(false);
 
   const [open, setOpen] = useState(false);
 
 
 
@@ -16,14 +14,25 @@ export default function Header() {
 
     setOpen(false);
 
     setOpen(false);
 
   }, [setOpen]);
 
   }, [setOpen]);
 
 
 
+  const toggleTheme = function () {
 
+    const _html = document.documentElement;
 
+    if (_html.classList.contains("dark")) {
 
+      _html.classList.remove("dark");
 
+      localStorage.setItem("theme", "lite");
 
+    } else {
 
+      _html.classList.add("dark");
 
+      localStorage.setItem("theme", "dark");
 
+    }
 
+  };
 
+
 
   return (
 
   return (
 
     <header className={clsx("header", { open })}>
 
     <header className={clsx("header", { open })}>
 
       <ClickAwayListener onClickAway={closeMenu}>
 
       <ClickAwayListener onClickAway={closeMenu}>
 
         <div className="container">
 
         <div className="container">
 
           <Link href="/">
 
           <Link href="/">
 
-            <a className="logo" title="NovelDit">
 
+            <a className="logo mr-5" title="NovelDit">
 
               {/* eslint-disable-next-line @next/next/no-img-element */}
 
               {/* eslint-disable-next-line @next/next/no-img-element */}
 
-              <img src={logo.src} alt="NovelDit" />
 
+              <img src="/logo.svg" alt="NovelDit" />
 
               <span>NovelDit</span>
 
               <span>NovelDit</span>
 
             </a>
 
             </a>
 
           </Link>
 
           </Link>
 
@@ -233,7 +242,15 @@ export default function Header() {
 
             </form>
 
             </form>
 
           </div>
 
           </div>
 
           <div className="buttons">
 
           <div className="buttons">
 
-            <button className="menu-btn" onClick={toggleMenu}>
 
+            <button className="btn" onClick={toggleTheme}>
 
+              <svg className="icon-sun" viewBox="0 0 16 16">
 
+                <use href="/icons.svg#sun"></use>
 
+              </svg>
 
+              <svg className="icon-moon" viewBox="0 0 16 16">
 
+                <use href="/icons.svg#moon"></use>
 
+              </svg>
 
+            </button>
 
+            <button className="btn menu-btn" onClick={toggleMenu}>
 
               <svg
 
               <svg
 
                 className="icon-menu"
 
                 className="icon-menu"
 
                 xmlns="http://www.w3.org/2000/svg"
 
                 xmlns="http://www.w3.org/2000/svg"

+ 5 - 0
package.json
Datei anzeigen 

@@ -16,13 +16,18 @@
 
     "react-dom": "18.2.0"
 
     "react-dom": "18.2.0"
 
   },
 
   },
 
   "devDependencies": {
 
   "devDependencies": {
 
+    "@tailwindcss/aspect-ratio": "^0.4.2",
 
+    "@tailwindcss/forms": "^0.5.3",
 
     "@tailwindcss/line-clamp": "^0.4.2",
 
     "@tailwindcss/line-clamp": "^0.4.2",
 
+    "@tailwindcss/typography": "^0.5.7",
 
     "@types/node": "18.11.3",
 
     "@types/node": "18.11.3",
 
     "@types/react": "18.0.21",
 
     "@types/react": "18.0.21",
 
     "@types/react-dom": "18.0.6",
 
     "@types/react-dom": "18.0.6",
 
     "autoprefixer": "^10.4.12",
 
     "autoprefixer": "^10.4.12",
 
+    "daisyui": "^2.33.0",
 
     "eslint": "8.25.0",
 
     "eslint": "8.25.0",
 
     "eslint-config-next": "12.3.1",
 
     "eslint-config-next": "12.3.1",
 
+    "mini-svg-data-uri": "^1.4.4",
 
     "postcss": "^8.4.18",
 
     "postcss": "^8.4.18",
 
     "sass": "^1.55.0",
 
     "sass": "^1.55.0",
 
     "tailwindcss": "^3.2.0",
 
     "tailwindcss": "^3.2.0",

+ 1 - 0
pages/_document.js
Datei anzeigen 

@@ -4,6 +4,7 @@ export default function Document() {
 
   return (
 
   return (
 
     <Html>
 
     <Html>
 
       <Head>
 
       <Head>
 
+      <script dangerouslySetInnerHTML={{ __html: 'try{if(localStorage.theme==="dark"||(!("theme" in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches)){document.documentElement.classList.add("dark");}else{document.documentElement.classList.remove("dark");}}catch(_){}'}}></script>
 
         <link
 
         <link
 
           rel="stylesheet"
 
           rel="stylesheet"
 
           href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&amp;display=swap"
 
           href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&amp;display=swap"

+ 0 - 108
pages/novel/[slug].tsx
Datei anzeigen 

@@ -1,108 +0,0 @@
 
-import type { NextPage } from "next";
 
-import Link from "next/link";
 
-import NovelCover from "../../components/NovelCover";
 
-import NovelItem from "../../components/NovelItem";
 
-import styles from "../../styles/novel-info.module.scss";
 
-
 
-const Novel: NextPage = () => {
 
-  return (
 
-    <main>
 
-      <div
 
-        className={styles["novel-wrap"]}
 
-        style={{
 
-          backgroundImage:
 
-            "url(https://www.wuxiaworld.com/cdn-cgi/image/fit=contain,quality=75,format=auto/https://cdn.wuxiaworld.com/images/covers/og.jpg?ver=362f12103bcf1ea3fc048174300b89a65643336b)",
 
-        }}
 
-      >
 
-        <div className={styles["novel-container"]}>
 
-          <p className={styles["crumbs"]}>
 
-            <Link href="/">
 
-              <a title="home" className="">
 
-                <svg>
 
-                  <use xlinkHref="/icons.svg#home"></use>
 
-                </svg>
 
-              </a>
 
-            </Link>
 
-            <span>/</span>
 
-            <a href="/stories/novel-fantasy-male" className="" title="Fantasy">
 
-              Fantasy
 
-            </a>
 
-            <span>/</span> <span>Supreme Harem God System</span>
 
-          </p>
 
-          <div className={styles["novel-info"]}>
 
-            <NovelCover
 
-              className={styles["novel-info-cover"]}
 
-              component="div"
 
-            />
 
-            <div className={styles["nove-info-body"]}>
 
-              <h1>
 
-                Supreme Harem God System
 
-                <small>Completed</small>
 
-              </h1>
 
-              <h2>
 
-                <a title="Fantasy" href="/stories/novel-fantasy-male">
 
-                  <svg>
 
-                    <use xlinkHref="/icons.svg#paper"></use>
 
-                  </svg>
 
-                  <span>Fantasy</span>
 
-                </a>
 
-                <strong>
 
-                  <svg>
 
-                    <use xlinkHref="/icons.svg#chapter"></use>
 
-                  </svg>
 
-                  <span>438 Chapters</span>
 
-                </strong>
 
-                <strong>
 
-                  <svg>
 
-                    <use xlinkHref="/icons.svg#eye"></use>
 
-                  </svg>
 
-                  <span>3.9M Views</span>
 
-                </strong>
 
-              </h2>
 
-              <div className={styles["btns"]}>
 
-                <a href="" className={styles["button"]}>
 
-                  Start Reading
 
-                </a>
 
-              </div>
 
-            </div>
 
-          </div>
 
-        </div>
 
-      </div>
 
-      <div className="container bg-paper py-3">
 
-        <div className="tabs">
 
-          <button className="tab active">About</button>
 
-          <button className="tab">Chapters</button>
 
-        </div>
 
-        <h2 className="sub-title">Tags</h2>
 
-        <div className="tags">
 
-          {[
 
-            "Chinese",
 
-            "Romance",
 
-            "Fantasy",
 
-            "Comedy",
 
-            "Mystery",
 
-            "Xuanhuan",
 
-            "Action",
 
-            "Virtual Reality",
 
-            "Crafting",
 
-            "Modern Setting",
 
-            "Superpowers",
 
-            "Political Intrigue",
 
-          ].map((item) => (
 
-            <a href="" className="tag" key={item}>
 
-              {item}
 
-            </a>
 
-          ))}
 
-        </div>
 
-        <h2 className="sub-title">Synopsis</h2>
 
-        <p>The Age of Gods has long since ended, their voices no longer heard on the continent of Douluo. Humanity, standing on the shoulders of legends from its history, advanced soul technology to inconceivable heights. The humans of Douluo invented weapons of mass destruction, mechanized armor, and living metals. With these advancements, they went on to conquer the oceans and discovered two new continents. To fuel these new technologies, humanity hunted the soul beasts to the very brink of extinction. </p>
 
-        <p>Once the dominant force of Douluo, the few surviving soul beasts now hide in the darkest recesses of their last sanctuary. The weakest have all been hunted, leaving only the strongest to scheme in the heart of the forest. The soul beasts, not willing to fade away, plot an uprising for their survival. In the midst of this, a god from a long forgotten era awakens in the depths of the Great Star Dou Forest to seek vengeance for the soul beasts. </p>
 
-        <p>As darkness encroaches from the abyss, hope is found in a young boy who holds a power beyond divinity within himself—Tang Wulin! Hope for both humanity and the soul beasts, as the bridge between the two. He finds his way into the fabled halls of Shrek Academy, where he learns to wield his prodigious powers, makes friends and finds allies, eventually rising to become a towering leader. </p>
 
-        <p>As he learns to harness his strength, danger lurks within the shadows as the various factions of humanity maneuver and plot to usurp Shrek Academy. Tang Wulin discovers the threat to the only world he knows as he sinks deeper into the intrigue. Meanwhile, camouflaged by the chaos and unbeknownst to the humans, the soul beasts’ plot continues to steadily advance.</p>
 
-        <p>To defend what he loves and reclaim what was lost, Tang Wulin must seek out the legacies of legends past and unlock the full might of the Golden Dragon King!</p>
 
-      </div>
 
-    </main>
 
-  );
 
-};
 
-
 
-export default Novel;

+ 308 - 0
pages/novel/[slug]/[chapter].tsx
Datei anzeigen 

@@ -0,0 +1,308 @@
 
+import clsx from "clsx";
 
+import Link from "next/link";
 
+import { ReactElement, useState } from "react";
 
+import Footer from "../../../components/common/Footer";
 
+import Header from "../../../components/common/Header";
 
+import NovelCover from "../../../components/NovelCover";
 
+import styles from "../../../styles/chapter.module.scss";
 
+import type { NextPageWithLayout } from "../../_app";
 
+
 
+const Chapter: NextPageWithLayout = () => {
 
+  const [open, setOpen] = useState(false);
 
+
 
+  const toggleTheme = function () {
 
+    const _html = document.documentElement;
 
+    if (_html.classList.contains("dark")) {
 
+      _html.classList.remove("dark");
 
+      localStorage.setItem("theme", "lite");
 
+    } else {
 
+      _html.classList.add("dark");
 
+      localStorage.setItem("theme", "dark");
 
+    }
 
+  };
 
+  return (
 
+    <>
 
+      <header className={clsx("header", styles["chapter-header"])}>
 
+        <Link href="/">
 
+          <a className="logo mr-2" title="NovelDit">
 
+            {/* eslint-disable-next-line @next/next/no-img-element */}
 
+            <img src="/logo.svg" alt="NovelDit" />
 
+          </a>
 
+        </Link>
 
+        <div className="flex-1">
 
+          <div className="text-base breadcrumbs">
 
+            <ul>
 
+              <li>
 
+                <a>Supreme Harem God System</a>
 
+              </li>
 
+              <li>Characters And Their Images. (Might Contain Spoilers)</li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+
 
+        <div className="buttons">
 
+          <button className="btn" onClick={toggleTheme}>
 
+            <svg className="icon-sun" viewBox="0 0 16 16">
 
+              <use href="/icons.svg#sun"></use>
 
+            </svg>
 
+            <svg className="icon-moon" viewBox="0 0 16 16">
 
+              <use href="/icons.svg#moon"></use>
 
+            </svg>
 
+          </button>
 
+        </div>
 
+      </header>
 
+      <main className="flex justify-center">
 
+        <div className={styles["chapter-page"]}>
 
+          <article className={styles["novel"]}>
 
+            <header>
 
+              <h1 className="">
 
+                Characters And Their Images. (Might Contain Spoilers)
 
+              </h1>
 
+            </header>
 
+            <div className="content">
 
+              <p>
 
+                Look, I won't have perfect images since I have just searched
 
+                them on the internet after all... you can use your imagination a
 
+                little, I will just give you a reference image.
 
+              </p>
 
+              <p>Thank you&lt;3 </p>
 
+              <p>... </p>
 
+              <p>Nux Leander </p>
 
+              <p>
 
+                Nux's Look: His long thick raven hair, combined with his smooth
 
+                white skin with a perfectly carved face. His golden eyes had a
 
+                unique shine within them. His sword-like eyebrows, thin nose and
 
+                sharp jawline made his face immortal-like even though it was a
 
+                little bruised.
 
+              </p>
 
+              <p>
 
+                Here is the image (in paragraph comments), just change the eye
 
+                colour to golden, and of course, normal-looking hands. He is
 
+                frail now, but that won't be for long.
 
+              </p>
 
+              <p>... </p>
 
+              <p>Felberta Alveye: </p>
 
+              <p>
 
+                She was a classic example of a MILF! Her perfect hourglass
 
+                figure was as enchanting as it could ever get, Nux couldn't help
 
+                but glance at those milky breasts that were enough for a normal
 
+                weeb to die from a nosebleed. Her raven hair matched Nux's,
 
+                while her black eyeballs were as deep as an abyss. Her thin
 
+                eyebrows, small nose and cherry-like red and luscious lips made
 
+                her look like a succubus.
 
+              </p>
 
+              <p>
 
+                Here is the Image, just imagine the eyes and hair in black
 
+                colour.
 
+              </p>
 
+              <p>Skyla Hale </p>
 
+              <p>
 
+                Skyla was a beautiful fair-skinned woman; she was 1.68 meters
 
+                tall, with short auburn hair, big green coloured eyes, a cute
 
+                small nose, and pouty red lips. Her breasts weren't really big
 
+                but they weren't small either. They were what they call, 'they
 
+                would perfectly fit in my hands' type. She had a perky bottom
 
+                and although she might appear serious, if one gets to know her,
 
+                she was a clumsy type.
 
+              </p>
 
+              <p>Here's her image. </p>
 
+              <p>Lane Wynee </p>
 
+              <p>
 
+                Sister Lane, or Lane Wyne, was a beautiful and serious woman.
 
+                She had dark brown colour hair and eyes, she had a well-carved
 
+                face, with sharp brows, a thin nose and soft pink lips. Nux's
 
+                favourite part about her was her big but firm breasts which were
 
+                even larger than Fel's. Her body curves were wonderful, coupled
 
+                with her maid uniform; she was an ideal dream maid girl in any
 
+                teen's fantasy.
 
+              </p>
 
+              <p>The Image, change her eyes to the colour mentioned. </p>
 
+              <p>Edda Osburn </p>
 
+              <p>
 
+                Edda was a 1.65 meters tall woman, she had white coloured hair
 
+                with shades of pink on the tips, this combined well with
 
+                pink-violet eyes, and her tanned skin gave her a different charm
 
+                than others.
 
+              </p>
 
+              <p>
 
+                Her small nose, and rosy red lips, combined with the perfect
 
+                hourglass physique that rivals Felberta made her an extremely
 
+                beautiful and alluring woman.
 
+              </p>
 
+              <p>Here is her picture~ </p>
 
+              <p>Thyra Cruse </p>
 
+              <p>
 
+                Thyra was a beautiful fair-skinned woman with short raven hair
 
+                and Icy blue eyes. She had a small nose and cherry-like lips.
 
+                She has a great physique; her breasts were of the same size as
 
+                Skyla. Her black coloured clothes contrasted well with her fair
 
+                skin and icy blue eyes. All in all, she was a really beautiful
 
+                woman.
 
+              </p>
 
+              <p>Picture. </p>
 
+              <p>Allura Skyfall </p>
 
+              <p>
 
+                Concubine Allura, or Allura Skyfall, is a 1.7-meter tall woman,
 
+                just like her name, she has an alluring, sinful body and a
 
+                perfect hourglass figure. White hairs, Crystal blue eyes, and
 
+                juicy red lips. A fatal Beauty indeed.
 
+              </p>
 
+              <p>Picture. </p>
 
+              <p>Amaya Skyfall. </p>
 
+              <p>
 
+                The woman had long dark black hair, juicy red lips, a thin nose
 
+                and a peerless face.
 
+              </p>
 
+              <p>
 
+                A perfect face, a perfect body, it was as if this woman was born
 
+                to define the word perfect.
 
+              </p>
 
+              <p>
 
+                Her breasts weren't large, but they weren't small either, her
 
+                body wasn't curvy, it was more lean however, combining it with
 
+                her divine face, she was…
 
+              </p>
 
+              <p>Outright gorgeous. </p>
 
+              <p>Picture. </p>
 
+              <p>Evane Skyfall. </p>
 
+              <p>
 
+                The woman had long blonde hair, beautiful green eyes, a small
 
+                nose and light pink lips, her features were sharp and combined
 
+                with her perfect hourglass-like mature body, she looked
 
+                breathtaking.
 
+              </p>
 
+              <p>Picture. </p>
 
+              <p>Arvina Skyfall. </p>
 
+              <p>
 
+                Brown-red, fiery eyes, sword-like eyebrows, light-blonde hair,
 
+                luscious red lips and a lean physique, the woman was really
 
+                enchanting; however, together with being beautiful, she also
 
+                released a ferocious, dangerous aura.
 
+              </p>
 
+              <p>An Aura of a Warrior. </p>
 
+              <p>Picture. </p>
 
+              <p>Ember Windstar. </p>
 
+              <p>
 
+                Nux's eyes fell on a woman wearing a black coat sitting on a
 
+                chair with a leisurely look on her face.
 
+              </p>
 
+              <p>
 
+                No, actually, she did not look leisurely at all, she looked like
 
+                a wild lioness who was looking at her prey, she was a dangerous
 
+                woman.
 
+              </p>
 
+              <p>
 
+                And on top of that, she was a beautiful woman, with black-red
 
+                hair, sword-like eyebrows, red eyes that shined ferociously, a
 
+                straight nose, and a wide smile on her face,
 
+              </p>
 
+              <p>Picture </p>
 
+              <p>... </p>
 
+              <p>
 
+                More characters will be updated after they are introduced, so
 
+                look forward to it. Also, I won't be adding random side
 
+                characters like Florence and Willa, if they appear more in
 
+                future, I might add them here, but right now, they haven't
 
+                really appeared in the story and I certainly don't have any
 
+                plans to add either.
 
+              </p>
 
+              <p>
 
+                If you have any questions or requests, just tell me and I'll
 
+                answer you.
 
+              </p>
 
+            </div>
 
+          </article>
 
+        </div>
 
+        <div className={styles["toolbar-display"]}>
 
+          <div className={styles["toolbar-inner"]}>
 
+            <div className={styles["toolbar-display-title"]}>
 
+              Display Options
 
+            </div>
 
+            <div className={styles["toolbar-display-label"]}>Background</div>
 
+            <div className="btn-group w-full">
 
+              <button className="btn btn-primary">
 
+                <svg className="icon-sun  mr-2" viewBox="0 0 16 16">
 
+                  <use href="/icons.svg#sun"></use>
 
+                </svg>
 
+                Light
 
+              </button>
 
+              <button className="btn btn-primary">Yellow</button>
 
+              <button className="btn btn-primary">
 
+                <svg className="icon-moon  mr-2" viewBox="0 0 16 16">
 
+                  <use href="/icons.svg#moon"></use>
 
+                </svg>
 
+                Dark
 
+              </button>
 
+            </div>
 
+            <div className={styles["toolbar-display-label"]}>Font</div>
 
+            <div className="btn-group">
 
+              <button className="btn btn-primary">Serif</button>
 
+              <button className="btn btn-primary">sans-serif</button>
 
+            </div>
 
+            <div className={styles["toolbar-display-label"]}>Sizes</div>
 
+            <div className="flex">
 
+              <button className="mr-4">
 
+                <svg className="w-5 h-5" viewBox="0 0 16 16">
 
+                  <use href="/icons.svg#font-dn"></use>
 
+                </svg>
 
+              </button>
 
+              <input
 
+                className="w-0 flex-1"
 
+                type="range"
 
+                list="tickmarks"
 
+                min={14}
 
+                max={24}
 
+                step={2}
 
+              />
 
+              <datalist id="tickmarks">
 
+                <option value="14">14</option>
 
+                <option value="16">16</option>
 
+                <option value="18">18</option>
 
+                <option value="20">20</option>
 
+                <option value="22">22</option>
 
+                <option value="24">24</option>
 
+              </datalist>
 
+              <button className="ml-4">
 
+                <svg className="w-5 h-5" viewBox="0 0 16 16">
 
+                  <use href="/icons.svg#font-up"></use>
 
+                </svg>
 
+              </button>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </main>
 
+      <div className={styles["toolbar"]}>
 
+        <div className={styles["toolbar-items"]}>
 
+          <button className={styles["toolbar-item"]} title="Table Of Contents">
 
+            <svg>
 
+              <use xlinkHref="/icons.svg#items"></use>
 
+            </svg>
 
+          </button>
 
+          <button className={styles["toolbar-item"]} title="Display Options">
 
+            <svg>
 
+              <use xlinkHref="/icons.svg#set"></use>
 
+            </svg>
 
+          </button>
 
+          <button className={styles["toolbar-item"]} title="">
 
+            <svg>
 
+              <use xlinkHref="/icons.svg#reviews"></use>
 
+            </svg>
 
+          </button>
 
+          <a
 
+            className={styles["toolbar-item"]}
 
+            href="/help"
 
+            title="Help center"
 
+          >
 
+            <svg>
 
+              <use xlinkHref="/icons.svg#help_bold"></use>
 
+            </svg>
 
+          </a>
 
+        </div>
 
+      </div>
 
+    </>
 
+  );
 
+};
 
+
 
+Chapter.getLayout = (page: ReactElement) => page;
 
+
 
+export default Chapter;

+ 3846 - 0
pages/novel/[slug]/index.tsx
Datei anzeigen 

@@ -0,0 +1,3846 @@
 
+import clsx from "clsx";
 
+import type { NextPage } from "next";
 
+import Link from "next/link";
 
+import { useState } from "react";
 
+import NovelCover from "../../../components/NovelCover";
 
+import styles from "../../../styles/novel-info.module.scss";
 
+
 
+const Novel: NextPage = () => {
 
+  const [tab, setTab] = useState("about");
 
+  return (
 
+    <main>
 
+      <div
 
+        className={styles["novel-wrap"]}
 
+        style={{
 
+          backgroundImage:
 
+            "url(https://www.wuxiaworld.com/cdn-cgi/image/fit=contain,quality=75,format=auto/https://cdn.wuxiaworld.com/images/covers/og.jpg?ver=362f12103bcf1ea3fc048174300b89a65643336b)",
 
+        }}
 
+      >
 
+        <div className={styles["novel-container"]}>
 
+          <div className="text-sm py-4 breadcrumbs">
 
+            <ul>
 
+              <li>
 
+                <a>
 
+                  <svg className="w-5 h-5 mr-1 -mt-1">
 
+                    <use xlinkHref="/icons.svg#home"></use>
 
+                  </svg>
 
+                  Home
 
+                </a>
 
+              </li>
 
+              <li>
 
+                <a>Documents</a>
 
+              </li>
 
+              <li>Add Document</li>
 
+            </ul>
 
+          </div>
 
+          <div className={styles["novel-info"]}>
 
+            <NovelCover
 
+              className={styles["novel-info-cover"]}
 
+              component="div"
 
+            />
 
+            <div className={styles["nove-info-body"]}>
 
+              <h1>
 
+                Supreme Harem God System
 
+                <small>Completed</small>
 
+              </h1>
 
+              <h2>
 
+                <a title="Fantasy" href="">
 
+                  <svg>
 
+                    <use xlinkHref="/icons.svg#paper"></use>
 
+                  </svg>
 
+                  <span>Fantasy</span>
 
+                </a>
 
+                <strong>
 
+                  <svg>
 
+                    <use xlinkHref="/icons.svg#chapter"></use>
 
+                  </svg>
 
+                  <span>438 Chapters</span>
 
+                </strong>
 
+                <strong>
 
+                  <svg>
 
+                    <use xlinkHref="/icons.svg#eye"></use>
 
+                  </svg>
 
+                  <span>3.9M Views</span>
 
+                </strong>
 
+              </h2>
 
+              <div className={styles["btns"]}>
 
+                <a href="" className={styles["button"]}>
 
+                  Start Reading
 
+                </a>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div className="container bg-paper py-3">
 
+        <div className="tabs">
 
+          <button
 
+            className={clsx(["tab", { active: tab === "about" }])}
 
+            onClick={() => setTab("about")}
 
+          >
 
+            About
 
+          </button>
 
+          <button
 
+            className={clsx(["tab", { active: tab === "chapters" }])}
 
+            onClick={() => setTab("chapters")}
 
+          >
 
+            Chapters
 
+          </button>
 
+        </div>
 
+        <div className={clsx({ hidden: tab !== "about" })}>
 
+          <h2 className="sub-title">Tags</h2>
 
+          <div className="tags">
 
+            {[
 
+              "Chinese",
 
+              "Romance",
 
+              "Fantasy",
 
+              "Comedy",
 
+              "Mystery",
 
+              "Xuanhuan",
 
+              "Action",
 
+              "Virtual Reality",
 
+              "Crafting",
 
+              "Modern Setting",
 
+              "Superpowers",
 
+              "Political Intrigue",
 
+            ].map((item) => (
 
+              <a href="" className="tag" key={item}>
 
+                {item}
 
+              </a>
 
+            ))}
 
+          </div>
 
+
 
+          <h2 className="sub-title">Synopsis</h2>
 
+          <div className={styles["novel-text"]}>
 
+            <p>
 
+              The Age of Gods has long since ended, their voices no longer heard
 
+              on the continent of Douluo. Humanity, standing on the shoulders of
 
+              legends from its history, advanced soul technology to
 
+              inconceivable heights. The humans of Douluo invented weapons of
 
+              mass destruction, mechanized armor, and living metals. With these
 
+              advancements, they went on to conquer the oceans and discovered
 
+              two new continents. To fuel these new technologies, humanity
 
+              hunted the soul beasts to the very brink of extinction.
 
+            </p>
 
+            <p>
 
+              Once the dominant force of Douluo, the few surviving soul beasts
 
+              now hide in the darkest recesses of their last sanctuary. The
 
+              weakest have all been hunted, leaving only the strongest to scheme
 
+              in the heart of the forest. The soul beasts, not willing to fade
 
+              away, plot an uprising for their survival. In the midst of this, a
 
+              god from a long forgotten era awakens in the depths of the Great
 
+              Star Dou Forest to seek vengeance for the soul beasts.
 
+            </p>
 
+            <p>
 
+              As darkness encroaches from the abyss, hope is found in a young
 
+              boy who holds a power beyond divinity within himself—Tang Wulin!
 
+              Hope for both humanity and the soul beasts, as the bridge between
 
+              the two. He finds his way into the fabled halls of Shrek Academy,
 
+              where he learns to wield his prodigious powers, makes friends and
 
+              finds allies, eventually rising to become a towering leader.
 
+            </p>
 
+            <p>
 
+              As he learns to harness his strength, danger lurks within the
 
+              shadows as the various factions of humanity maneuver and plot to
 
+              usurp Shrek Academy. Tang Wulin discovers the threat to the only
 
+              world he knows as he sinks deeper into the intrigue. Meanwhile,
 
+              camouflaged by the chaos and unbeknownst to the humans, the soul
 
+              beasts’ plot continues to steadily advance.
 
+            </p>
 
+            <p>
 
+              To defend what he loves and reclaim what was lost, Tang Wulin must
 
+              seek out the legacies of legends past and unlock the full might of
 
+              the Golden Dragon King!
 
+            </p>
 
+          </div>
 
+        </div>
 
+
 
+        <div className={clsx({ hidden: tab !== "chapters" })}>
 
+          <h3 className="sub-title">Volume 1 : The Awakening.</h3>
 
+          <ol className={styles["chapter-list"]}>
 
+            <li>
 
+              <a href="" title="Chapter 01: Prologue">
 
+                <i>1</i>
 
+                <strong>Chapter 01: Prologue</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 02: Awakening.">
 
+                <i>2</i>
 
+                <strong>Chapter 02: Awakening.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 03: Violet Snow.  ">
 
+                <i>3</i>
 
+                <strong>Chapter 03: Violet Snow. </strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 04: An incredibly beautiful woman.">
 
+                <i>4</i>
 
+                <strong>Chapter 04: An incredibly beautiful woman.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 05: The Inquisition.">
 
+                <i>5</i>
 
+                <strong>Chapter 05: The Inquisition.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 06: The most 'normal' parents in the world."
 
+              >
 
+                <i>6</i>
 
+                <strong>
 
+                  Chapter 06: The most 'normal' parents in the world.
 
+                </strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 07: Daughter-in-law.">
 
+                <i>7</i>
 
+                <strong>Chapter 07: Daughter-in-law.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 08: Grudges from the past.">
 
+                <i>8</i>
 
+                <strong>Chapter 08: Grudges from the past.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 09: The only one who forgives is God, I don't.  "
 
+              >
 
+                <i>9</i>
 
+                <strong>
 
+                  Chapter 09: The only one who forgives is God, I don't.
 
+                </strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 10: A frog in a well.">
 
+                <i>10</i>
 
+                <strong>Chapter 10: A frog in a well.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 11: Obsession... And The Perfect Maid.">
 
+                <i>11</i>
 
+                <strong>Chapter 11: Obsession... And The Perfect Maid.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 12: A hard-working maid.">
 
+                <i>12</i>
 
+                <strong>Chapter 12: A hard-working maid.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 13: Ruby Scarlett.">
 
+                <i>13</i>
 
+                <strong>Chapter 13: Ruby Scarlett.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 14: Thomas and Jimmy.">
 
+                <i>14</i>
 
+                <strong>Chapter 14: Thomas and Jimmy.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 15: Jimmy is a smart guy.">
 
+                <i>15</i>
 
+                <strong>Chapter 15: Jimmy is a smart guy.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 16: Ambush.">
 
+                <i>16</i>
 
+                <strong>Chapter 16: Ambush.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 17: She is your wife.">
 
+                <i>17</i>
 
+                <strong>Chapter 17: She is your wife.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 18: Sasha Fulger.">
 
+                <i>18</i>
 
+                <strong>Chapter 18: Sasha Fulger.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 19: Sasha Fulger 2.">
 
+                <i>19</i>
 
+                <strong>Chapter 19: Sasha Fulger 2.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 20: Childhood friends.">
 
+                <i>20</i>
 
+                <strong>Chapter 20: Childhood friends.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 21: Andrew, Edward, and Leona.">
 
+                <i>21</i>
 
+                <strong>Chapter 21: Andrew, Edward, and Leona.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 22: Yanderes... Means problems.">
 
+                <i>22</i>
 
+                <strong>Chapter 22: Yanderes... Means problems.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 23: Violet and Sasha meet.  ">
 
+                <i>23</i>
 
+                <strong>Chapter 23: Violet and Sasha meet. </strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 24: Two wives.">
 
+                <i>24</i>
 
+                <strong>Chapter 24: Two wives.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 25: Professor Adam.">
 
+                <i>25</i>
 
+                <strong>Chapter 25: Professor Adam.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 26: Why do you hide behind that mask?">
 
+                <i>26</i>
 
+                <strong>Chapter 26: Why do you hide behind that mask?</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 27: Priorities">
 
+                <i>27</i>
 
+                <strong>Chapter 27: Priorities</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 28: The woman who kills Oni.">
 
+                <i>28</i>
 
+                <strong>Chapter 28: The woman who kills Oni.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 29: The three wives meet.">
 
+                <i>29</i>
 
+                <strong>Chapter 29: The three wives meet.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 30: Scathach Scarlett.">
 
+                <i>30</i>
 
+                <strong>Chapter 30: Scathach Scarlett.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 31: The Third Wife.">
 
+                <i>31</i>
 
+                <strong>Chapter 31: The Third Wife.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+          </ol>
 
+          <h3 className="sub-title">Volume 2 : Vampire Society.</h3>
 
+          <ol className={styles["chapter-list"]}>
 
+            <li>
 
+              <a href="" title="Chapter 32: Son-In-Law">
 
+                <i>32</i>
 
+                <strong>Chapter 32: Son-In-Law</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 33: Son-In-Law 2">
 
+                <i>33</i>
 
+                <strong>Chapter 33: Son-In-Law 2</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 34: Victor has been kidnapped!">
 
+                <i>34</i>
 
+                <strong>Chapter 34: Victor has been kidnapped!</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 35: Vampire World.">
 
+                <i>35</i>
 
+                <strong>Chapter 35: Vampire World.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 36: It's time to get strong! And… Chaos."
 
+              >
 
+                <i>36</i>
 
+                <strong>
 
+                  Chapter 36: It's time to get strong! And… Chaos.
 
+                </strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 37: like mother, like daughter.">
 
+                <i>37</i>
 
+                <strong>Chapter 37: like mother, like daughter.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 38: Pepper is an airhead girl.">
 
+                <i>38</i>
 
+                <strong>Chapter 38: Pepper is an airhead girl.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 39: Anomaly.">
 
+                <i>39</i>
 
+                <strong>Chapter 39: Anomaly.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 40: Violet arrived, and two wives meet their father-in-law."
 
+              >
 
+                <i>40</i>
 
+                <strong>
 
+                  Chapter 40: Violet arrived, and two wives meet their
 
+                  father-in-law.
 
+                </strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 41: The greedy witch.">
 
+                <i>41</i>
 
+                <strong>Chapter 41: The greedy witch.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 42: Now you understand me.">
 
+                <i>42</i>
 
+                <strong>Chapter 42: Now you understand me.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 43: Darling!">
 
+                <i>43</i>
 
+                <strong>Chapter 43: Darling!</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 44: Together.">
 
+                <i>44</i>
 
+                <strong>Chapter 44: Together.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 45: Insanity? Wrong, I'm sane.">
 
+                <i>45</i>
 
+                <strong>Chapter 45: Insanity? Wrong, I'm sane.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 46: A beautiful night.">
 
+                <i>46</i>
 
+                <strong>Chapter 46: A beautiful night.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 47: like mother, like daughter. 2">
 
+                <i>47</i>
 
+                <strong>Chapter 47: like mother, like daughter. 2</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 48: Ruby returns home.">
 
+                <i>48</i>
 
+                <strong>Chapter 48: Ruby returns home.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 49: Mother and daughter.">
 
+                <i>49</i>
 
+                <strong>Chapter 49: Mother and daughter.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 50: Ruby and Victor.">
 
+                <i>50</i>
 
+                <strong>Chapter 50: Ruby and Victor.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 51: Meeting.">
 
+                <i>51</i>
 
+                <strong>Chapter 51: Meeting.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 52: Meeting. 2">
 
+                <i>52</i>
 
+                <strong>Chapter 52: Meeting. 2</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 53: What will you do?">
 
+                <i>53</i>
 
+                <strong>Chapter 53: What will you do?</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 54: Hybrids.">
 
+                <i>54</i>
 
+                <strong>Chapter 54: Hybrids.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 55: Digging your own grave.">
 
+                <i>55</i>
 
+                <strong>Chapter 55: Digging your own grave.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 56: I can't contain myself anymore~.">
 
+                <i>56</i>
 
+                <strong>Chapter 56: I can't contain myself anymore~.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 57: So it begins.">
 
+                <i>57</i>
 
+                <strong>Chapter 57: So it begins.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 58: The White Wolf.">
 
+                <i>58</i>
 
+                <strong>Chapter 58: The White Wolf.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 59: The White Wolf. 2">
 
+                <i>59</i>
 
+                <strong>Chapter 59: The White Wolf. 2</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 60: The White Wolf. 3">
 
+                <i>60</i>
 
+                <strong>Chapter 60: The White Wolf. 3</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 61: Progress.">
 
+                <i>61</i>
 
+                <strong>Chapter 61: Progress.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 62: I knew it!">
 
+                <i>62</i>
 
+                <strong>Chapter 62: I knew it!</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 63: Coward.">
 
+                <i>63</i>
 
+                <strong>Chapter 63: Coward.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 64: Do you want it?">
 
+                <i>64</i>
 
+                <strong>Chapter 64: Do you want it?</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 65: Changes.">
 
+                <i>65</i>
 
+                <strong>Chapter 65: Changes.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 66: Something happens!">
 
+                <i>66</i>
 
+                <strong>Chapter 66: Something happens!</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 67: A weird situation indeed.">
 
+                <i>67</i>
 
+                <strong>Chapter 67: A weird situation indeed.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 68: Countess Eleonor Adrasteia.">
 
+                <i>68</i>
 
+                <strong>Chapter 68: Countess Eleonor Adrasteia.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 69: Countess Eleonor Adrasteia. 2">
 
+                <i>69</i>
 
+                <strong>Chapter 69: Countess Eleonor Adrasteia. 2</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 70: King's Capital">
 
+                <i>70</i>
 
+                <strong>Chapter 70: King's Capital</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 71: King's Capital. 2">
 
+                <i>71</i>
 
+                <strong>Chapter 71: King's Capital. 2</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 72: A little girl of few words.  ">
 
+                <i>72</i>
 
+                <strong>Chapter 72: A little girl of few words.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 73: The King's Daughters.  ">
 
+                <i>73</i>
 
+                <strong>Chapter 73: The King's Daughters. </strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 74: The King's Daughters. 2">
 
+                <i>74</i>
 
+                <strong>Chapter 74: The King's Daughters. 2</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 75: I just do what I want.">
 
+                <i>75</i>
 
+                <strong>Chapter 75: I just do what I want.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 76: It's not like they're trying to keep secrets."
 
+              >
 
+                <i>76</i>
 
+                <strong>
 
+                  Chapter 76: It's not like they're trying to keep secrets.
 
+                </strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 77: My Master.">
 
+                <i>77</i>
 
+                <strong>Chapter 77: My Master.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 78: The game day.">
 
+                <i>78</i>
 
+                <strong>Chapter 78: The game day.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 79: The game day. 2">
 
+                <i>79</i>
 
+                <strong>Chapter 79: The game day. 2</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 80: Everything is Connected.">
 
+                <i>80</i>
 
+                <strong>Chapter 80: Everything is Connected.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 81: Sly Fox.">
 
+                <i>81</i>
 
+                <strong>Chapter 81: Sly Fox.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 82: The match is starting...">
 
+                <i>82</i>
 
+                <strong>Chapter 82: The match is starting...</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 83: Let the games begin!">
 
+                <i>83</i>
 
+                <strong>Chapter 83: Let the games begin!</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 84: Tatsuya Vs Einer.">
 
+                <i>84</i>
 
+                <strong>Chapter 84: Tatsuya Vs Einer.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 85: Tatsuya Vs Einer. 2">
 
+                <i>85</i>
 
+                <strong>Chapter 85: Tatsuya Vs Einer. 2</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 86: How can I not be excited?">
 
+                <i>86</i>
 
+                <strong>Chapter 86: How can I not be excited?</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 87: Victor Vs Tatsuya and Einer.">
 
+                <i>87</i>
 
+                <strong>Chapter 87: Victor Vs Tatsuya and Einer.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 88: A little monster was created.">
 
+                <i>88</i>
 
+                <strong>Chapter 88: A little monster was created.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 89: Teamwork.">
 
+                <i>89</i>
 
+                <strong>Chapter 89: Teamwork.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 90: The End. And the beginning.">
 
+                <i>90</i>
 
+                <strong>Chapter 90: The End. And the beginning.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 91: Wife time... And became famous.">
 
+                <i>91</i>
 
+                <strong>Chapter 91: Wife time... And became famous.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 92: Tatsuya Gained a Friend...">
 
+                <i>92</i>
 
+                <strong>Chapter 92: Tatsuya Gained a Friend...</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 93: Tatsuya Gained a Friend… 2">
 
+                <i>93</i>
 
+                <strong>Chapter 93: Tatsuya Gained a Friend… 2</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 94: Is Ophis a spoiled girl?">
 
+                <i>94</i>
 
+                <strong>Chapter 94: Is Ophis a spoiled girl?</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 95: The wives are feeling threatened.  "
 
+              >
 
+                <i>95</i>
 
+                <strong>Chapter 95: The wives are feeling threatened.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 96: Strange Place.">
 
+                <i>96</i>
 
+                <strong>Chapter 96: Strange Place.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 97: Two new weird friends.">
 
+                <i>97</i>
 
+                <strong>Chapter 97: Two new weird friends.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 98: An invitation from a Countess.  ">
 
+                <i>98</i>
 
+                <strong>Chapter 98: An invitation from a Countess.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 99: The Four Clans of Vampire Counts.">
 
+                <i>99</i>
 
+                <strong>Chapter 99: The Four Clans of Vampire Counts.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 100: The Four Clans of Vampire Counts. 2"
 
+              >
 
+                <i>100</i>
 
+                <strong>
 
+                  Chapter 100: The Four Clans of Vampire Counts. 2
 
+                </strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 101: The Perfect Maid is hiding Master's dirty secrets."
 
+              >
 
+                <i>101</i>
 
+                <strong>
 
+                  Chapter 101: The Perfect Maid is hiding Master's dirty
 
+                  secrets.
 
+                </strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 102: Ruby introduces a new world.">
 
+                <i>102</i>
 
+                <strong>Chapter 102: Ruby introduces a new world.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 103: Date.">
 
+                <i>103</i>
 
+                <strong>Chapter 103: Date.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 104: An unforgettable day.">
 
+                <i>104</i>
 
+                <strong>Chapter 104: An unforgettable day.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 105: Unexpected visits.">
 
+                <i>105</i>
 
+                <strong>Chapter 105: Unexpected visits.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 106: Memories from the past.">
 
+                <i>106</i>
 
+                <strong>Chapter 106: Memories from the past.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 107: Victor meets the in-laws.">
 
+                <i>107</i>
 
+                <strong>Chapter 107: Victor meets the in-laws.</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 108: Victor meets the in-laws. 2">
 
+                <i>108</i>
 
+                <strong>Chapter 108: Victor meets the in-laws. 2</strong>
 
+                <small>1yr</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 109: Victor meets the in-laws. 3  ">
 
+                <i>109</i>
 
+                <strong>Chapter 109: Victor meets the in-laws. 3</strong>
 
+                <small>12mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 110: The anger of a husband.">
 
+                <i>110</i>
 
+                <strong>Chapter 110: The anger of a husband.</strong>
 
+                <small>12mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 111: The anger of a husband. 2">
 
+                <i>111</i>
 
+                <strong>Chapter 111: The anger of a husband. 2</strong>
 
+                <small>12mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 112: An insane man.">
 
+                <i>112</i>
 
+                <strong>Chapter 112: An insane man.</strong>
 
+                <small>12mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 113: A monster created by god.">
 
+                <i>113</i>
 
+                <strong>Chapter 113: A monster created by god.</strong>
 
+                <small>12mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 114: Another crazy mother-in-law.">
 
+                <i>114</i>
 
+                <strong>Chapter 114: Another crazy mother-in-law.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 115: Another crazy mother-in-law. 2">
 
+                <i>115</i>
 
+                <strong>Chapter 115: Another crazy mother-in-law. 2</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 116: Two Mothers.">
 
+                <i>116</i>
 
+                <strong>Chapter 116: Two Mothers.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 117: The consequences of actions.">
 
+                <i>117</i>
 
+                <strong>Chapter 117: The consequences of actions.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 118: The consequences of actions. 2">
 
+                <i>118</i>
 
+                <strong>Chapter 118: The consequences of actions. 2</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 119: The king of all vampires.">
 
+                <i>119</i>
 
+                <strong>Chapter 119: The king of all vampires.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 120: The king of all vampires. 2">
 
+                <i>120</i>
 
+                <strong>Chapter 120: The king of all vampires. 2</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 121: A proposal from the king.">
 
+                <i>121</i>
 
+                <strong>Chapter 121: A proposal from the king.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 122: My mother-in-law is obsessed with me."
 
+              >
 
+                <i>122</i>
 
+                <strong>
 
+                  Chapter 122: My mother-in-law is obsessed with me.
 
+                </strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 123: The king's plan.">
 
+                <i>123</i>
 
+                <strong>Chapter 123: The king's plan.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 124: The king's plan. 2">
 
+                <i>124</i>
 
+                <strong>Chapter 124: The king's plan. 2</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 125: Sanguis noctis regis.">
 
+                <i>125</i>
 
+                <strong>Chapter 125: Sanguis noctis regis.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 126: The birth of a new pillar.">
 
+                <i>126</i>
 
+                <strong>Chapter 126: The birth of a new pillar.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 127: The love of a goddess.">
 
+                <i>127</i>
 
+                <strong>Chapter 127: The love of a goddess.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 128: Natashia is working hard for her happiness!"
 
+              >
 
+                <i>128</i>
 
+                <strong>
 
+                  Chapter 128: Natashia is working hard for her happiness!
 
+                </strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 129: The king is disappointed.">
 
+                <i>129</i>
 
+                <strong>Chapter 129: The king is disappointed.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 130: The consequences of being on top.">
 
+                <i>130</i>
 
+                <strong>Chapter 130: The consequences of being on top.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+          </ol>
 
+          <h3 className="sub-title">Volume 3 : A New Pillar.</h3>
 
+          <ol className={styles["chapter-list"]}>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 131: An existence that defies common sense."
 
+              >
 
+                <i>131</i>
 
+                <strong>
 
+                  Chapter 131: An existence that defies common sense.
 
+                </strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 132: An existence that defies common sense. 2"
 
+              >
 
+                <i>132</i>
 
+                <strong>
 
+                  Chapter 132: An existence that defies common sense. 2
 
+                </strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 133: My Beloved.">
 
+                <i>133</i>
 
+                <strong>Chapter 133: My Beloved.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 134: The supernatural world's interests in the new Count.  "
 
+              >
 
+                <i>134</i>
 
+                <strong>
 
+                  Chapter 134: The supernatural world's interests in the new
 
+                  Count.
 
+                </strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 135: They provoked the wrong monsters.">
 
+                <i>135</i>
 
+                <strong>Chapter 135: They provoked the wrong monsters.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 136: They provoke the wrong monsters. 2"
 
+              >
 
+                <i>136</i>
 
+                <strong>Chapter 136: They provoke the wrong monsters. 2</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 137: Farewells.">
 
+                <i>137</i>
 
+                <strong>Chapter 137: Farewells.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 138: A man of culture.  ">
 
+                <i>138</i>
 
+                <strong>Chapter 138: A man of culture. </strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 139: Victor returned home.">
 
+                <i>139</i>
 
+                <strong>Chapter 139: Victor returned home.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 140: Victor returned home. 2">
 
+                <i>140</i>
 
+                <strong>Chapter 140: Victor returned home. 2</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 141: A king is among us.">
 
+                <i>141</i>
 
+                <strong>Chapter 141: A king is among us.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 142: I am not an ungrateful child.">
 
+                <i>142</i>
 
+                <strong>Chapter 142: I am not an ungrateful child.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 143: A stubborn man.  ">
 
+                <i>143</i>
 
+                <strong>Chapter 143: A stubborn man. </strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 144: Report from June.">
 
+                <i>144</i>
 
+                <strong>Chapter 144: Report from June.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 145: Eternal rivals.">
 
+                <i>145</i>
 
+                <strong>Chapter 145: Eternal rivals.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 146: The Lost Club.">
 
+                <i>146</i>
 
+                <strong>Chapter 146: The Lost Club.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 147: Mongrel.">
 
+                <i>147</i>
 
+                <strong>Chapter 147: Mongrel.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 148: A woman who never forgets.">
 
+                <i>148</i>
 
+                <strong>Chapter 148: A woman who never forgets.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 149: The fifth count.">
 
+                <i>149</i>
 
+                <strong>Chapter 149: The fifth count.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 150: The Sweet Taste of Revenge.  ">
 
+                <i>150</i>
 
+                <strong>Chapter 150: The Sweet Taste of Revenge.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 151: A wife's ambition.">
 
+                <i>151</i>
 
+                <strong>Chapter 151: A wife's ambition.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 152: Natural Playboy.">
 
+                <i>152</i>
 
+                <strong>Chapter 152: Natural Playboy.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 153: Faith.">
 
+                <i>153</i>
 
+                <strong>Chapter 153: Faith.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 154: Onmyo Mage?">
 
+                <i>154</i>
 
+                <strong>Chapter 154: Onmyo Mage?</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 155: AMEN!!!">
 
+                <i>155</i>
 
+                <strong>Chapter 155: AMEN!!!</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 156: AMEN!!! 2">
 
+                <i>156</i>
 
+                <strong>Chapter 156: AMEN!!! 2</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 157: They never learn.">
 
+                <i>157</i>
 
+                <strong>Chapter 157: They never learn.</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 158: They never learn. 2">
 
+                <i>158</i>
 
+                <strong>Chapter 158: They never learn. 2</strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 159: They never learn. 3  ">
 
+                <i>159</i>
 
+                <strong>Chapter 159: They never learn. 3 </strong>
 
+                <small>11mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 160: Carnage.  ">
 
+                <i>160</i>
 
+                <strong>Chapter 160: Carnage. </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 161: A Lucky Man.">
 
+                <i>161</i>
 
+                <strong>Chapter 161: A Lucky Man.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 162: A lucky man. 2  ">
 
+                <i>162</i>
 
+                <strong>Chapter 162: A lucky man. 2 </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 163: Do you believe in god?  ">
 
+                <i>163</i>
 
+                <strong>Chapter 163: Do you believe in god? </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 164: Consequences.  ">
 
+                <i>164</i>
 
+                <strong>Chapter 164: Consequences. </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 165: My Maid.">
 
+                <i>165</i>
 
+                <strong>Chapter 165: My Maid.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 166: Clan Scarlett arrives.">
 
+                <i>166</i>
 
+                <strong>Chapter 166: Clan Scarlett arrives.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 167: Welcome to my humble abode.  ">
 
+                <i>167</i>
 
+                <strong>Chapter 167: Welcome to my humble abode.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 168: Mother.">
 
+                <i>168</i>
 
+                <strong>Chapter 168: Mother.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 169: Powers of the sisters.">
 
+                <i>169</i>
 
+                <strong>Chapter 169: Powers of the sisters.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 170: Mother and Mother.">
 
+                <i>170</i>
 
+                <strong>Chapter 170: Mother and Mother.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 171: Mother And Mother. 2">
 
+                <i>171</i>
 
+                <strong>Chapter 171: Mother And Mother. 2</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 172: Scathach and Victor.  ">
 
+                <i>172</i>
 
+                <strong>Chapter 172: Scathach and Victor. </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 173: Victor and Scathach. 2  ">
 
+                <i>173</i>
 
+                <strong>Chapter 173: Victor and Scathach. 2 </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 174: The obsession and love of a mother-in-law."
 
+              >
 
+                <i>174</i>
 
+                <strong>
 
+                  Chapter 174: The obsession and love of a mother-in-law.
 
+                </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 175: An angel sent by God.">
 
+                <i>175</i>
 
+                <strong>Chapter 175: An angel sent by God.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 176: An angel of vengeance.">
 
+                <i>176</i>
 
+                <strong>Chapter 176: An angel of vengeance.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 177: Everything is permitted.">
 
+                <i>177</i>
 
+                <strong>Chapter 177: Everything is permitted.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 178: If my god ordered it, I will do it.  "
 
+              >
 
+                <i>178</i>
 
+                <strong>
 
+                  Chapter 178: If my god ordered it, I will do it.
 
+                </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 179: My Maids, show me.">
 
+                <i>179</i>
 
+                <strong>Chapter 179: My Maids, show me.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 180: A Bloody Spectacle!  ">
 
+                <i>180</i>
 
+                <strong>Chapter 180: A Bloody Spectacle! </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 181: He is completely insane!">
 
+                <i>181</i>
 
+                <strong>Chapter 181: He is completely insane!</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 182: He's coming for you.">
 
+                <i>182</i>
 
+                <strong>Chapter 182: He's coming for you.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 183: He's coming for you. 2">
 
+                <i>183</i>
 
+                <strong>Chapter 183: He's coming for you. 2</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 184: He's coming for you. 3">
 
+                <i>184</i>
 
+                <strong>Chapter 184: He's coming for you. 3</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 185: Facing The Yanderes.">
 
+                <i>185</i>
 
+                <strong>Chapter 185: Facing The Yanderes.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 186: Interesting discoveries and consequences."
 
+              >
 
+                <i>186</i>
 
+                <strong>
 
+                  Chapter 186: Interesting discoveries and consequences.
 
+                </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 187: A wolf there, a wolf here, wolves everywhere!"
 
+              >
 
+                <i>187</i>
 
+                <strong>
 
+                  Chapter 187: A wolf there, a wolf here, wolves everywhere!
 
+                </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 188: A wolf there, a wolf here, wolves everywhere! 2"
 
+              >
 
+                <i>188</i>
 
+                <strong>
 
+                  Chapter 188: A wolf there, a wolf here, wolves everywhere! 2
 
+                </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 189: A wolf there, a wolf here, wolves everywhere! 3"
 
+              >
 
+                <i>189</i>
 
+                <strong>
 
+                  Chapter 189: A wolf there, a wolf here, wolves everywhere! 3
 
+                </strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 190: Resolving issues from the past.">
 
+                <i>190</i>
 
+                <strong>Chapter 190: Resolving issues from the past.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 191: What is your desire?">
 
+                <i>191</i>
 
+                <strong>Chapter 191: What is your desire?</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 192: The power of Alucard.">
 
+                <i>192</i>
 
+                <strong>Chapter 192: The power of Alucard.</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 193: The power of Alucard. 2">
 
+                <i>193</i>
 
+                <strong>Chapter 193: The power of Alucard. 2</strong>
 
+                <small>10mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 194: The power of Alucard. 3">
 
+                <i>194</i>
 
+                <strong>Chapter 194: The power of Alucard. 3</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 195: The power of Alucard. 4">
 
+                <i>195</i>
 
+                <strong>Chapter 195: The power of Alucard. 4</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 196: Sometimes you should just burn everything.  "
 
+              >
 
+                <i>196</i>
 
+                <strong>
 
+                  Chapter 196: Sometimes you should just burn everything.
 
+                </strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 197: Isn't that too easy? ">
 
+                <i>197</i>
 
+                <strong>Chapter 197: Isn't that too easy? </strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 198: Where is he!?  ">
 
+                <i>198</i>
 
+                <strong>Chapter 198: Where is he!? </strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 199: A normal day in Nightingale?">
 
+                <i>199</i>
 
+                <strong>Chapter 199: A normal day in Nightingale?</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 200: Discoveries.">
 
+                <i>200</i>
 
+                <strong>Chapter 200: Discoveries.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 201: Discoveries. 2">
 
+                <i>201</i>
 
+                <strong>Chapter 201: Discoveries. 2</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 202: Discoveries. 3">
 
+                <i>202</i>
 
+                <strong>Chapter 202: Discoveries. 3</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 203: I'm not the only one crazy out there."
 
+              >
 
+                <i>203</i>
 
+                <strong>
 
+                  Chapter 203: I'm not the only one crazy out there.
 
+                </strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 204: Bet, and legs are justice.">
 
+                <i>204</i>
 
+                <strong>Chapter 204: Bet, and legs are justice.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 205: Victor has strange luck.">
 
+                <i>205</i>
 
+                <strong>Chapter 205: Victor has strange luck.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 206: Vampire meets wolf and fox.">
 
+                <i>206</i>
 
+                <strong>Chapter 206: Vampire meets wolf and fox.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 207: Strange Situation.">
 
+                <i>207</i>
 
+                <strong>Chapter 207: Strange Situation.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 208: An innocent smile.">
 
+                <i>208</i>
 
+                <strong>Chapter 208: An innocent smile.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 209: Something is challenging Heaven, and it's not Lucifer."
 
+              >
 
+                <i>209</i>
 
+                <strong>
 
+                  Chapter 209: Something is challenging Heaven, and it's not
 
+                  Lucifer.
 
+                </strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 210: Come, my son. Tell your mother.">
 
+                <i>210</i>
 
+                <strong>Chapter 210: Come, my son. Tell your mother.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 211: A war of thousands of years.">
 
+                <i>211</i>
 
+                <strong>Chapter 211: A war of thousands of years.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 212: A Gentle Demon.">
 
+                <i>212</i>
 
+                <strong>Chapter 212: A Gentle Demon.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 213: I found you.">
 
+                <i>213</i>
 
+                <strong>Chapter 213: I found you.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 214: Four? Four? FOUR!?">
 
+                <i>214</i>
 
+                <strong>Chapter 214: Four? Four? FOUR!?</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 215: That day, I felt my mother-in-law to heaven."
 
+              >
 
+                <i>215</i>
 
+                <strong>
 
+                  Chapter 215: That day, I felt my mother-in-law to heaven.
 
+                </strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 216: The day Victor motivated his mother-in-law."
 
+              >
 
+                <i>216</i>
 
+                <strong>
 
+                  Chapter 216: The day Victor motivated his mother-in-law.
 
+                </strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 217: My mother-in-law is motivated, and she wants…"
 
+              >
 
+                <i>217</i>
 
+                <strong>
 
+                  Chapter 217: My mother-in-law is motivated, and she wants…
 
+                </strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 218: Cute.">
 
+                <i>218</i>
 
+                <strong>Chapter 218: Cute.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 219: So Much Chaos.">
 
+                <i>219</i>
 
+                <strong>Chapter 219: So Much Chaos.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 220: 'Welcome to the club'?  ">
 
+                <i>220</i>
 
+                <strong>Chapter 220: 'Welcome to the club'? </strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 221: Date! Date... Date....? EGG!">
 
+                <i>221</i>
 
+                <strong>Chapter 221: Date! Date... Date....? EGG!</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 222: My Gift to You.">
 
+                <i>222</i>
 
+                <strong>Chapter 222: My Gift to You.</strong>
 
+                <small>9mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 223: A Secret Only Mine.">
 
+                <i>223</i>
 
+                <strong>Chapter 223: A Secret Only Mine.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 224: So it begins.">
 
+                <i>224</i>
 
+                <strong>Chapter 224: So it begins.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 225: So it begins. 2">
 
+                <i>225</i>
 
+                <strong>Chapter 225: So it begins. 2</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 226: Ruby and Victor.">
 
+                <i>226</i>
 
+                <strong>Chapter 226: Ruby and Victor.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 227: Mother-in-law love!">
 
+                <i>227</i>
 
+                <strong>Chapter 227: Mother-in-law love!</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 228: The Power of the Fulger Clan.">
 
+                <i>228</i>
 
+                <strong>Chapter 228: The Power of the Fulger Clan.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 229: A shout of motivation.">
 
+                <i>229</i>
 
+                <strong>Chapter 229: A shout of motivation.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 230: My mother-in-law wants my naked body... Gulp."
 
+              >
 
+                <i>230</i>
 
+                <strong>
 
+                  Chapter 230: My mother-in-law wants my naked body... Gulp.
 
+                </strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 231: An old fox.  ">
 
+                <i>231</i>
 
+                <strong>Chapter 231: An old fox. </strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 232: Alucard wants revenge.">
 
+                <i>232</i>
 
+                <strong>Chapter 232: Alucard wants revenge.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter: 233: The consequences of being on top. 2"
 
+              >
 
+                <i>233</i>
 
+                <strong>
 
+                  Chapter: 233: The consequences of being on top. 2
 
+                </strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 234: Wrong Decisions of a King.">
 
+                <i>234</i>
 
+                <strong>Chapter 234: Wrong Decisions of a King.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 235: Reunion">
 
+                <i>235</i>
 
+                <strong>Chapter 235: Reunion</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 236: Is Eleonor Adrasteia my neighbor?">
 
+                <i>236</i>
 
+                <strong>Chapter 236: Is Eleonor Adrasteia my neighbor?</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 237: The world moves.">
 
+                <i>237</i>
 
+                <strong>Chapter 237: The world moves.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 238: The Witch Queen.">
 
+                <i>238</i>
 
+                <strong>Chapter 238: The Witch Queen.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 239: Anderson goes to visit his friend Alucard."
 
+              >
 
+                <i>239</i>
 
+                <strong>
 
+                  Chapter 239: Anderson goes to visit his friend Alucard.
 
+                </strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 240: Anderson goes to visit his friend Alucard. 2"
 
+              >
 
+                <i>240</i>
 
+                <strong>
 
+                  Chapter 240: Anderson goes to visit his friend Alucard. 2
 
+                </strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 241: Anderson goes to visit his friend Alucard. 3"
 
+              >
 
+                <i>241</i>
 
+                <strong>
 
+                  Chapter 241: Anderson goes to visit his friend Alucard. 3
 
+                </strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 242: Alpha Werewolf vs. Vampire Count.">
 
+                <i>242</i>
 
+                <strong>Chapter 242: Alpha Werewolf vs. Vampire Count.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 243: Special being.">
 
+                <i>243</i>
 
+                <strong>Chapter 243: Special being.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 244: Misunderstandings Happen.">
 
+                <i>244</i>
 
+                <strong>Chapter 244: Misunderstandings Happen.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 245: One Year and Six months.  ">
 
+                <i>245</i>
 
+                <strong>Chapter 245: One Year and Six months.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 246: The Goddess Aphrodite.">
 
+                <i>246</i>
 
+                <strong>Chapter 246: The Goddess Aphrodite.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 247: The Goddess Aphrodite. 2">
 
+                <i>247</i>
 
+                <strong>Chapter 247: The Goddess Aphrodite. 2</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 248: The Mistake of the Goddess of Love."
 
+              >
 
+                <i>248</i>
 
+                <strong>
 
+                  Chapter 248: The Mistake of the Goddess of Love.
 
+                </strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 249: Alucard has become an expert in causing chaos."
 
+              >
 
+                <i>249</i>
 
+                <strong>
 
+                  Chapter 249: Alucard has become an expert in causing chaos.
 
+                </strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+          </ol>
 
+          <h3 className="sub-title">
 
+            Volume 4 : Discoveries, Changes, And War.
 
+          </h3>
 
+          <ol className={styles["chapter-list"]}>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 250: Belial loves say the name of... ALUCARD! "
 
+              >
 
+                <i>250</i>
 
+                <strong>
 
+                  Chapter 250: Belial loves say the name of... ALUCARD!
 
+                </strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 251: Demon.">
 
+                <i>251</i>
 
+                <strong>Chapter 251: Demon.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 252: Fulfilling Past Promises.">
 
+                <i>252</i>
 
+                <strong>Chapter 252: Fulfilling Past Promises.</strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 253: Pepper is not a Hooligan!... Maybe."
 
+              >
 
+                <i>253</i>
 
+                <strong>
 
+                  Chapter 253: Pepper is not a Hooligan!... Maybe.
 
+                </strong>
 
+                <small>8mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 254: Is Roberta a Failure of a Maid?">
 
+                <i>254</i>
 
+                <strong>Chapter 254: Is Roberta a Failure of a Maid?</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 255: Gorilla meets an Old friend. Gorilla Meets Female vampire… Gorilla knows the secret…"
 
+              >
 
+                <i>255</i>
 
+                <strong>
 
+                  Chapter 255: Gorilla meets an Old friend. Gorilla Meets Female
 
+                  vampire… Gorilla knows the secret…
 
+                </strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 256: Gorilla’s surprised.">
 
+                <i>256</i>
 
+                <strong>Chapter 256: Gorilla’s surprised.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 257: Gorilla meets Berserker woman.">
 
+                <i>257</i>
 
+                <strong>Chapter 257: Gorilla meets Berserker woman.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 258: My mother-in-law's patience disappeared"
 
+              >
 
+                <i>258</i>
 
+                <strong>
 
+                  Chapter 258: My mother-in-law's patience disappeared
 
+                </strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 259: Gates of Limbo.">
 
+                <i>259</i>
 
+                <strong>Chapter 259: Gates of Limbo.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 260: A true member of Clan Alucard, Eve Alucard."
 
+              >
 
+                <i>260</i>
 
+                <strong>
 
+                  Chapter 260: A true member of Clan Alucard, Eve Alucard.
 
+                </strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 261: Second Progenitor.">
 
+                <i>261</i>
 
+                <strong>Chapter 261: Second Progenitor.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 262: Second Progenitor 2">
 
+                <i>262</i>
 
+                <strong>Chapter 262: Second Progenitor 2</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 263: Witch wants the … Of Alucard.">
 
+                <i>263</i>
 
+                <strong>Chapter 263: Witch wants the … Of Alucard.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 264: Selena Moriarty, Daughter of queen witch."
 
+              >
 
+                <i>264</i>
 
+                <strong>
 
+                  Chapter 264: Selena Moriarty, Daughter of queen witch.
 
+                </strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 265: My mother-in-law is on fire...">
 
+                <i>265</i>
 
+                <strong>Chapter 265: My mother-in-law is on fire...</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 266: My mother-in-law is on fire… 2">
 
+                <i>266</i>
 
+                <strong>Chapter 266: My mother-in-law is on fire… 2</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 267: Maid and Witch.">
 
+                <i>267</i>
 
+                <strong>Chapter 267: Maid and Witch.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 268: Maid and Witch. 2">
 
+                <i>268</i>
 
+                <strong>Chapter 268: Maid and Witch. 2</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 269: The definition of insanity?">
 
+                <i>269</i>
 
+                <strong>Chapter 269: The definition of insanity?</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 270: Feeding my pet.">
 
+                <i>270</i>
 
+                <strong>Chapter 270: Feeding my pet.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 271: The man that until the fruit of sin."
 
+              >
 
+                <i>271</i>
 
+                <strong>
 
+                  Chapter 271: The man that until the fruit of sin.
 
+                </strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 272: A point of change.  ">
 
+                <i>272</i>
 
+                <strong>Chapter 272: A point of change. </strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 273: Roxanne Alucard.">
 
+                <i>273</i>
 
+                <strong>Chapter 273: Roxanne Alucard.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 274: Scathach joins the club.">
 
+                <i>274</i>
 
+                <strong>Chapter 274: Scathach joins the club.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 275: Scathach joins the club. 2">
 
+                <i>275</i>
 
+                <strong>Chapter 275: Scathach joins the club. 2</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 276: Violet wants the...">
 
+                <i>276</i>
 
+                <strong>Chapter 276: Violet wants the...</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 277: Vampire meets goddess again…">
 
+                <i>277</i>
 
+                <strong>Chapter 277: Vampire meets goddess again…</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 278: Clues on how to get home.">
 
+                <i>278</i>
 
+                <strong>Chapter 278: Clues on how to get home.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 279: I want you. ">
 
+                <i>279</i>
 
+                <strong>Chapter 279: I want you.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 280: Victor makes a proposal to…">
 
+                <i>280</i>
 
+                <strong>Chapter 280: Victor makes a proposal to…</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 281: Vlad problems.">
 
+                <i>281</i>
 
+                <strong>Chapter 281: Vlad problems.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 282: Snakes hiding in the dark.">
 
+                <i>282</i>
 
+                <strong>Chapter 282: Snakes hiding in the dark.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 283: Snakes hiding in the dark. 2">
 
+                <i>283</i>
 
+                <strong>Chapter 283: Snakes hiding in the dark. 2</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 284: Mother-in-law’s secrets.">
 
+                <i>284</i>
 
+                <strong>Chapter 284: Mother-in-law’s secrets.</strong>
 
+                <small>7mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 285: Mother-in-law's secrets. 2">
 
+                <i>285</i>
 
+                <strong>Chapter 285: Mother-in-law's secrets. 2</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 286: Your legacy.">
 
+                <i>286</i>
 
+                <strong>Chapter 286: Your legacy.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 287: Your legacy. 2  ">
 
+                <i>287</i>
 
+                <strong>Chapter 287: Your legacy. 2 </strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 288: Your legacy. 3">
 
+                <i>288</i>
 
+                <strong>Chapter 288: Your legacy. 3</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 289: The result of a choice.">
 
+                <i>289</i>
 
+                <strong>Chapter 289: The result of a choice.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 290: One small step, one big change... A turning point."
 
+              >
 
+                <i>290</i>
 
+                <strong>
 
+                  Chapter 290: One small step, one big change... A turning
 
+                  point.
 
+                </strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 291: Changes are not always welcome, but they are necessary."
 
+              >
 
+                <i>291</i>
 
+                <strong>
 
+                  Chapter 291: Changes are not always welcome, but they are
 
+                  necessary.
 
+                </strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 292: Changes are not always welcome, but they are necessary. 2"
 
+              >
 
+                <i>292</i>
 
+                <strong>
 
+                  Chapter 292: Changes are not always welcome, but they are
 
+                  necessary. 2
 
+                </strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 293: Victor’s change.">
 
+                <i>293</i>
 
+                <strong>Chapter 293: Victor’s change.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title=" Chapter 294: Alucard has changed… And this is terrifying."
 
+              >
 
+                <i>294</i>
 
+                <strong>
 
+                  Chapter 294: Alucard has changed… And this is terrifying.
 
+                </strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 295: My Wife, forgive me.">
 
+                <i>295</i>
 
+                <strong>Chapter 295: My Wife, forgive me.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 296: My Wife, forgive me. 2">
 
+                <i>296</i>
 
+                <strong>Chapter 296: My Wife, forgive me. 2</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 297: Persephone, The Queen Of The Underworld."
 
+              >
 
+                <i>297</i>
 
+                <strong>
 
+                  Chapter 297: Persephone, The Queen Of The Underworld.
 
+                </strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 298: Persephone, The Queen Of The Underworld. 2"
 
+              >
 
+                <i>298</i>
 
+                <strong>
 
+                  Chapter 298: Persephone, The Queen Of The Underworld. 2
 
+                </strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 299: Two choices, one obvious decision."
 
+              >
 
+                <i>299</i>
 
+                <strong>Chapter 299: Two choices, one obvious decision.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 300: My Beloved Maids.">
 
+                <i>300</i>
 
+                <strong>Chapter 300: My Beloved Maids.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 301: Blood Sacrifice.">
 
+                <i>301</i>
 
+                <strong>Chapter 301: Blood Sacrifice.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 302: Junketsu.">
 
+                <i>302</i>
 
+                <strong>Chapter 302: Junketsu.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 303: Agnes’ change.    ">
 
+                <i>303</i>
 
+                <strong>Chapter 303: Agnes’ change.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 304: The Snow Clan Treasure.">
 
+                <i>304</i>
 
+                <strong>Chapter 304: The Snow Clan Treasure.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 305: Scathach feels weird for several reasons."
 
+              >
 
+                <i>305</i>
 
+                <strong>
 
+                  Chapter 305: Scathach feels weird for several reasons.
 
+                </strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 306: Training.">
 
+                <i>306</i>
 
+                <strong>Chapter 306: Training.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 307: Sweet time with my wife and mothers-in-law."
 
+              >
 
+                <i>307</i>
 
+                <strong>
 
+                  Chapter 307: Sweet time with my wife and mothers-in-law.
 
+                </strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 308: I love my mother-in-law.   ">
 
+                <i>308</i>
 
+                <strong>Chapter 308: I love my mother-in-law.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 309: The promise I made.">
 
+                <i>309</i>
 
+                <strong>Chapter 309: The promise I made.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 310: Things to sort out before leaving."
 
+              >
 
+                <i>310</i>
 
+                <strong>Chapter 310: Things to sort out before leaving.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 311: My Favorite Hunter.">
 
+                <i>311</i>
 
+                <strong>Chapter 311: My Favorite Hunter.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 312: Mizuki meets Alucard.">
 
+                <i>312</i>
 
+                <strong>Chapter 312: Mizuki meets Alucard.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 313: Mizuki desperately tries not to fall."
 
+              >
 
+                <i>313</i>
 
+                <strong>
 
+                  Chapter 313: Mizuki desperately tries not to fall.
 
+                </strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 314: Mizuki falls.">
 
+                <i>314</i>
 
+                <strong>Chapter 314: Mizuki falls.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 315: Victor is a Yandere.">
 
+                <i>315</i>
 
+                <strong>Chapter 315: Victor is a Yandere.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 316: Witches.">
 
+                <i>316</i>
 
+                <strong>Chapter 316: Witches.</strong>
 
+                <small>6mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 317: Violet Snow’s Responsibilities.">
 
+                <i>317</i>
 
+                <strong>Chapter 317: Violet Snow’s Responsibilities.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 318: Sasha Is Just Like Her Mother!">
 
+                <i>318</i>
 
+                <strong>Chapter 318: Sasha Is Just Like Her Mother!</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 319: Ruby’s Experiments and Discoveries."
 
+              >
 
+                <i>319</i>
 
+                <strong>
 
+                  Chapter 319: Ruby’s Experiments and Discoveries.
 
+                </strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 320: The Wives Are United.">
 
+                <i>320</i>
 
+                <strong>Chapter 320: The Wives Are United.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 321: The Wives Are United. 2">
 
+                <i>321</i>
 
+                <strong>Chapter 321: The Wives Are United. 2</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 322: Feelings Put on a Piece of Paper.">
 
+                <i>322</i>
 
+                <strong>Chapter 322: Feelings Put on a Piece of Paper.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 323: Seductive Vampire Tricks Greedy Witch."
 
+              >
 
+                <i>323</i>
 
+                <strong>
 
+                  Chapter 323: Seductive Vampire Tricks Greedy Witch.
 
+                </strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 324: The Gates of Tartarus.">
 
+                <i>324</i>
 
+                <strong>Chapter 324: The Gates of Tartarus.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 325: Let's Dance!!">
 
+                <i>325</i>
 
+                <strong>Chapter 325: Let's Dance!!</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 326: Countess Eleanor Adrestia. 3">
 
+                <i>326</i>
 
+                <strong>Chapter 326: Countess Eleanor Adrestia. 3</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 327: Master Scathach Scarlett has acquired new disciples."
 
+              >
 
+                <i>327</i>
 
+                <strong>
 
+                  Chapter 327: Master Scathach Scarlett has acquired new
 
+                  disciples.
 
+                </strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 328: Hell Makes Its Move.">
 
+                <i>328</i>
 
+                <strong>Chapter 328: Hell Makes Its Move.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 329: Fulger Sisters. ">
 
+                <i>329</i>
 
+                <strong>Chapter 329: Fulger Sisters.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 330: Betrayals.">
 
+                <i>330</i>
 
+                <strong>Chapter 330: Betrayals.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 331: Karma is a bitch.">
 
+                <i>331</i>
 
+                <strong>Chapter 331: Karma is a bitch.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 332: A Saint and a Succubus.">
 
+                <i>332</i>
 
+                <strong>Chapter 332: A Saint and a Succubus.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 333: A Saint and a Succubus. 2">
 
+                <i>333</i>
 
+                <strong>Chapter 333: A Saint and a Succubus. 2</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 334: Pepper And Lacus training with her daddy?"
 
+              >
 
+                <i>334</i>
 
+                <strong>
 
+                  Chapter 334: Pepper And Lacus training with her daddy?
 
+                </strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 335: Ophis…? Ophis! OPHIS!">
 
+                <i>335</i>
 
+                <strong>Chapter 335: Ophis…? Ophis! OPHIS!</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 336: Ophis meets a strange girl.">
 
+                <i>336</i>
 
+                <strong>Chapter 336: Ophis meets a strange girl.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 337: Hyakki Yakō.">
 
+                <i>337</i>
 
+                <strong>Chapter 337: Hyakki Yakō.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 338: Haruna, The Moonlight Kitsune.">
 
+                <i>338</i>
 
+                <strong>Chapter 338: Haruna, The Moonlight Kitsune.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 339: Ophis has disappeared.">
 
+                <i>339</i>
 
+                <strong>Chapter 339: Ophis has disappeared.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 340: Father is coming.">
 
+                <i>340</i>
 
+                <strong>Chapter 340: Father is coming.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 341: Two girls against the world.">
 
+                <i>341</i>
 
+                <strong>Chapter 341: Two girls against the world.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 342: She is not a disease.">
 
+                <i>342</i>
 
+                <strong>Chapter 342: She is not a disease.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 343: Crimson Nightmare.">
 
+                <i>343</i>
 
+                <strong>Chapter 343: Crimson Nightmare.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 344: Crimson Nightmare. 2">
 
+                <i>344</i>
 
+                <strong>Chapter 344: Crimson Nightmare. 2</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 345: Hypocrisy.">
 
+                <i>345</i>
 
+                <strong>Chapter 345: Hypocrisy.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 346: Like a Storm God.">
 
+                <i>346</i>
 
+                <strong>Chapter 346: Like a Storm God.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 347: Hunting Day, Hunter's Day.  ">
 
+                <i>347</i>
 
+                <strong>Chapter 347: Hunting Day, Hunter's Day.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 348: Ophis no longer wants to leave her father's side."
 
+              >
 
+                <i>348</i>
 
+                <strong>
 
+                  Chapter 348: Ophis no longer wants to leave her father's side.
 
+                </strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 349: The Mindset of a Wise King.">
 
+                <i>349</i>
 
+                <strong>Chapter 349: The Mindset of a Wise King.</strong>
 
+                <small>5mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 350: Welcome to my humble abode.">
 
+                <i>350</i>
 
+                <strong>Chapter 350: Welcome to my humble abode.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 351: Welcome to hell.">
 
+                <i>351</i>
 
+                <strong>Chapter 351: Welcome to hell.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 352: Hahaha~, Welcome, Stranger!">
 
+                <i>352</i>
 
+                <strong>Chapter 352: Hahaha~, Welcome, Stranger!</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 353: Oni meets Vampire.">
 
+                <i>353</i>
 
+                <strong>Chapter 353: Oni meets Vampire.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 354: Oni Meets vampire 2.">
 
+                <i>354</i>
 
+                <strong>Chapter 354: Oni Meets vampire 2.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 355: Fox Girl Meet Vampire.">
 
+                <i>355</i>
 
+                <strong>Chapter 355: Fox Girl Meet Vampire.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 356: Hadō.">
 
+                <i>356</i>
 
+                <strong>Chapter 356: Hadō.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 357: A Good Woman.">
 
+                <i>357</i>
 
+                <strong>Chapter 357: A Good Woman.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 358: Your mother is…">
 
+                <i>358</i>
 
+                <strong>Chapter 358: Your mother is…</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 359: Lucky man.">
 
+                <i>359</i>
 
+                <strong>Chapter 359: Lucky man.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 360: The Power of the Strongest Female Vampire."
 
+              >
 
+                <i>360</i>
 
+                <strong>
 
+                  Chapter 360: The Power of the Strongest Female Vampire.
 
+                </strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 361: The Power of the Strongest Female Vampire. 2"
 
+              >
 
+                <i>361</i>
 
+                <strong>
 
+                  Chapter 361: The Power of the Strongest Female Vampire. 2
 
+                </strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 362: The Ice Empress.">
 
+                <i>362</i>
 
+                <strong>Chapter 362: The Ice Empress.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 363: The Ice Empress. 2">
 
+                <i>363</i>
 
+                <strong>Chapter 363: The Ice Empress. 2</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 364: It is always women.  ">
 
+                <i>364</i>
 
+                <strong>Chapter 364: It is always women. </strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 365: Vlad Dracul Tepes fears the new 'Dracul'."
 
+              >
 
+                <i>365</i>
 
+                <strong>
 
+                  Chapter 365: Vlad Dracul Tepes fears the new 'Dracul'.
 
+                </strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 366: Destiny can be unpredictable sometimes."
 
+              >
 
+                <i>366</i>
 
+                <strong>
 
+                  Chapter 366: Destiny can be unpredictable sometimes.
 
+                </strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 367: The love of a Yandere.">
 
+                <i>367</i>
 
+                <strong>Chapter 367: The love of a Yandere.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 368: Kurama.">
 
+                <i>368</i>
 
+                <strong>Chapter 368: Kurama.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 369: Sasha took her mother's teachings very seriously.  "
 
+              >
 
+                <i>369</i>
 
+                <strong>
 
+                  Chapter 369: Sasha took her mother's teachings very seriously.
 
+                </strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 370: Ruby and Victor.">
 
+                <i>370</i>
 
+                <strong>Chapter 370: Ruby and Victor.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 371: Scathach's feelings.">
 
+                <i>371</i>
 
+                <strong>Chapter 371: Scathach's feelings.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 372: An Unforgettable Night.">
 
+                <i>372</i>
 
+                <strong>Chapter 372: An Unforgettable Night.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 373: A not-so-pleasant encounter.  ">
 
+                <i>373</i>
 
+                <strong>Chapter 373: A not-so-pleasant encounter.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 374: A not-so-pleasant encounter. 2">
 
+                <i>374</i>
 
+                <strong>Chapter 374: A not-so-pleasant encounter. 2</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 375: Sasha and Victor.">
 
+                <i>375</i>
 
+                <strong>Chapter 375: Sasha and Victor.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 376: Sasha and Victor. 2">
 
+                <i>376</i>
 
+                <strong>Chapter 376: Sasha and Victor. 2</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 377: Sasha and Victor. 3">
 
+                <i>377</i>
 
+                <strong>Chapter 377: Sasha and Victor. 3</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 378: Endless Depravity.">
 
+                <i>378</i>
 
+                <strong>Chapter 378: Endless Depravity.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 379: Scathach wants Victor just for her."
 
+              >
 
+                <i>379</i>
 
+                <strong>
 
+                  Chapter 379: Scathach wants Victor just for her.
 
+                </strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 380: Victor is playing with fire.">
 
+                <i>380</i>
 
+                <strong>Chapter 380: Victor is playing with fire.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 381: Two Progenitors. Dracul and Alucard."
 
+              >
 
+                <i>381</i>
 
+                <strong>
 
+                  Chapter 381: Two Progenitors. Dracul and Alucard.
 
+                </strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 382: Two Progenitors. Dracul and Alucard. 2"
 
+              >
 
+                <i>382</i>
 
+                <strong>
 
+                  Chapter 382: Two Progenitors. Dracul and Alucard. 2
 
+                </strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 383: Advice from a friend.">
 
+                <i>383</i>
 
+                <strong>Chapter 383: Advice from a friend.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 384: Scathach is jealous.  ">
 
+                <i>384</i>
 
+                <strong>Chapter 384: Scathach is jealous. </strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 385: Victor is a good father... The best."
 
+              >
 
+                <i>385</i>
 
+                <strong>
 
+                  Chapter 385: Victor is a good father... The best.
 
+                </strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 386: A sister she never knew.">
 
+                <i>386</i>
 
+                <strong>Chapter 386: A sister she never knew.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 387: Count Alucard's Daughter.  ">
 
+                <i>387</i>
 
+                <strong>Chapter 387: Count Alucard's Daughter.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 388: The Consequences of an Action.">
 
+                <i>388</i>
 
+                <strong>Chapter 388: The Consequences of an Action.</strong>
 
+                <small>4mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 389: Visiting a God.">
 
+                <i>389</i>
 
+                <strong>Chapter 389: Visiting a God.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 390: Nero doesn't want to walk away from her father."
 
+              >
 
+                <i>390</i>
 
+                <strong>
 
+                  Chapter 390: Nero doesn't want to walk away from her father.
 
+                </strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 391: God.">
 
+                <i>391</i>
 
+                <strong>Chapter 391: God.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 392: God. 2">
 
+                <i>392</i>
 
+                <strong>Chapter 392: God. 2</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 393: God. 3">
 
+                <i>393</i>
 
+                <strong>Chapter 393: God. 3</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 394: Maids.  ">
 
+                <i>394</i>
 
+                <strong>Chapter 394: Maids. </strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 395: My Beloved Maids.">
 
+                <i>395</i>
 
+                <strong>Chapter 395: My Beloved Maids.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 396: Shooting himself in the foot.">
 
+                <i>396</i>
 
+                <strong>Chapter 396: Shooting himself in the foot.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 397: A sensitive point for Victor.">
 
+                <i>397</i>
 
+                <strong>Chapter 397: A sensitive point for Victor.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 398: Is Aphrodite a Good Friend!?">
 
+                <i>398</i>
 
+                <strong>Chapter 398: Is Aphrodite a Good Friend!?</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 399: Anna and Aphrodite, a friendship of over 10 years."
 
+              >
 
+                <i>399</i>
 
+                <strong>
 
+                  Chapter 399: Anna and Aphrodite, a friendship of over 10
 
+                  years.
 
+                </strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 400: Thoughts, Plans, and Decisions.">
 
+                <i>400</i>
 
+                <strong>Chapter 400: Thoughts, Plans, and Decisions.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 401: A New Name, and an important matter."
 
+              >
 
+                <i>401</i>
 
+                <strong>
 
+                  Chapter 401: A New Name, and an important matter.
 
+                </strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 402: Strong Women.">
 
+                <i>402</i>
 
+                <strong>Chapter 402: Strong Women.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 403: Strong woman. 2">
 
+                <i>403</i>
 
+                <strong>Chapter 403: Strong woman. 2</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 404: The past that defines us…">
 
+                <i>404</i>
 
+                <strong>Chapter 404: The past that defines us…</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 405: The Past That Defines Us… 2">
 
+                <i>405</i>
 
+                <strong>Chapter 405: The Past That Defines Us… 2</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 406: An Older Vampire's Desire.">
 
+                <i>406</i>
 
+                <strong>Chapter 406: An Older Vampire's Desire.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 407: Nero Meets With her grandmother.">
 
+                <i>407</i>
 
+                <strong>Chapter 407: Nero Meets With her grandmother.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 408: The Love of Another Mother.">
 
+                <i>408</i>
 
+                <strong>Chapter 408: The Love of Another Mother.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 409: Daughter.">
 
+                <i>409</i>
 
+                <strong>Chapter 409: Daughter.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 410: An existence that breaks common sense."
 
+              >
 
+                <i>410</i>
 
+                <strong>
 
+                  Chapter 410: An existence that breaks common sense.
 
+                </strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 411: Be careful what you desire...">
 
+                <i>411</i>
 
+                <strong>Chapter 411: Be careful what you desire...</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 412: Anna is the best mom.">
 
+                <i>412</i>
 
+                <strong>Chapter 412: Anna is the best mom.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 413: Choose wisely">
 
+                <i>413</i>
 
+                <strong>Chapter 413: Choose wisely</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 414: The highest degree of heresy.">
 
+                <i>414</i>
 
+                <strong>Chapter 414: The highest degree of heresy.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 415: A vote of confidence.">
 
+                <i>415</i>
 
+                <strong>Chapter 415: A vote of confidence.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 416: Strange Occurrences.">
 
+                <i>416</i>
 
+                <strong>Chapter 416: Strange Occurrences.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 417: Demons move.">
 
+                <i>417</i>
 
+                <strong>Chapter 417: Demons move.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 418: A Bad Foreboding.">
 
+                <i>418</i>
 
+                <strong>Chapter 418: A Bad Foreboding.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 419: Don't made a Yandere Angry.">
 
+                <i>419</i>
 
+                <strong>Chapter 419: Don't made a Yandere Angry.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 420: Pepper meets Nero.">
 
+                <i>420</i>
 
+                <strong>Chapter 420: Pepper meets Nero.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 421: Pepper Scarlett.">
 
+                <i>421</i>
 
+                <strong>Chapter 421: Pepper Scarlett.</strong>
 
+                <small>3mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 422: I can't take it anymore~!">
 
+                <i>422</i>
 
+                <strong>Chapter 422: I can't take it anymore~!</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 423: Natashia is a good friend.">
 
+                <i>423</i>
 
+                <strong>Chapter 423: Natashia is a good friend.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 424: Pepper's Worries.">
 
+                <i>424</i>
 
+                <strong>Chapter 424: Pepper's Worries.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 425: The day I destroyed my mother in law."
 
+              >
 
+                <i>425</i>
 
+                <strong>
 
+                  Chapter 425: The day I destroyed my mother in law.
 
+                </strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 426: Warfall Problems.">
 
+                <i>426</i>
 
+                <strong>Chapter 426: Warfall Problems.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 427: The day my mother in law became my wife."
 
+              >
 
+                <i>427</i>
 
+                <strong>
 
+                  Chapter 427: The day my mother in law became my wife.
 
+                </strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 428: Violet has become a great woman.">
 
+                <i>428</i>
 
+                <strong>Chapter 428: Violet has become a great woman.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 429: Ruby's Obsession. ">
 
+                <i>429</i>
 
+                <strong>Chapter 429: Ruby's Obsession.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 430: Desire.">
 
+                <i>430</i>
 
+                <strong>Chapter 430: Desire.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 431: The Wife Who Has No Inhibitions.">
 
+                <i>431</i>
 
+                <strong>Chapter 431: The Wife Who Has No Inhibitions.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 432: ELEGANT!">
 
+                <i>432</i>
 
+                <strong>Chapter 432: ELEGANT!</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 433: The meeting.">
 
+                <i>433</i>
 
+                <strong>Chapter 433: The meeting.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 434: The meeting. 2">
 
+                <i>434</i>
 
+                <strong>Chapter 434: The meeting. 2</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 435: The meeting. 3">
 
+                <i>435</i>
 
+                <strong>Chapter 435: The meeting. 3</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 436: Dotings Fathers.">
 
+                <i>436</i>
 
+                <strong>Chapter 436: Dotings Fathers.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 437: Respect.">
 
+                <i>437</i>
 
+                <strong>Chapter 437: Respect.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 438: A Father's Feelings.">
 
+                <i>438</i>
 
+                <strong>Chapter 438: A Father's Feelings.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 449: What has been lost cannot be recovered so easily."
 
+              >
 
+                <i>439</i>
 
+                <strong>
 
+                  Chapter 449: What has been lost cannot be recovered so easily.
 
+                </strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 440: Agnes lost… And determination.">
 
+                <i>440</i>
 
+                <strong>Chapter 440: Agnes lost… And determination.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 441: Determination.">
 
+                <i>441</i>
 
+                <strong>Chapter 441: Determination.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 442: Obscene Desire.">
 
+                <i>442</i>
 
+                <strong>Chapter 442: Obscene Desire.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 443: A Strong Heart.">
 
+                <i>443</i>
 
+                <strong>Chapter 443: A Strong Heart.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 444:The dedication of a husband.">
 
+                <i>444</i>
 
+                <strong>Chapter 444:The dedication of a husband.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 445: Highest-Level Yandere.">
 
+                <i>445</i>
 
+                <strong>Chapter 445: Highest-Level Yandere.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 446: The First Wife.">
 
+                <i>446</i>
 
+                <strong>Chapter 446: The First Wife.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 447: The 'Love' of a Goddess of Love.  "
 
+              >
 
+                <i>447</i>
 
+                <strong>Chapter 447: The 'Love' of a Goddess of Love.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 448: My will.">
 
+                <i>448</i>
 
+                <strong>Chapter 448: My will.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 449: Alucard joined the chat group.">
 
+                <i>449</i>
 
+                <strong>Chapter 449: Alucard joined the chat group.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 450: True Warriors.">
 
+                <i>450</i>
 
+                <strong>Chapter 450: True Warriors.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 451: Victims of their own whims.">
 
+                <i>451</i>
 
+                <strong>Chapter 451: Victims of their own whims.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 452: Apex predator.">
 
+                <i>452</i>
 
+                <strong>Chapter 452: Apex predator.</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 453: Apex Predator. 2">
 
+                <i>453</i>
 
+                <strong>Chapter 453: Apex Predator. 2</strong>
 
+                <small>2mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 454: A Master!">
 
+                <i>454</i>
 
+                <strong>Chapter 454: A Master!</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 455: The Power to Shape Creation.">
 
+                <i>455</i>
 
+                <strong>Chapter 455: The Power to Shape Creation.</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 456: A Mass Destruction Team.">
 
+                <i>456</i>
 
+                <strong>Chapter 456: A Mass Destruction Team.</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 457: The sword of Clan Adrasteia.">
 
+                <i>457</i>
 
+                <strong>Chapter 457: The sword of Clan Adrasteia.</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a
 
+                href=""
 
+                title="Chapter 458: My mother-in-law can't hold back anymore."
 
+              >
 
+                <i>458</i>
 
+                <strong>
 
+                  Chapter 458: My mother-in-law can't hold back anymore.
 
+                </strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 459: A worthy opponent.">
 
+                <i>459</i>
 
+                <strong>Chapter 459: A worthy opponent.</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 460: A worthy opponent. 2">
 
+                <i>460</i>
 
+                <strong>Chapter 460: A worthy opponent. 2</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 461: A worthy opponent. 3">
 
+                <i>461</i>
 
+                <strong>Chapter 461: A worthy opponent. 3</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 462: The Hidden Boss.">
 
+                <i>462</i>
 
+                <strong>Chapter 462: The Hidden Boss.</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 463: A Casual Act That Changed Fate.">
 
+                <i>463</i>
 
+                <strong>Chapter 463: A Casual Act That Changed Fate.</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 464: Scathach has arrived.">
 
+                <i>464</i>
 
+                <strong>Chapter 464: Scathach has arrived.</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 465: A squadmate.">
 
+                <i>465</i>
 
+                <strong>Chapter 465: A squadmate.</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 466: Self-respect.">
 
+                <i>466</i>
 
+                <strong>Chapter 466: Self-respect.</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 467: Self respect. 2">
 
+                <i>467</i>
 
+                <strong>Chapter 467: Self respect. 2</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 468: An Unexpected Meeting.">
 
+                <i>468</i>
 
+                <strong>Chapter 468: An Unexpected Meeting.</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 469: An unexpected meeting. 2">
 
+                <i>469</i>
 
+                <strong>Chapter 469: An unexpected meeting. 2</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 470: Bonds Forged in the Past.">
 
+                <i>470</i>
 
+                <strong>Chapter 470: Bonds Forged in the Past.</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+            <li>
 
+              <a href="" title="Chapter 471: Bonds Forged in the Past. 2">
 
+                <i>471</i>
 
+                <strong>Chapter 471: Bonds Forged in the Past. 2</strong>
 
+                <small>1mth</small>
 
+              </a>
 
+            </li>
 
+          </ol>
 
+        </div>
 
+      </div>
 
+    </main>
 
+  );
 
+};
 
+
 
+export default Novel;

+ 29 - 0
public/icons.svg
Datei anzeigen 

@@ -28,4 +28,33 @@
 
     <symbol id="moon" viewBox="0 0 16 16">
 
     <symbol id="moon" viewBox="0 0 16 16">
 
         <path fill-rule="evenodd" d="M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z"/>
 
         <path fill-rule="evenodd" d="M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z"/>
 
     </symbol>
 
     </symbol>
 
+    <symbol id="items" viewBox="0 0 1024 1024">
 
+        <path d="M0 704l256 0 0 128-256 0 0-128Z"></path>
 
+        <path d="M0 192l256 0 0 128-256 0 0-128Z"></path>
 
+        <path d="M0 448l256 0 0 128-256 0 0-128Z"></path>
 
+        <path d="M384 192l640 0 0 128-640 0 0-128Z"></path>
 
+        <path d="M384 448l640 0 0 128-640 0 0-128Z"></path>
 
+        <path d="M384 704l640 0 0 128-640 0 0-128Z"></path>
 
+    </symbol>
 
+    <symbol id="set" viewBox="0 0 1027 1024">
 
+        <path d="M1005.37728 614.4l-115.2-64c0-12.8 0-25.6 0-38.4s0-25.6 0-38.4l115.2-64C1024.57728 403.2 1030.97728 384 1018.17728 364.8l-128-224c-6.4-12.8-25.6-19.2-44.8-12.8l-115.2 64c-19.2-12.8-38.4-25.6-64-38.4l0-128C672.57728 12.8 659.77728 0 640.57728 0L384.57728 0C365.37728 0 352.57728 12.8 352.57728 32l0 128c-19.2 12.8-44.8 19.2-64 38.4l-115.2-64C160.57728 121.6 141.37728 128 134.97728 147.2l-128 224C-5.82272 384 0.57728 403.2 13.37728 409.6l115.2 64C128.57728 486.4 128.57728 499.2 128.57728 512s0 25.6 0 38.4l-115.2 64C0.57728 620.8-5.82272 640 6.97728 659.2l128 224c6.4 12.8 25.6 19.2 44.8 12.8l115.2-64c19.2 12.8 38.4 25.6 64 38.4l0 128C352.57728 1011.2 365.37728 1024 384.57728 1024l256 0c19.2 0 32-12.8 32-32l0-128c19.2-12.8 44.8-19.2 64-38.4l115.2 64c12.8 6.4 32 6.4 44.8-12.8l128-224C1030.97728 640 1024.57728 620.8 1005.37728 614.4zM838.97728 774.4l-115.2-70.4c-38.4 44.8-89.6 70.4-147.2 83.2l0 134.4L448.57728 921.6l0-134.4c-57.6-12.8-108.8-44.8-147.2-83.2l-115.2 70.4-64-108.8 115.2-70.4C230.97728 569.6 224.57728 544 224.57728 512s6.4-57.6 12.8-83.2L122.17728 358.4l64-108.8 115.2 70.4C339.77728 275.2 390.97728 243.2 448.57728 230.4L448.57728 96l128 0 0 134.4c57.6 12.8 108.8 44.8 147.2 83.2l115.2-70.4 64 108.8-115.2 70.4c6.4 25.6 12.8 57.6 12.8 83.2s-6.4 57.6-12.8 83.2l115.2 70.4L838.97728 774.4z"></path>
 
+        <path d="M512.57728 320C403.77728 320 320.57728 403.2 320.57728 512s83.2 192 192 192 192-83.2 192-192S621.37728 320 512.57728 320zM512.57728 640c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128S582.97728 640 512.57728 640z"></path>
 
+    </symbol>
 
+    <symbol id="reviews" viewBox="0 0 1024 1024">
 
+        <path d="M313.59706 927.9913H159.9985v-831.9922H255.9976v255.9976L351.9967 255.9976 447.9958 351.9967v-255.9976h287.9973v323.644966a510.075218 510.075218 0 0 1 95.9991 20.479808V63.9994A63.9994 63.9994 0 0 0 767.864801 0H128.126799C93.183126 0 63.9994 28.671731 63.9994 63.9994v895.9916a63.9994 63.9994 0 0 0 64.127399 63.9994H421.756046a356.860654 356.860654 0 0 1-108.158986-95.9991z"></path>
 
+        <path d="M895.9916 843.512092l13.247876-22.527789c12.415884-21.055803 18.751824-44.031587 18.751824-68.991353 0-96.767093-105.151014-175.99835-255.9976-175.99835s-255.9976 79.231257-255.9976 175.99835 105.151014 175.99835 255.9976 175.99835c44.79958 0 87.231182-7.359931 124.606832-21.119802l23.871776-8.767918 75.519292 12.543883V843.512092zM991.9907 1023.9904l-162.17448-27.007747A457.59571 457.59571 0 0 1 671.9937 1023.9904C477.563523 1023.9904 319.997 911.99145 319.997 751.99295S477.563523 479.9955 671.9937 479.9955 1023.9904 591.99445 1023.9904 751.99295c0 43.135596-11.455893 82.815224-31.9997 117.694897V1023.9904z"></path>
 
+        <path d="M559.99475 751.99295m-47.99955 0a47.99955 47.99955 0 1 0 95.9991 0 47.99955 47.99955 0 1 0-95.9991 0Z"></path>
 
+        <path d="M783.99265 751.99295m-47.99955 0a47.99955 47.99955 0 1 0 95.9991 0 47.99955 47.99955 0 1 0-95.9991 0Z"></path>
 
+    </symbol>
 
+    <symbol id="help_bold" viewBox="0 0 1024 1024">
 
+        <path d="M512 992A480 480 0 1 1 512 32a480 480 0 0 1 0 960z m0-106.66666688A373.33333312 373.33333312 0 1 0 512 138.66666688a373.33333312 373.33333312 0 0 0 0 746.66666624z m53.33333344-262.02666656H458.66666656v-29.70666656c0-58.50666656 30.98666625-112.90666687 82.02666656-142.45333312 28.8-16.90666688 38.13333375-51.19999969 21.76000032-79.14666657-16.90666688-28.8-51.19999969-38.13333375-78.29333344-22.24000031-19.03999969 11.62666687-30.13333312 30.40000031-30.13333312 50.93333344h-106.66666688c0-58.66666688 31.2-111.46666688 82.02666656-142.45333313 79.14666656-46.39999969 178.66666688-19.46666625 225.06666656 59.83999969 46.39999969 79.14666656 19.46666625 178.66666688-60.05333343 225.22666688-18.13333313 10.50666656-29.06666625 29.65333312-29.06666625 50.29333312v29.70666656zM510.56 778.66666625a53.33333344 53.33333344 0 1 1 0-106.66666594 53.33333344 53.33333344 0 0 1 0 106.66666594z"></path>
 
+    </symbol>
 
+    <symbol id="font-dn" viewBox="0 0 1260 1024">
 
+        <path d="M450.132791 39.305973c-15.722389-55.028362-94.334336-55.028362-110.056725 0L2.044697 943.343357c-7.861195 31.444779 7.861195 62.889557 31.444779 78.611946 31.444779 7.861195 62.889557-7.861195 78.611946-31.444779L222.158147 707.507518l353.753759 0 102.19553 275.141812c7.861195 31.444779 47.167168 47.167168 78.611946 31.444779 31.444779-7.861195 47.167168-47.167168 31.444779-78.611946L450.132791 39.305973zM261.46412 589.589598 395.104429 227.974645l133.640309 361.614953L261.46412 589.589598z"></path>
 
+        <path d="M1196.946282 589.589598l-353.753759 0c-31.444779 0-62.889557 23.583584-62.889557 62.889557S811.747745 707.507518 851.053718 707.507518l353.753759 0C1236.252255 707.507518 1259.835839 683.923934 1259.835839 644.617961S1236.252255 589.589598 1196.946282 589.589598z"></path>
 
+    </symbol>
 
+    <symbol id="font-up" viewBox="0 0 1260 1024">
 
+        <path d="M450.132791 39.305973c-15.722389-55.028362-94.334336-55.028362-110.056725 0L2.044697 943.343357c-7.861195 31.444779 7.861195 62.889557 31.444779 78.611946 31.444779 7.861195 62.889557-7.861195 78.611946-31.444779L222.158147 707.507518l353.753759 0 102.19553 275.141812c7.861195 31.444779 47.167168 47.167168 78.611946 31.444779 31.444779-7.861195 47.167168-47.167168 31.444779-78.611946L450.132791 39.305973zM261.46412 589.589598 395.104429 227.974645l133.640309 361.614953L261.46412 589.589598z"></path>
 
+        <path d="M1196.946282 589.589598l-117.91792 0L1079.028362 471.671678c0-31.444779-23.583584-62.889557-62.889557-62.889557S961.110443 440.2269 961.110443 471.671678l0 117.91792-117.91792 0c-31.444779 0-62.889557 23.583584-62.889557 62.889557S811.747745 707.507518 851.053718 707.507518l117.91792 0 0 117.91792c0 31.444779 23.583584 62.889557 62.889557 62.889557s62.889557-23.583584 62.889557-62.889557L1094.750752 707.507518l117.91792 0C1236.252255 707.507518 1259.835839 683.923934 1259.835839 644.617961S1236.252255 589.589598 1196.946282 589.589598z"></path>
 
+    </symbol>
 
 </svg>
 
 </svg>

+ 58 - 0
styles/chapter.module.scss
Datei anzeigen 

@@ -0,0 +1,58 @@
 
+.chapter-page {
 
+  @apply w-full lg:w-0 lg:max-w-4xl flex-1 p-5 bg-white;
 
+  :global(.dark) & {
 
+    @apply bg-gray-800;
 
+  }
 
+}
 
+.chapter-header {
 
+  @apply flex px-5 items-center relative;
 
+}
 
+.novel {
 
+  @apply w-full;
 
+  header {
 
+    @apply mb-5;
 
+  }
 
+  h1 {
 
+    @apply text-2xl font-bold;
 
+  }
 
+  p {
 
+    @apply my-3;
 
+  }
 
+}
 
+.toolbar {
 
+  @apply fixed bottom-0 left-0 w-full bg-gray-900 z-30; // hidden;
 
+  @apply lg:right-0 lg:w-11 lg:left-auto lg:h-full lg:flex lg:items-center lg:justify-center ; 
+  .toolbar-items {
 
+    @apply flex lg:flex-col lg:w-full;
 
+  }
 
+  .toolbar-item {
 
+    // position: relative;
 
+    // display: flex;
 
+    // height: 100%;
 
+    // flex-basis: 100%;
 
+    // cursor: pointer;
 
+    // flex-direction: column;
 
+    // align-items: center;
 
+    // justify-content: center;
 
+    // gap: 0.25rem;
 
+    // border-color: currentColor;
 
+
 
+    @apply flex-1 flex items-center justify-center py-5;
 
+    svg {
 
+      @apply w-full w-5 h-5;
 
+    }
 
+  }
 
+}
 
+.toolbar-display {
 
+  @apply fixed bottom-0 left-0 w-full bg-gray-900 z-40 pt-4 pb-5 px-5;
 
+  @apply relative w-96;
 
+  .toolbar-display-title {
 
+    @apply text-base mb-2;
 
+  }
 
+  .toolbar-display-label {
 
+    @apply text-sm mb-2 mt-5;
 
+  }
 
+  // :global(.btn-group){
 
+  //   @apply w-full;
 
+  // }
 
+}

+ 200 - 84
styles/globals.scss
Datei anzeigen 

@@ -3,95 +3,136 @@
 
 @tailwind utilities;
 
 @tailwind utilities;
 
 
 
 @layer base {
 
 @layer base {
 
-  *,
 
-  ::before,
 
-  ::after {
 
-    color-scheme: light;
 
+  // *,
 
+  // ::before,
 
+  // ::after {
 
+  //   color-scheme: light;
 
 
 
-    --color-bg-default: #f3f4f6;
 
-    --color-paper: #fff;
 
-    --color-paper-alpha: rgba(255, 255, 255, 0.5);
 
+  //   --color-bg-default: #f3f4f6;
 
+  //   --color-bg-default-alpha: rgba(243, 244, 246, 0.5);
 
+  //   --color-paper: #fff;
 
+  //   --color-paper-alpha: rgba(255, 255, 255, 0.5);
 
 
 
-    // primary
 
-    --color-primary: #1976d2;
 
-    // secondary
 
-    --color-secondary: #9c27b0;
 
-    // error
 
-    --color-error: #d32f2f;
 
-    // warning
 
-    --color-warning: #ed6c02;
 
-    // info
 
-    --color-info: #0288d1;
 
-    // success
 
-    --color-success: #2e7d32;
 
-    --color-gray-light: #808080;
 
-    --color-gray-dark: #29292e;
 
-  }
 
-  .dark *,
 
-  .dark ::before,
 
-  .dark ::after {
 
-    color-scheme: dark;
 
+  //   // primary
 
+  //   --color-primary: #1976d2;
 
+  //   // secondary
 
+  //   --color-secondary: #9c27b0;
 
+  //   // error
 
+  //   --color-error: #d32f2f;
 
+  //   // warning
 
+  //   --color-warning: #ed6c02;
 
+  //   // info
 
+  //   --color-info: #0288d1;
 
+  //   // success
 
+  //   --color-success: #2e7d32;
 
+  //   --color-gray-light: #808080;
 
+  //   --color-gray-dark: #29292e;
 
+  // }
 
+  // .dark *,
 
+  // .dark ::before,
 
+  // .dark ::after {
 
+  //   color-scheme: dark;
 
+
 
+  //   --color-bg-default: #0a1929; // #18181b;
 
+  //   --color-paper: rgb(39, 39, 42);
 
+  //   --color-paper-alpha: rgba(39, 39, 42, 0.5);
 
+
 
+  //   // primary
 
+  //   --color-primary: #90caf9;
 
+  //   // secondary
 
+  //   --color-secondary: #ce93d8;
 
+  //   // error
 
+  //   --color-error: #f44336;
 
+  //   // warning
 
+  //   --color-warning: #ffa726;
 
+  //   // info
 
+  //   --color-info: #29b6f6;
 
+  //   // success
 
+  //   --color-success: #66bb6a;
 
 
 
-    --color-bg-default: #18181b;
 
-    --color-paper: #121212;
 
-    --color-paper-alpha: rgba(18, 18, 18, 0.5);
 
+  //   --color-gray-light: #ffffff;
 
+  //   --color-gray-dark: #e0e0e0;
 
+  // }
 
 
 
-    // primary
 
-    --color-primary: #90caf9;
 
-    // secondary
 
-    --color-secondary: #ce93d8;
 
-    // error
 
-    --color-error: #f44336;
 
-    // warning
 
-    --color-warning: #ffa726;
 
-    // info
 
-    --color-info: #29b6f6;
 
-    // success
 
-    --color-success: #66bb6a;
 
+  // * {
 
+  //   /* @apply selection:bg-hb; */
 
+  //   /* @apply transition selection:bg-hb;
 
+  //     transition-timing-function: line; */
 
+  // }
 
+
 
+  .dark {
 
+    color-scheme: dark;
 
+  }
 
 
 
-    --color-gray-light: #808080;
 
-    --color-gray-dark: #29292e;
 
+  html {
 
+    height: 100%;
 
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
 
   }
 
   }
 
 
 
-  * {
 
-    /* @apply selection:bg-hb; */
 
-    /* @apply transition selection:bg-hb;
 
-      transition-timing-function: line; */
 
+  abbr[title] {
 
+    text-decoration: none;
 
   }
 
   }
 
 
 
   body {
 
   body {
 
-    @apply bg-default text-gray-dark font-sans;
 
+    // @apply bg-default text-gray-dark font-sans relative;
 
+    @apply font-sans min-h-full antialiased text-slate-700 dark:text-slate-200 bg-white dark:bg-slate-900;
 
   }
 
   }
 
 
 
   a {
 
   a {
 
-    @apply text-gray-dark;
 
+    // @apply text-gray-dark;
 
+  }
 
+  svg {
 
+    @apply fill-current;
 
   }
 
   }
 
 }
 
 }
 
 @layer components {
 
 @layer components {
 
   .container {
 
   .container {
 
-    @apply px-4 mx-auto;
 
+    @apply px-4 mx-auto overflow-hidden;
 
+  }
 
+  .btn {
 
+    @apply inline-flex px-4 py-3 font-medium rounded items-center justify-center text-sm whitespace-nowrap; // space-x-3;
 
+    &.btn-primary {
 
+      @apply bg-sky-500;
 
+    }
 
+    svg {
 
+      @apply w-4 h-4;
 
+    }
 
+  }
 
+  .btn-group {
 
+    @apply inline-flex rounded;
 
+    .btn {
 
+      @apply flex-1;
 
+      &:not(:last-of-type) {
 
+        @apply rounded-r-none;
 
+      }
 
+      &:not(:first-of-type) {
 
+        @apply rounded-l-none;
 
+      }
 
+    }
 
   }
 
   }
 
 }
 
 }
 
 #__next {
 
 #__next {
 
-  @apply w-full overflow-hidden min-h-screen;
 
+  @apply w-full min-h-screen relative;
 
 }
 
 }
 
 .header {
 
 .header {
 
-  @apply sticky border-b py-2 shadow bg-paper z-40;
 
+  // @apply sticky border-b py-2 shadow bg-paper-alpha backdrop-blur z-40 top-0;
 
+  @apply py-4 sticky top-0 z-40 w-full backdrop-blur flex-none  border-b border-slate-900/10 dark:border-slate-50/[0.06] bg-white/60  dark:bg-slate-900/75;
 
+
 
   .container {
 
   .container {
 
-    @apply flex justify-between items-center;
 
+    @apply flex justify-between items-center overflow-visible;
 
   }
 
   }
 
   .logo {
 
   .logo {
 
-    @apply flex items-center flex-shrink-0 mr-5 select-none md:mr-10;
 
+    @apply flex items-center flex-shrink-0 select-none;
 
     img {
 
     img {
 
-      @apply w-10 h-10 mr-2;
 
+      @apply w-8 h-8 mr-2;
 
     }
 
     }
 
     span {
 
     span {
 
-      @apply hidden text-2xl font-bold md:block;
 
+      @apply hidden text-xl font-bold md:block text-black dark:text-white;
 
     }
 
     }
 
   }
 
   }
 
   .menu {
 
   .menu {
 
-    @apply hidden absolute left-0 top-full w-full py-5 bg-paper-alpha backdrop-blur;
 
-    @apply md:flex md:relative md:items-center md:p-0;
 
+    @apply hidden absolute left-0 top-full w-full py-5 bg-white dark:bg-slate-800; // bg-paper;
 
+    @apply md:flex md:relative md:items-center md:p-0 md:bg-transparent md:dark:bg-transparent;
 
     nav {
 
     nav {
 
       @apply flex-1;
 
       @apply flex-1;
 
       ul {
 
       ul {
 
@@ -102,24 +143,26 @@
 
       }
 
       }
 
     }
 
     }
 
     .menu-item {
 
     .menu-item {
 
-      @apply flex py-2 px-5 items-center text-gray-dark md:text-gray-light md:hover:text-primary;
 
+      @apply flex py-2 px-5 items-center text-sm leading-6 font-semibold text-slate-700 dark:text-slate-200 hover:text-sky-500 dark:hover:text-sky-400; // text-gray-dark md:text-gray-light md:hover:text-primary;
 
       svg {
 
       svg {
 
         @apply mr-1 fill-current;
 
         @apply mr-1 fill-current;
 
       }
 
       }
 
     }
 
     }
 
     .sub-menu {
 
     .sub-menu {
 
       @apply hidden;
 
       @apply hidden;
 
-      @apply absolute bg-default shadow-lg rounded-xl top-full;
 
+      @apply absolute shadow-lg rounded-xl top-full bg-slate-100; // bg-default;
 
+      @apply text-slate-900 dark:bg-slate-800 dark:text-slate-400 dark:shadow dark:shadow-white/10 dark:highlight-white/10;
 
       &::before {
 
       &::before {
 
         content: "";
 
         content: "";
 
-        position: absolute;
 
-        bottom: 100%;
 
-        left: 25px;
 
-        border-bottom: 7px solid var(--color-bg-default);
 
-        border-left: 6px dashed transparent;
 
-        border-right: 6px dashed transparent;
 
-        height: 0;
 
-        width: 0;
 
+        // position: absolute;
 
+        // bottom: 100%;
 
+        // left: 25px;
 
+        // border-bottom: 7px solid var(--color-bg-default);
 
+        // border-left: 6px dashed transparent;
 
+        // border-right: 6px dashed transparent;
 
+        // height: 0;
 
+        // width: 0;
 
+        @apply w-0 h-0 absolute bottom-full left-[25px] border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-b-[7px] border-b-slate-100 dark:border-b-slate-700;
 
       }
 
       }
 
       ul {
 
       ul {
 
         @apply py-2 block rounded-l-lg whitespace-nowrap;
 
         @apply py-2 block rounded-l-lg whitespace-nowrap;
 
@@ -128,14 +171,14 @@
 
         }
 
         }
 
       }
 
       }
 
       .sub-menu-list {
 
       .sub-menu-list {
 
-        @apply absolute left-[132px] hidden top-0 h-[312px] w-[508px] bg-paper rounded-r-lg py-2 px-4;
 
+        @apply absolute left-[132px] hidden top-0 h-[312px] w-[508px] rounded-r-lg py-2 px-4 bg-white dark:bg-slate-900 dark:highlight-white/10;
 
         p {
 
         p {
 
           @apply flex flex-wrap;
 
           @apply flex flex-wrap;
 
           strong {
 
           strong {
 
-            @apply block w-full py-1 px-4;
 
+            @apply block w-full py-1 px-4 text-slate-800 dark:text-slate-200;
 
           }
 
           }
 
           a {
 
           a {
 
-            @apply w-1/3 block hover:bg-default py-1 px-4 rounded;
 
+            @apply w-1/3 block py-1 px-4 rounded hover:bg-slate-100 dark:hover:bg-slate-800;
 
           }
 
           }
 
         }
 
         }
 
       }
 
       }
 
@@ -145,7 +188,7 @@
 
           @apply block py-3 px-4;
 
           @apply block py-3 px-4;
 
         }
 
         }
 
         &:hover {
 
         &:hover {
 
-          @apply bg-paper;
 
+          @apply bg-white dark:hover:bg-slate-900;
 
           .sub-menu-list {
 
           .sub-menu-list {
 
             @apply block;
 
             @apply block;
 
           }
 
           }
 
@@ -166,16 +209,33 @@
 
   .search-input {
 
   .search-input {
 
     @apply relative mx-5 my-2 md:my-0;
 
     @apply relative mx-5 my-2 md:my-0;
 
     .icon-search {
 
     .icon-search {
 
-      @apply absolute left-2 h-full w-5;
 
+      @apply absolute left-2 h-full w-5 fill-sky-500;
 
     }
 
     }
 
     input {
 
     input {
 
-      @apply block w-full border rounded-full pl-10 pr-4 py-1;
 
+      @apply block w-full border border-sky-500 rounded-lg pl-10 pr-4 py-1 focus:outline-none bg-transparent; // border-primary text-primary;
 
+    }
 
+  }
 
+  .buttons {
 
+    @apply flex;
 
+  }
 
+  .btn {
 
+    @apply inline-flex items-center justify-center relative bg-transparent cursor-pointer text-center p-2 w-8 h-8 rounded-lg border border-sky-500 text-sky-500; // border-primary text-primary;
 
+    svg {
 
+      @apply w-5 h-5 fill-current;
 
+      &.icon-sun {
 
+        @apply dark:hidden;
 
+      }
 
+      &.icon-moon {
 
+        @apply hidden dark:block;
 
+      }
 
+    }
 
+    + .btn {
 
+      @apply ml-2;
 
     }
 
     }
 
   }
 
   }
 
   .menu-btn {
 
   .menu-btn {
 
-    @apply bg-primary rounded-full p-2 md:hidden;
 
+    @apply md:hidden;
 
     svg {
 
     svg {
 
-      @apply w-5 h-5 fill-white;
 
       &.icon-menu {
 
       &.icon-menu {
 
         rect {
 
         rect {
 
           transform: translate(0, 0) rotateZ(0) scaleX(1);
 
           transform: translate(0, 0) rotateZ(0) scaleX(1);
 
@@ -187,7 +247,7 @@
 
   }
 
   }
 
   &.open {
 
   &.open {
 
     .menu {
 
     .menu {
 
-      @apply block;
 
+      @apply block md:flex;
 
     }
 
     }
 
 
 
     .menu-btn {
 
     .menu-btn {
 
@@ -210,9 +270,12 @@
 
       }
 
       }
 
     }
 
     }
 
   }
 
   }
 
+  .breadcrumbs {
 
+    @apply hidden lg:flex;
 
+  }
 
 }
 
 }
 
 .novel-title {
 
 .novel-title {
 
-  @apply text-xl font-bold mt-5 mb-2 flex justify-between;
 
+  @apply mt-5 mb-2 flex justify-between text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200;
 
 }
 
 }
 
 .novel-list {
 
 .novel-list {
 
   @apply flex flex-wrap -mx-1.5 md:-mx-2 lg:-mx-4;
 
   @apply flex flex-wrap -mx-1.5 md:-mx-2 lg:-mx-4;
 
@@ -228,10 +291,10 @@
 
   }
 
   }
 
 }
 
 }
 
 .novel-item-title {
 
 .novel-item-title {
 
-  @apply line-clamp-2 text-xs font-bold leading-none my-1 lg:text-sm;
 
+  @apply line-clamp-2 text-xs font-bold leading-none my-1 lg:text-sm text-slate-700 dark:text-white;
 
 }
 
 }
 
 .novel-item-desc {
 
 .novel-item-desc {
 
-  @apply text-xs text-gray-light leading-none whitespace-nowrap text-ellipsis block overflow-hidden w-full;
 
+  @apply text-xs leading-none whitespace-nowrap text-ellipsis block overflow-hidden w-full;
 
 }
 
 }
 
 .novel-cover {
 
 .novel-cover {
 
   @apply block before:block before:pt-[135%] relative;
 
   @apply block before:block before:pt-[135%] relative;
 
@@ -304,11 +367,11 @@
 
   }
 
   }
 
 }
 
 }
 
 .tabs {
 
 .tabs {
 
-  @apply flex justify-start mb-5;
 
+  @apply border-b border-slate-200 space-x-6 flex whitespace-nowrap dark:border-slate-200/5;
 
   .tab {
 
   .tab {
 
-    @apply h-11 border-b-4 border-b-transparent font-bold mr-5;
 
+    @apply flex text-sm leading-6 font-semibold pt-3 pb-2.5 border-b-2 -mb-px text-slate-900 border-transparent hover:border-slate-300 dark:text-slate-200 dark:hover:border-slate-700;
 
     &.active {
 
     &.active {
 
-      @apply border-b-primary text-primary;
 
+      @apply text-sky-500 border-current;
 
     }
 
     }
 
   }
 
   }
 
 }
 
 }
 
@@ -316,8 +379,61 @@
 
   @apply flex flex-wrap justify-start gap-2;
 
   @apply flex flex-wrap justify-start gap-2;
 
 }
 
 }
 
 .tag {
 
 .tag {
 
-  @apply inline-flex items-center cursor-pointer duration-300 text-gray-900  bg-gray-100 rounded px-2.5 py-2 hover:text-primary hover:ring-1 hover:ring-primary;
 
+  @apply inline-flex items-center cursor-pointer text-sm text-gray-900 bg-gray-100 rounded px-2.5 py-2  hover:ring-1 hover:ring-blue-400  dark:text-white hover:text-blue-600 dark:hover:text-blue-500 dark:bg-white/10 ring-inset ring-1 ring-transparent  dark:hover:ring-blue-500;
 
 }
 
 }
 
 .sub-title {
 
 .sub-title {
 
   @apply text-lg font-bold mt-4 mb-2;
 
   @apply text-lg font-bold mt-4 mb-2;
 
 }
 
 }
 
+.breadcrumbs {
 
+  @apply max-w-full overflow-x-auto;
 
+  ul {
 
+    @apply flex items-center whitespace-nowrap;
 
+    li {
 
+      @apply flex items-center;
 
+      a {
 
+        @apply flex cursor-pointer items-center hover:underline;
 
+
 
+        &:focus {
 
+          @apply outline-none;
 
+        }
 
+        &:focus-visible {
 
+          outline: 2px solid currentColor;
 
+          outline-offset: 2px;
 
+        }
 
+      }
 
+      + *:before {
 
+        content: "";
 
+        @apply ml-2 mr-3 block h-1.5 w-1.5 rotate-45 transform opacity-40;
 
+        border-top: 1px solid;
 
+        border-right: 1px solid;
 
+        background-color: transparent;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+.footer {
 
+  @apply mx-auto mt-10 w-full px-4 sm:px-6 lg:px-8 text-center;
 
+  .container {
 
+    @apply border-t border-slate-900/5 py-10;
 
+  }
 
+
 
+  .logo {
 
+    @apply inline-flex items-center justify-center flex-shrink-0 select-none;
 
+    img {
 
+      @apply w-8 h-8 mr-2;
 
+    }
 
+    span {
 
+      @apply hidden text-2xl font-bold md:block text-black dark:text-white;
 
+    }
 
+  }
 
+  .copyright {
 
+    @apply mt-5 text-center text-sm leading-6 text-slate-500;
 
+  }
 
+  .links {
 
+    @apply mt-16 flex items-center justify-center space-x-4 text-sm font-semibold leading-6 text-slate-700;
 
+  }
 
+  .divider {
 
+    @apply h-4 w-px bg-slate-500/20;
 
+  }
 
+}

+ 56 - 15
styles/novel-info.module.scss
Datei anzeigen 

@@ -1,19 +1,15 @@
 
 .novel-wrap {
 
 .novel-wrap {
 
   @apply bg-cover bg-center overflow-hidden relative;
 
   @apply bg-cover bg-center overflow-hidden relative;
 
-  @apply before:absolute before:inset-0 before:bg-white before:bg-opacity-60 before:backdrop-blur;
 
+  @apply before:absolute before:inset-0 before:bg-gradient-to-b before:from-white/80 before:to-white/50;
 
+  &::before {
 
+    backdrop-filter: blur(8px);
 
+    :global(.dark) & {
 
+      @apply bg-gradient-to-b from-black/50 to-black/80;
 
+    }
 
+  }
 
 }
 
 }
 
 .novel-container {
 
 .novel-container {
 
-  @apply container relative;
 
-}
 
-.crumbs {
 
-  @apply flex items-center my-4;
 
-  svg {
 
-    @apply w-5 h-5;
 
-  }
 
-  a,
 
-  span {
 
-    @apply mr-1;
 
-  }
 
+  @apply container relative px-4 mx-auto;
 
 }
 
 }
 
 .novel-info {
 
 .novel-info {
 
   @apply flex pb-5;
 
   @apply flex pb-5;
 
@@ -23,9 +19,12 @@
 
   .nove-info-body {
 
   .nove-info-body {
 
     @apply w-0 flex-1 flex flex-col justify-between;
 
     @apply w-0 flex-1 flex flex-col justify-between;
 
     h1 {
 
     h1 {
 
-      @apply w-full text-xl font-bold md:text-3xl lg:text-4xl;
 
+      @apply w-full text-xl font-bold md:text-3xl lg:text-4xl text-black;
 
+      :global(.dark) & {
 
+        @apply text-white;
 
+      }
 
       small {
 
       small {
 
-        @apply text-xs inline-block align-middle px-2 py-0.5 bg-primary text-white rounded ml-2;
 
+        @apply text-xs inline-block align-middle px-2 py-0.5 text-white rounded ml-2  bg-blue-600;
 
       }
 
       }
 
     }
 
     }
 
     h2 {
 
     h2 {
 
@@ -42,7 +41,49 @@
 
       @apply flex;
 
       @apply flex;
 
     }
 
     }
 
     .button {
 
     .button {
 
-      @apply block bg-primary text-white px-4 py-2 rounded-md uppercase lg:text-lg;
 
+      @apply block text-white px-4 py-2 rounded-md uppercase lg:text-lg select-none bg-gradient-to-r from-blue-600 to-blue-800 transition-all;
 
+      :global(.dark) & {
 
+        @apply from-blue-600 to-blue-900;
 
+      }
 
+    }
 
+  }
 
+}
 
+.novel-text {
 
+  @apply text-sm;
 
+  p {
 
+    @apply my-2;
 
+  }
 
+}
 
+.chapter-list {
 
+  @apply grid gap-y-4 lg:grid-cols-2 lg:gap-x-10 xl:grid-cols-3;
 
+  li {
 
+    @apply border-b text-sm lg:text-base border-b-slate-100;
 
+    :global(.dark) & {
 
+      @apply border-b-slate-700;
 
+    }
 
+    &,
 
+    a {
 
+      @apply flex;
 
+    }
 
+    a {
 
+      @apply w-full h-full py-2 hover:bg-slate-50;
 
+      :global(.dark) & {
 
+        @apply hover:bg-slate-800;
 
+      }
 
+      &:hover {
 
+        strong {
 
+          text-decoration: underline;
 
+        }
 
+      }
 
+    }
 
+    i {
 
+      @apply w-9 mr-1 flex-shrink-0 not-italic text-slate-400;
 
+    }
 
+    strong {
 
+      @apply block font-normal flex-1;
 
+    }
 
+    small {
 
+      @apply text-slate-400 ml-2;
 
     }
 
     }
 
   }
 
   }
 
 }
 
 }

+ 370 - 18
tailwind.config.js
Datei anzeigen 

@@ -1,7 +1,48 @@
 
 /** @type {import('tailwindcss').Config} */
 
 /** @type {import('tailwindcss').Config} */
 
-const lineClamp = require("@tailwindcss/line-clamp");
 
+// const lineClamp = require("@tailwindcss/line-clamp");
 
+
 
+// module.exports = {
 
+//   content: [
 
+//     "./pages/**/*.{js,ts,jsx,tsx}",
 
+//     "./src/**/*.{js,ts,jsx,tsx}",
 
+//     "./components/**/*.{js,ts,jsx,tsx}",
 
+//   ],
 
+//   darkMode: "class",
 
+//   theme: {
 
+//     extend: {
 
+//       colors: {
 
+//         default: "var(--color-bg-default)",
 
+//         "default-alpha": "var(--color-bg-default-alpha)",
 
+//         paper: "var(--color-paper)",
 
+//         "paper-alpha": "var(--color-paper-alpha)",
 
+//         primary: "var(--color-primary)",
 
+//         secondary: "var(--color-secondary)",
 
+//         error: "var(--color-error)",
 
+//         warning: "var(--color-warning)",
 
+//         info: "var(--color-info)",
 
+//         success: "var(--color-success)",
 
+//         "gray-light": "var(--color-gray-light)",
 
+//         "gray-dark": "var(--color-gray-dark)",
 
+//       },
 
+//       fontFamily: {
 
+//         sans: [
 
+//           "Nunito Sans,SF Pro Text,SF Pro Icons,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif",
 
+//         ],
 
+//       },
 
+//     },
 
+//   },
 
+//   plugins: [lineClamp],
 
+// };
 
+const defaultTheme = require("tailwindcss/defaultTheme");
 
+// const svgToDataUri = require("mini-svg-data-uri");
 
+const {
 
+  default: flattenColorPalette,
 
+} = require("tailwindcss/lib/util/flattenColorPalette");
 
 
 
 module.exports = {
 
 module.exports = {
 
+  // experimental: {
 
+  //   optimizeUniversalDefaults: true,
 
+  // },
 
   content: [
 
   content: [
 
     "./pages/**/*.{js,ts,jsx,tsx}",
 
     "./pages/**/*.{js,ts,jsx,tsx}",
 
     "./src/**/*.{js,ts,jsx,tsx}",
 
     "./src/**/*.{js,ts,jsx,tsx}",
 
@@ -9,26 +50,337 @@ module.exports = {
 
   ],
 
   ],
 
   darkMode: "class",
 
   darkMode: "class",
 
   theme: {
 
   theme: {
 
+    // `demo-*` screens are used for the "mobile-first" responsive demo
 
+    screens: {
 
+      sm: "640px",
 
+      "demo-sm": "720px",
 
+      md: "768px",
 
+      lg: "1024px",
 
+      xl: "1280px",
 
+      "2xl": "1536px",
 
+    },
 
+    aspectRatio: {
 
+      auto: "auto",
 
+      square: "1 / 1",
 
+      video: "16 / 9",
 
+      1: "1",
 
+      2: "2",
 
+      3: "3",
 
+      4: "4",
 
+      5: "5",
 
+      6: "6",
 
+      7: "7",
 
+      8: "8",
 
+      9: "9",
 
+      10: "10",
 
+      11: "11",
 
+      12: "12",
 
+      13: "13",
 
+      14: "14",
 
+      15: "15",
 
+      16: "16",
 
+    },
 
     extend: {
 
     extend: {
 
-      colors: {
 
-        default: "var(--color-bg-default)",
 
-        paper: "var(--color-paper)",
 
-        "paper-alpha": "var(--color-paper-alpha)",
 
-        primary: "var(--color-primary)",
 
-        secondary: "var(--color-secondary)",
 
-        error: "var(--color-error)",
 
-        warning: "var(--color-warning)",
 
-        info: "var(--color-info)",
 
-        success: "var(--color-success)",
 
-        "gray-light": "var(--color-gray-light)",
 
-        "gray-dark": "var(--color-gray-dark)",
 
-      },
 
+      typography: (theme) => ({
 
+        DEFAULT: {
 
+          css: {
 
+            maxWidth: "none",
 
+            color: theme("colors.slate.700"),
 
+            hr: {
 
+              borderColor: theme("colors.slate.100"),
 
+              marginTop: "3em",
 
+              marginBottom: "3em",
 
+            },
 
+            "h1, h2, h3": {
 
+              letterSpacing: "-0.025em",
 
+            },
 
+            h2: {
 
+              marginBottom: `${16 / 24}em`,
 
+            },
 
+            h3: {
 
+              marginTop: "2.4em",
 
+              lineHeight: "1.4",
 
+            },
 
+            h4: {
 
+              marginTop: "2em",
 
+              fontSize: "1.125em",
 
+            },
 
+            "h2 small, h3 small, h4 small": {
 
+              fontFamily: theme("fontFamily.mono").join(", "),
 
+              color: theme("colors.slate.500"),
 
+              fontWeight: 500,
 
+            },
 
+            "h2 small": {
 
+              fontSize: theme("fontSize.lg")[0],
 
+              ...theme("fontSize.lg")[1],
 
+            },
 
+            "h3 small": {
 
+              fontSize: theme("fontSize.base")[0],
 
+              ...theme("fontSize.base")[1],
 
+            },
 
+            "h4 small": {
 
+              fontSize: theme("fontSize.sm")[0],
 
+              ...theme("fontSize.sm")[1],
 
+            },
 
+            "h2, h3, h4": {
 
+              "scroll-margin-top": "var(--scroll-mt)",
 
+            },
 
+            ul: {
 
+              listStyleType: "none",
 
+              paddingLeft: 0,
 
+            },
 
+            "ul > li": {
 
+              position: "relative",
 
+              paddingLeft: "1.75em",
 
+            },
 
+            "ul > li::before": {
 
+              content: '""',
 
+              width: "0.75em",
 
+              height: "0.125em",
 
+              position: "absolute",
 
+              top: "calc(0.875em - 0.0625em)",
 
+              left: 0,
 
+              borderRadius: "999px",
 
+              backgroundColor: theme("colors.slate.300"),
 
+            },
 
+            a: {
 
+              fontWeight: theme("fontWeight.semibold"),
 
+              textDecoration: "none",
 
+              borderBottom: `1px solid ${theme("colors.sky.300")}`,
 
+            },
 
+            "a:hover": {
 
+              borderBottomWidth: "2px",
 
+            },
 
+            "a code": {
 
+              color: "inherit",
 
+              fontWeight: "inherit",
 
+            },
 
+            strong: {
 
+              color: theme("colors.slate.900"),
 
+              fontWeight: theme("fontWeight.semibold"),
 
+            },
 
+            "a strong": {
 
+              color: "inherit",
 
+              fontWeight: "inherit",
 
+            },
 
+            kbd: {
 
+              background: theme("colors.slate.100"),
 
+              borderWidth: "1px",
 
+              borderColor: theme("colors.slate.200"),
 
+              padding: "0.125em 0.25em",
 
+              color: theme("colors.slate.700"),
 
+              fontWeight: 500,
 
+              fontSize: "0.875em",
 
+              fontVariantLigatures: "none",
 
+              borderRadius: "4px",
 
+              margin: "0 1px",
 
+            },
 
+            code: {
 
+              fontWeight: theme("fontWeight.medium"),
 
+              fontVariantLigatures: "none",
 
+            },
 
+            pre: {
 
+              color: theme("colors.slate.50"),
 
+              borderRadius: theme("borderRadius.xl"),
 
+              padding: theme("padding.5"),
 
+              boxShadow: theme("boxShadow.md"),
 
+              display: "flex",
 
+              marginTop: `${20 / 14}em`,
 
+              marginBottom: `${32 / 14}em`,
 
+            },
 
+            "p + pre": {
 
+              marginTop: `${-4 / 14}em`,
 
+            },
 
+            "pre + pre": {
 
+              marginTop: `${-16 / 14}em`,
 
+            },
 
+            "pre code": {
 
+              flex: "none",
 
+              minWidth: "100%",
 
+            },
 
+            table: {
 
+              fontSize: theme("fontSize.sm")[0],
 
+              lineHeight: theme("fontSize.sm")[1].lineHeight,
 
+            },
 
+            thead: {
 
+              color: theme("colors.slate.700"),
 
+              borderBottomColor: theme("colors.slate.200"),
 
+            },
 
+            "thead th": {
 
+              paddingTop: 0,
 
+              fontWeight: theme("fontWeight.semibold"),
 
+            },
 
+            "tbody tr": {
 
+              borderBottomColor: theme("colors.slate.100"),
 
+            },
 
+            "tbody tr:last-child": {
 
+              borderBottomWidth: "1px",
 
+            },
 
+            "tbody code": {
 
+              fontSize: theme("fontSize.xs")[0],
 
+            },
 
+            "figure figcaption": {
 
+              textAlign: "center",
 
+              fontStyle: "italic",
 
+            },
 
+            "figure > figcaption": {
 
+              marginTop: `${12 / 14}em`,
 
+            },
 
+          },
 
+        },
 
+        dark: {
 
+          css: {
 
+            color: theme("colors.slate.400"),
 
+            "h2, h3, h4, thead th": {
 
+              color: theme("colors.slate.200"),
 
+            },
 
+            "h2 small, h3 small, h4 small": {
 
+              color: theme("colors.slate.400"),
 
+            },
 
+            kbd: {
 
+              background: theme("colors.slate.700"),
 
+              borderColor: theme("colors.slate.600"),
 
+              color: theme("colors.slate.200"),
 
+            },
 
+            code: {
 
+              color: theme("colors.slate.200"),
 
+            },
 
+            hr: {
 
+              borderColor: theme("colors.slate.200"),
 
+              opacity: "0.05",
 
+            },
 
+            pre: {
 
+              boxShadow: "inset 0 0 0 1px rgb(255 255 255 / 0.1)",
 
+            },
 
+            a: {
 
+              color: theme("colors.white"),
 
+              borderBottomColor: theme("colors.sky.400"),
 
+            },
 
+            strong: {
 
+              color: theme("colors.slate.200"),
 
+            },
 
+            thead: {
 
+              color: theme("colors.slate.300"),
 
+              borderBottomColor: "rgb(148 163 184 / 0.2)",
 
+            },
 
+            "tbody tr": {
 
+              borderBottomColor: "rgb(148 163 184 / 0.1)",
 
+            },
 
+            blockQuote: {
 
+              color: theme("colors.white"),
 
+            },
 
+          },
 
+        },
 
+      }),
 
       fontFamily: {
 
       fontFamily: {
 
-        sans: [
 
-          "Nunito Sans,SF Pro Text,SF Pro Icons,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif",
 
-        ],
 
+        sans: ["Nunito Sans,SF Pro Text,SF Pro Icons, Inter var", ...defaultTheme.fontFamily.sans],
 
+        mono: ["Fira Code VF", ...defaultTheme.fontFamily.mono],
 
+        source: ["Source Sans Pro", ...defaultTheme.fontFamily.sans],
 
+        "ubuntu-mono": ["Ubuntu Mono", ...defaultTheme.fontFamily.mono],
 
+      },
 
+      spacing: {
 
+        18: "4.5rem",
 
+        full: "100%",
 
       },
 
       },
 
+      maxWidth: {
 
+        "8xl": "90rem",
 
+      },
 
+      keyframes: {
 
+        "flash-code": {
 
+          "0%": { backgroundColor: "rgb(125 211 252 / 0.1)" },
 
+          "100%": { backgroundColor: "transparent" },
 
+        },
 
+      },
 
+      animation: {
 
+        "flash-code": "flash-code 1s forwards",
 
+        "flash-code-slow": "flash-code 2s forwards",
 
+      },
 
+      // backgroundImage: (theme) => ({
 
+      //   squiggle: `url("${svgToDataUri(
 
+      //     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 3" enable-background="new 0 0 6 3" width="6" height="3" fill="${theme(
 
+      //       "colors.yellow.400"
 
+      //     )}"><polygon points="5.5,0 2.5,3 1.1,3 4.1,0"/><polygon points="4,0 6,2 6,0.6 5.4,0"/><polygon points="0,2 1,3 2.4,3 0,0.6"/></svg>`
 
+      //   )}")`,
 
+      // }),
 
     },
 
     },
 
   },
 
   },
 
-  plugins: [lineClamp],
 
+  plugins: [
 
+    // require("daisyui"),
 
+    require("@tailwindcss/line-clamp"),
 
+    require("@tailwindcss/typography"),
 
+    require("@tailwindcss/aspect-ratio"),
 
+    require("@tailwindcss/forms")({ strategy: "class" }),
 
+    function ({ addVariant }) {
 
+      addVariant(
 
+        "supports-backdrop-blur",
 
+        "@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))"
 
+      );
 
+      addVariant(
 
+        "supports-scrollbars",
 
+        "@supports selector(::-webkit-scrollbar)"
 
+      );
 
+      addVariant("children", "& > *");
 
+      addVariant("scrollbar", "&::-webkit-scrollbar");
 
+      addVariant("scrollbar-track", "&::-webkit-scrollbar-track");
 
+      addVariant("scrollbar-thumb", "&::-webkit-scrollbar-thumb");
 
+    },
 
+    function ({ matchUtilities, theme }) {
 
+      // matchUtilities(
 
+      // {
 
+      //   "bg-grid": (value) => ({
 
+      //     backgroundImage: `url("${svgToDataUri(
 
+      //       `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
 
+      //     )}")`,
 
+      //   }),
 
+      // },
 
+      // { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
 
+      // );
 
+
 
+      matchUtilities(
 
+        {
 
+          highlight: (value) => ({ boxShadow: `inset 0 1px 0 0 ${value}` }),
 
+        },
 
+        { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
 
+      );
 
+    },
 
+    function ({ addUtilities, theme }) {
 
+      let backgroundSize = "7.07px 7.07px";
 
+      let backgroundImage = (color) =>
 
+        `linear-gradient(135deg, ${color} 10%, transparent 10%, transparent 50%, ${color} 50%, ${color} 60%, transparent 60%, transparent 100%)`;
 
+      let colors = Object.entries(theme("backgroundColor")).filter(
 
+        ([, value]) => typeof value === "object" && value[400] && value[500]
 
+      );
 
+
 
+      addUtilities(
 
+        Object.fromEntries(
 
+          colors.map(([name, colors]) => {
 
+            let backgroundColor = colors[400] + "1a"; // 10% opacity
 
+            let stripeColor = colors[500] + "80"; // 50% opacity
 
+
 
+            return [
 
+              `.bg-stripes-${name}`,
 
+              {
 
+                backgroundColor,
 
+                backgroundImage: backgroundImage(stripeColor),
 
+                backgroundSize,
 
+              },
 
+            ];
 
+          })
 
+        )
 
+      );
 
+
 
+      addUtilities({
 
+        ".bg-stripes-white": {
 
+          backgroundImage: backgroundImage("rgba(255 255 255 / 0.75)"),
 
+          backgroundSize,
 
+        },
 
+      });
 
+
 
+      addUtilities({
 
+        ".ligatures-none": {
 
+          fontVariantLigatures: "none",
 
+        },
 
+      });
 
+    },
 
+  ],
 
 };
 
 };

+ 120 - 3
yarn.lock
Datei anzeigen 

@@ -208,11 +208,33 @@
 
   dependencies:
 
   dependencies:
 
     tslib "^2.4.0"
 
     tslib "^2.4.0"
 
 
 
+"@tailwindcss/aspect-ratio@^0.4.2":
 
+  version "0.4.2"
 
+  resolved "https://registry.yarnpkg.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz#9ffd52fee8e3c8b20623ff0dcb29e5c21fb0a9ba"
 
+  integrity sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==
 
+
 
+"@tailwindcss/forms@^0.5.3":
 
+  version "0.5.3"
 
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.3.tgz#e4d7989686cbcaf416c53f1523df5225332a86e7"
 
+  integrity sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==
 
+  dependencies:
 
+    mini-svg-data-uri "^1.2.3"
 
+
 
 "@tailwindcss/line-clamp@^0.4.2":
 
 "@tailwindcss/line-clamp@^0.4.2":
 
   version "0.4.2"
 
   version "0.4.2"
 
   resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz#f353c5a8ab2c939c6267ac5b907f012e5ee130f9"
 
   resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz#f353c5a8ab2c939c6267ac5b907f012e5ee130f9"
 
   integrity sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==
 
   integrity sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==
 
 
 
+"@tailwindcss/typography@^0.5.7":
 
+  version "0.5.7"
 
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.7.tgz#e0b95bea787ee14c5a34a74fc824e6fe86ea8855"
 
+  integrity sha512-JTTSTrgZfp6Ki4svhPA4mkd9nmQ/j9EfE7SbHJ1cLtthKkpW2OxsFXzSmxbhYbEkfNIyAyhle5p4SYyKRbz/jg==
 
+  dependencies:
 
+    lodash.castarray "^4.4.0"
 
+    lodash.isplainobject "^4.0.6"
 
+    lodash.merge "^4.6.2"
 
+    postcss-selector-parser "6.0.10"
 
+
 
 "@types/json5@^0.0.29":
 
 "@types/json5@^0.0.29":
 
   version "0.0.29"
 
   version "0.0.29"
 
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
 
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
 
@@ -533,11 +555,27 @@ color-convert@^2.0.1:
 
   dependencies:
 
   dependencies:
 
     color-name "~1.1.4"
 
     color-name "~1.1.4"
 
 
 
-color-name@^1.1.4, color-name@~1.1.4:
 
+color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
 
   version "1.1.4"
 
   version "1.1.4"
 
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
 
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
 
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
 
 
+color-string@^1.9.0:
 
+  version "1.9.1"
 
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
 
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
 
+  dependencies:
 
+    color-name "^1.0.0"
 
+    simple-swizzle "^0.2.2"
 
+
 
+color@^4.2:
 
+  version "4.2.3"
 
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
 
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
 
+  dependencies:
 
+    color-convert "^2.0.1"
 
+    color-string "^1.9.0"
 
+
 
 concat-map@0.0.1:
 
 concat-map@0.0.1:
 
   version "0.0.1"
 
   version "0.0.1"
 
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
@@ -557,6 +595,14 @@ cross-spawn@^7.0.2:
 
     shebang-command "^2.0.0"
 
     shebang-command "^2.0.0"
 
     which "^2.0.1"
 
     which "^2.0.1"
 
 
 
+css-selector-tokenizer@^0.8.0:
 
+  version "0.8.0"
 
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
 
+  integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
 
+  dependencies:
 
+    cssesc "^3.0.0"
 
+    fastparse "^1.1.2"
 
+
 
 cssesc@^3.0.0:
 
 cssesc@^3.0.0:
 
   version "3.0.0"
 
   version "3.0.0"
 
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
 
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
 
@@ -567,6 +613,16 @@ csstype@^3.0.2:
 
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
 
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
 
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
 
 
+daisyui@^2.33.0:
 
+  version "2.33.0"
 
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-2.33.0.tgz#5a5bbcd8f083cd50a39938df4fc9abc6dfbf14c6"
 
+  integrity sha512-NviwGs9oC9NW7IEZiLexHtxkpzP38AKxb9GTUCqUa0qoU8NHKQGqJUzQWZwWSZakU57KsQLblFVe0xMhqw4TlA==
 
+  dependencies:
 
+    color "^4.2"
 
+    css-selector-tokenizer "^0.8.0"
 
+    postcss-js "^4.0.0"
 
+    tailwindcss "^3"
 
+
 
 damerau-levenshtein@^1.0.8:
 
 damerau-levenshtein@^1.0.8:
 
   version "1.0.8"
 
   version "1.0.8"
 
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
 
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
 
@@ -949,6 +1005,11 @@ fast-levenshtein@^2.0.6:
 
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 
 
+fastparse@^1.1.2:
 
+  version "1.1.2"
 
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
 
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
 
+
 
 fastq@^1.6.0:
 
 fastq@^1.6.0:
 
   version "1.13.0"
 
   version "1.13.0"
 
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
 
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
 
@@ -1186,6 +1247,11 @@ internal-slot@^1.0.3:
 
     has "^1.0.3"
 
     has "^1.0.3"
 
     side-channel "^1.0.4"
 
     side-channel "^1.0.4"
 
 
 
+is-arrayish@^0.3.1:
 
+  version "0.3.2"
 
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
 
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
+
 
 is-bigint@^1.0.1:
 
 is-bigint@^1.0.1:
 
   version "1.0.4"
 
   version "1.0.4"
 
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
 
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
 
@@ -1371,6 +1437,16 @@ locate-path@^6.0.0:
 
   dependencies:
 
   dependencies:
 
     p-locate "^5.0.0"
 
     p-locate "^5.0.0"
 
 
 
+lodash.castarray@^4.4.0:
 
+  version "4.4.0"
 
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
 
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
 
+
 
+lodash.isplainobject@^4.0.6:
 
+  version "4.0.6"
 
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
 
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
 
+
 
 lodash.merge@^4.6.2:
 
 lodash.merge@^4.6.2:
 
   version "4.6.2"
 
   version "4.6.2"
 
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
 
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
 
@@ -1395,7 +1471,7 @@ merge2@^1.3.0, merge2@^1.4.1:
 
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
 
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
 
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 
 
-micromatch@^4.0.4:
 
+micromatch@^4.0.4, micromatch@^4.0.5:
 
   version "4.0.5"
 
   version "4.0.5"
 
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
 
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
 
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
 
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
 
@@ -1403,6 +1479,11 @@ micromatch@^4.0.4:
 
     braces "^3.0.2"
 
     braces "^3.0.2"
 
     picomatch "^2.3.1"
 
     picomatch "^2.3.1"
 
 
 
+mini-svg-data-uri@^1.2.3, mini-svg-data-uri@^1.4.4:
 
+  version "1.4.4"
 
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
 
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
 
+
 
 minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
 
 minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
 
   version "3.1.2"
 
   version "3.1.2"
 
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
 
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
 
@@ -1657,7 +1738,7 @@ postcss-nested@6.0.0:
 
   dependencies:
 
   dependencies:
 
     postcss-selector-parser "^6.0.10"
 
     postcss-selector-parser "^6.0.10"
 
 
 
-postcss-selector-parser@^6.0.10:
 
+postcss-selector-parser@6.0.10, postcss-selector-parser@^6.0.10:
 
   version "6.0.10"
 
   version "6.0.10"
 
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
 
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
 
   integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
 
   integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
 
@@ -1875,6 +1956,13 @@ side-channel@^1.0.4:
 
     get-intrinsic "^1.0.2"
 
     get-intrinsic "^1.0.2"
 
     object-inspect "^1.9.0"
 
     object-inspect "^1.9.0"
 
 
 
+simple-swizzle@^0.2.2:
 
+  version "0.2.2"
 
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
 
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
 
+  dependencies:
 
+    is-arrayish "^0.3.1"
 
+
 
 slash@^3.0.0:
 
 slash@^3.0.0:
 
   version "3.0.0"
 
   version "3.0.0"
 
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
 
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
 
@@ -1951,6 +2039,35 @@ supports-preserve-symlinks-flag@^1.0.0:
 
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
 
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
 
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
 
 
+tailwindcss@^3:
 
+  version "3.2.1"
 
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.1.tgz#1bd828fff3172489962357f8d531c184080a6786"
 
+  integrity sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==
 
+  dependencies:
 
+    arg "^5.0.2"
 
+    chokidar "^3.5.3"
 
+    color-name "^1.1.4"
 
+    detective "^5.2.1"
 
+    didyoumean "^1.2.2"
 
+    dlv "^1.1.3"
 
+    fast-glob "^3.2.12"
 
+    glob-parent "^6.0.2"
 
+    is-glob "^4.0.3"
 
+    lilconfig "^2.0.6"
 
+    micromatch "^4.0.5"
 
+    normalize-path "^3.0.0"
 
+    object-hash "^3.0.0"
 
+    picocolors "^1.0.0"
 
+    postcss "^8.4.17"
 
+    postcss-import "^14.1.0"
 
+    postcss-js "^4.0.0"
 
+    postcss-load-config "^3.1.4"
 
+    postcss-nested "6.0.0"
 
+    postcss-selector-parser "^6.0.10"
 
+    postcss-value-parser "^4.2.0"
 
+    quick-lru "^5.1.1"
 
+    resolve "^1.22.1"
 
+
 
 tailwindcss@^3.2.0:
 
 tailwindcss@^3.2.0:
 
   version "3.2.0"
 
   version "3.2.0"
 
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.0.tgz#0164a930645e7e1df301df1e9d434a52602c918d"
 
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.0.tgz#0164a930645e7e1df301df1e9d434a52602c918d"