FIXED

Author: The-Infinitys

public/article-2025/05/microsoft-edit/article-en.md

@@ -1,5 +1,5 @@
 ---
-title: Microsoft Official Editor, \"Edit\"
+title: Microsoft Official Editor, "Edit"
 date: "2025-05-20"
 description: "Super easy to use"
 ---

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

@@ -277,25 +277,34 @@ html {
 }
 
 .other-articles {
+  position: relative;      /* かぶり防止 */
+  z-index: 1;              /* 他要素より下に */
   align-items: center;
   justify-content: center;
   margin-top: 40px;
-  top: 20px;
-  max-width: 250px;
-  margin-left: 0 auto;
-  margin-right: 0 auto;
+  margin-bottom: 40px;     /* 下にも余白を追加 */
+  top: auto;               /* top指定を解除 */
+  width: 100%;             /* 幅を100%に */
+  margin-left: 275px;
   background-color: transparent;
-  /* スクロール時に追従 */
+  padding: 16px 0;         /* 上下に余白 */
+  box-sizing: border-box;  /* パディングを含める */
 }
-
-.other-articles h2 {
+.other-articles>h2 {
   font-size: 1.5rem;
   margin-bottom: 16px;
+  color: var(--foreground);
+  text-overflow: wrap;
 }
 
 .other-articles ul {
   list-style: none;
   padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+  width: 100%;
+  justify-items: center;
 }
 
 .other-articles li {
@@ -318,33 +327,39 @@ html {
   .toc {
     position: relative;
     /* stickyを無効化 */
+    max-width: none;
+    width: 100%;
     max-height: none;
     order: -1;
     box-sizing: border-box;
     margin-bottom: 4em;
     /* 記事の上部に配置 */
   }
-
+  
   .article-detail {
     position: relative;
     margin: 1rem;
   }
 
   .other-articles {
     position: relative;
-    /* stickyを無効化 */
+    z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     max-width: 90vw;
+    width: 100%;
     margin: 0 auto;
-    top: auto;
     margin-top: 20px;
-    /* 記事の下部に配置 */
+    margin-bottom: 20px;
+    top: auto;
+    background-color: transparent;
+    padding: 16px 0;
+    box-sizing: border-box;
   }
 
-  .other-articles .article-link {
+  .other-articles .article-link article {
     width: 90%;
     margin: 0 auto;
   }
@@ -363,6 +378,11 @@ html {
     font-size: 0.9rem;
     /* 必要に応じてフォントサイズを調整 */
   }
+
+  .other-articles ul {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
 }
 
 /* 目次の見出しの右余白を調整 */

src/app/article/article.css

@@ -8,14 +8,15 @@ section.articles {
   align-items: center;
 }
 
-.article-link {
+.article-link{
+  background-color: color-mix(in srgb, transparent 50%, var(--primary));
   box-sizing: border-box;
   text-decoration: none;
   color: inherit;
   max-width: 300px;
   width: auto;
-  aspect-ratio: 9/16;
-  border: 1px solid var(--background);
+  aspect-ratio: 2/3;
+  border: 2px solid var(--secondary);
   border-radius: 8px;
   overflow: hidden;
   transition:
@@ -40,12 +41,12 @@ section.articles {
 }
 
 .article-content h2 {
-  font-size: 1.25rem;
+  font-size: 1rem;
   margin: 0 0 8px;
 }
 
 .article-content p {
   font-size: 0.875rem;
-  color: color-mix(in srgb, var(--background), var(--foreground) 50%);
+  color: var(--secondary);
   margin: 0;
 }

src/app/globals.css

@@ -3,7 +3,7 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-  --primary: #eeeeee;
+  --primary:  color-mix(in srgb, var(--foreground), var(--background) 80%);
   --link-color: #0000ff;
   --body-color-value: 0deg;
   --secondary: color-mix(in srgb, var(--foreground), var(--background) 50%);
@@ -23,7 +23,6 @@
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
-    --primary: #222222;
     --link-color: #00ffff;
   }
 }
@@ -92,7 +91,7 @@ header {
   position: sticky;
   top: 0;
   z-index: 10;
-  /* ボタン(z-30), メニュー(z-20) よりは下 */
+  min-height: 48px; /* 高さを大きく */
 }
 
 /*header 内のリンクスタイルは header.tsx の Tailwind クラスで制御するため、ここでは不要な場合が多い */
@@ -106,11 +105,6 @@ header a {
   text-decoration: none;
 }
 
-header nav {
-  background-color: color-mix(in srgb, var(--primary), transparent 50%);
-  backdrop-filter: blur(4px);
-}
-
 main {
   width: 100%;
   /* min-height: 100%; */

src/app/layout/header.tsx

@@ -44,7 +44,7 @@ export default function Header() {
 
   return (
     // Added padding, flex layout for alignment
-    <header className="p-4 flex justify-between items-center relative">
+    <header className="p-4 py-6 flex justify-between items-center relative">
       {/* Title */}
       <div
         style={{
@@ -55,11 +55,11 @@ export default function Header() {
       >
         {/* <Image src={TheInfiniteImage} alt="" width={30} height={30} /> */}
         <h1
-          className={`${chakraPetch.className} italic font-semibold text-3xl`} // Use Tailwind classes
+          className={`${chakraPetch.className} italic font-semibold text-4xl`} // text-4xlに変更
           style={{
             fontStyle: "italic",
             fontWeight: "600",
-            fontSize: "32px", // Use text-3xl or similar
+            fontSize: "40px", // 32px→40pxに
           }}
         >
           <Link
@@ -85,22 +85,33 @@ export default function Header() {
         <Image
           src={isMenuOpen ? "/layout/close.svg" : "/layout/open.svg"}
           alt={isMenuOpen ? "メニューを閉じる" : "メニューを開く"}
-          width={30} // Adjust size as needed
-          height={30} // Adjust size as needed
+          width={32} // Adjust size as needed
+          height={32} // Adjust size as needed
           priority // Load icons quickly
         />
       </button>
 
       {/* Navigation Menu */}
       <nav
         id="navigation-menu"
+        style={
+          isMenuOpen
+            ? {
+                backgroundColor:
+                  "color-mix(in srgb, var(--primary), transparent 50%)",
+                backdropFilter: "blur(4px)",
+              }
+            : {}
+        }
         className={`
           ${
-            isMenuOpen ? "opacity-100 max-h-screen" : "opacity-0 max-h-0"
+            isMenuOpen
+              ? "opacity-100 max-h-screen"
+              : "opacity-50 max-h-0 bg-[color-mix(in srgb, var(--primary),transparent 50%)]"
           } md:opacity-100 md:max-h-none
           transition-all duration-300 ease-in-out
+          bg-transparent
           fixed md:relative top-0 left-0 w-full h-full md:w-auto md:h-100%
-          md:bg-transparent
           z-20 overflow-hidden
           flex flex-col md:flex-row items-center justify-center md:justify-end
         `}