スタイルの調整とコンテンツの追加

Author: The-Infinitys

src/app/[article_year]/[month]/[aid]/page.css

@@ -247,6 +247,7 @@ html {
   margin-top: 40px;
   top: 20px;
   max-width: 250px;
+  background-color: transparent;
   /* スクロール時に追従 */
 }
 
@@ -295,12 +296,17 @@ html {
   .other-articles {
     position: relative;
     /* stickyを無効化 */
-    max-width: none;
+    max-width: 90vw;
+    margin: 0 auto;
     top: auto;
     margin-top: 20px;
     /* 記事の下部に配置 */
   }
 
+  .other-articles .article-link {
+    width: 90%;
+  }
+
   .article-content {
     position: relative;
     width: calc(100vw - 64px);

src/app/article/article.css

@@ -8,6 +8,7 @@
 }
 
 .article-link {
+  box-sizing: border-box;
   text-decoration: none;
   color: inherit;
   display: block;

src/app/article/page.tsx

@@ -12,6 +12,10 @@ export default async function Home() {
       <section className="title">
         <h1>{t("article.title")}</h1>
       </section>
+      <section className="description">
+        <p>{t("article.description.msg1")}</p>
+        <p>{t("article.description.msg2")}</p>
+      </section>
       <section className="articles">
         {articles.map(
           (article: Article): ReactNode => generateArticleButton(article)

src/app/globals.css

@@ -125,9 +125,16 @@ main>section.title>h1 {
   padding: 2rem;
 }
 
+section.title {
+  background-color: transparent;
+}
+
 section {
   padding: 1rem;
   margin: 1rem;
+  border-radius: 16px;
+  background-color: color-mix(in srgb, transparent 50%, var(--background));
+  backdrop-filter: blur(4px);
 }
 
 section h1,

src/app/layout/header.tsx

@@ -3,7 +3,7 @@
 import { Chakra_Petch } from "next/font/google";
 import Link from "next/link";
 import Image from "next/image"; // Import Image component
-import TheInfiniteImage from "../../../public/The-Infinite.svg";
+// import TheInfiniteImage from "../../../public/The-Infinite.svg";
 import React, { useState } from "react";
 import { TheInfiniteX } from "./img";
 const chakraPetch = Chakra_Petch({
@@ -56,7 +56,7 @@ export default function Header() {
           justifyContent: "flex-start",
         }}
       >
-        <Image src={TheInfiniteImage} alt="" width={30} height={30} />
+        {/* <Image src={TheInfiniteImage} alt="" width={30} height={30} /> */}
         <h1
           className={`${chakraPetch.className} italic font-semibold text-3xl`} // Use Tailwind classes
           style={{

src/app/page.tsx

@@ -7,12 +7,14 @@ export default function Home() {
       <section className="title">
         <h1>{t("home.title")}</h1>
       </section>
-      <p>{t("home.description.msg1")}</p>
-      <p>{t("home.description.msg2")}</p>
-      <p>{t("home.description.msg3")}</p>
-      <p>{t("home.description.msg4")}</p>
-      <p>{t("home.description.msg5")}</p>
-      <p>{t("home.description.msg6")}</p>
+      <section>
+        <p>{t("home.description.msg1")}</p>
+        <p>{t("home.description.msg2")}</p>
+        <p>{t("home.description.msg3")}</p>
+        <p>{t("home.description.msg4")}</p>
+        <p>{t("home.description.msg5")}</p>
+        <p>{t("home.description.msg6")}</p>
+      </section>
     </>
   );
 }