スタイルを修正

yo-iwamoto · Sep 20, 2024 · 7448131 · 7448131
1 parent 2c00418
commit 7448131
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/src/app/posts/[slug]/page.tsx b/src/app/posts/[slug]/page.tsx
@@ -28,7 +28,7 @@ export default function Page({ params: { slug } }: Props) {
   } = article;
 
   return (
-    <article className="my-8 grid gap-2">
+    <article className="my-8 grid gap-4">
       <Text as="h1" className="text-2xl font-bold md:text-3xl lg:text-4xl">
         {title}
       </Text>

diff --git a/src/components/sized-box/sized-box.test.tsx b/src/components/sized-box/sized-box.test.tsx
@@ -2,7 +2,6 @@ import { render, screen } from "@testing-library/react";
 import { SizedBox } from "./sized-box";
 
 describe("SizedBox", () => {
-
   it("children が描画されること", () => {
     const { getByText } = render(<SizedBox>children</SizedBox>);
 

diff --git a/src/lib/transform-article-html.ts b/src/lib/transform-article-html.ts
@@ -27,12 +27,15 @@ function assignIdToHeadings(document: DOMWindow["document"]) {
     const id = text.replaceAll(/ /g, "-").toLowerCase();
     heading.id = id;
 
+    const div = document.createElement("div");
+    div.classList.add("link-container");
     const parent = document.createElement("a");
     parent.href = `#${id}`;
     parent.appendChild(heading.cloneNode(true));
     parent.classList.add("heading-link");
+    div.appendChild(parent);
 
-    heading.replaceWith(parent);
+    heading.replaceWith(div);
   }
 }
 

diff --git a/src/styles/post-body.scss b/src/styles/post-body.scss
@@ -5,15 +5,15 @@
   h4,
   h5,
   h6 {
-    @apply dark:text-neutral-300 scroll-mt-14;
+    @apply dark:text-neutral-300 scroll-mt-14 mt-4 mb-2;
     > a {
       @apply font-bold no-underline hover:text-gray-500 dark:text-neutral-300;
     }
   }
   p,
   strong,
   a {
-    @apply dark:text-neutral-300;
+    @apply text-neutral-900 dark:text-neutral-300;
   }
 
   a {
@@ -32,6 +32,7 @@
     @apply rounded-md bg-neutral-200 px-2 py-1 text-sm dark:bg-neutral-400;
   }
 
+
   pre {
     @apply relative mt-4 max-w-[calc(100vw_-_2rem)] p-0 overflow-visible rounded-md;
     @apply has-[.file-name]:mt-14 has-[.file-name]:rounded-tl-none;
@@ -46,13 +47,13 @@
     code {
       // .hljs にあたるスタイルによるレイアウトシフトを防ぐ
       @apply p-[1em] block;
-      @apply max-w-full overflow-x-auto rounded-md;
+      @apply max-w-full overflow-x-auto rounded-md text-sm leading-relaxed md:text-base;
     }
   }
 
   // アプリケーションレイヤでの transform で挿入した heading link
   .heading-link {
-    @apply no-underline relative;
+    @apply no-underline relative inline-block;
     @apply focus-visible:underline focus-visible:before:content-['#'] focus-visible:before:absolute focus-visible:before:text-xl focus-visible:before:-left-3.5 focus-visible:ring-0;
     @apply hover:underline hover:before:content-['#'] hover:before:absolute hover:before:text-xl hover:before:-left-3.5;
   }