スタイルの改善とレイアウト調整を行い、記事の表示を最適化

Author: The-Infinitys

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

@@ -10,6 +10,7 @@ html {
   flex-wrap: wrap;
   overflow-x: hidden auto;
   min-height: 100vh;
+  max-width: 90vw;
   /* スマートフォン対応 */
 }
 
@@ -58,6 +59,17 @@ html {
   /* 最小幅を設定 */
 }
 
+.article-detail h1 {
+  font-size: 2rem;
+  font-weight: 600;
+}
+
+/* 日付 */
+.article-detail p {
+  color: color-mix(in srgb, var(--foreground), var(--background) 50%);
+}
+
+
 .article-thumbnail {
   width: 100%;
   height: auto;
@@ -66,15 +78,18 @@ html {
 }
 
 .article-content {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
   line-height: 2;
-  padding: 1rem;
+  overflow: hidden;
+  padding: 2px;
 }
 
 .article-content pre {
   padding: 1em;
   border: 1px solid var(--foreground);
-  max-width: 100vw;
-  margin: 10px;
+  width: 100%;
   overflow: scroll;
   color: var(--foreground);
   background-color: var(--background);
@@ -107,6 +122,7 @@ html {
 .article-content h5,
 .article-content h6,
 .article-content p {
+  color: var(--foreground);
   font-weight: 500;
 }
 
@@ -209,23 +225,46 @@ html {
 @media (max-width: 768px) {
   .article-container {
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
     /* 縦並びに変更 */
   }
 
   .toc {
     position: relative;
     /* stickyを無効化 */
     max-height: none;
-    margin-bottom: 20px;
     order: -1;
+    box-sizing: border-box;
+    margin-bottom: 4em;
     /* 記事の上部に配置 */
   }
 
+  .article-detail {
+    position: relative;
+    margin: 1rem;
+  }
+
   .other-articles {
     position: relative;
     /* stickyを無効化 */
     top: auto;
     margin-top: 20px;
     /* 記事の下部に配置 */
   }
+
+  .article-content {
+    position: relative;
+    width: calc(100vw - 64px);
+    margin: 30px auto;
+  }
+
+  .article-content pre {
+    width: 100%;
+    /* 幅を100%に設定 */
+    overflow-x: auto;
+    /* 横スクロールを有効化 */
+    font-size: 0.9rem;
+    /* 必要に応じてフォントサイズを調整 */
+  }
 }

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

@@ -69,7 +69,7 @@ export default async function ArticlePage({
           />
         )}
         <div
-          className="article-content"
+          className="article-content "
           dangerouslySetInnerHTML={{
             __html: article.content.replace(
               /<h([1-6])>(.*?)<\/h[1-6]>/g,

src/app/globals.css

@@ -38,19 +38,8 @@ body {
   background: var(--background);
   color: var(--foreground);
   min-height: 100vh;
-  /* body に min-height を設定 */
 }
 
-/* div.container は不要になったか、別の場所で使われている場合は width: 100% を確認 */
-/*
-div.container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: inherit;
-}
-*/
-
 header {
   width: 100%;
   background-color: var(--primary);