fix コンテナ幅・文字色を調整

appleple · Dec 20, 2024 · a6037a4 · a6037a4
1 parent 78c7ec0
commit a6037a4
Show file tree

Hide file tree

Showing 17 changed files with 57 additions and 212 deletions.
diff --git a/src/develop/_entry.html b/src/develop/_entry.html
@@ -11,29 +11,3 @@
   </section>
 </article>
 @endsection
-
-@section("aside")
-<section class="has-[div:empty]:hidden mb-12">
-  <div x-data="{ showAccordion: false }" class="relative w-full mx-auto overflow-hidden font-normal bg-white border border-gray-200 divide-y divide-gray-200 rounded-md">
-    <div x-data="{ id: $id('accordion') }" class="cursor-pointer group">
-      <button @click="showAccordion = !showAccordion" class="flex items-center justify-between w-full p-4 text-left select-none group-hover:underline">
-        <h2 class="text-gray-800 font-bold">目次</h2>
-        <svg class="w-4 h-4 duration-200 ease-out" :class="{ 'rotate-180': showAccordion }" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
-      </button>
-      <div
-        x-show="showAccordion"
-        x-collapse
-        x-cloak
-        @click="handleSmoothScroll($event)"
-      >
-        <div class="p-4 pt-0 opacity-70">
-          <!-- 参照元：Entry_Body -->
-          <!-- GET_Rendered id="entry-outline" -->
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-@parent
-@endsection
diff --git a/src/develop/_layouts/base.html b/src/develop/_layouts/base.html
@@ -25,18 +25,13 @@
 @include("/include/header.html")
 @endsection
 
-<!-- ページタイトル -->
-@section("page-title")
-@include("/include/parts/page-title.html")
-@endsection
-
 <!-- ※管理用パーツ -->
 @section("admin-part")
 @include("/admin/action.html")
 @include("/admin/switch-user.html")
 @endsection
 
-<main class="container mx-auto px-4 py-20">
+<main class="container py-20">
   @section("topicpath")
   <!-- BEGIN_MODULE Touch_NotTop -->
   <div class="mb-10">
@@ -53,11 +48,6 @@
   @endsection
 </main>
 
-<!-- CTAセクション -->
-@section("cta")
-@include("/include/parts/cta.html")
-@endsection
-
 <!-- フッター -->
 @section("footer")
 @include("/include/footer.html")

diff --git a/src/develop/_layouts/two-column.html b/src/develop/_layouts/two-column.html
@@ -15,7 +15,7 @@
   @include("/include/head/js.html")
   @endsection
 </head>
-<body>
+<body class="text-gray-700">
 @section("body-start")
 @include("/include/body-start.html")
 @endsection
@@ -25,18 +25,13 @@
 @include("/include/header.html")
 @endsection
 
-<!-- ページタイトル -->
-@section("page-title")
-@include("/include/parts/page-title.html")
-@endsection
-
 <!-- ※管理用パーツ -->
 @section("admin-part")
 @include("/admin/action.html")
 @include("/admin/switch-user.html")
 @endsection
 
-<div class="container mx-auto px-4 py-20">
+<div class="container py-20">
   @section("topicpath")
   <!-- BEGIN_MODULE Touch_NotTop -->
   <div class="mb-10">
@@ -59,65 +54,32 @@
     </main>
 
     <aside class="lg:block z-20">
-      <div class="fixed inset-0 bg-black bg-opacity-30"
-        x-show="isShowSideMenu"
-        x-transition
-        @click="toggleSideMenu()"
-      ></div>
-      <div class="max-lg:fixed top-0 right-0 bottom-0 box-border max-lg:w-72 max-lg:px-4 max-lg:py-6 bg-white transition-transform" 
-        :class="{'max-lg:translate-x-0': isShowSideMenu, 'max-lg:translate-x-full': !isShowSideMenu }"
-      >
-        <div class="max-lg:max-h-full max-lg:overflow-auto">
-          @section("aside")
-          <section>
-            <h2 class="mb-4 text-gray-800 font-bold">カテゴリー</h2>
-            @include("/include/category/list-side.html",)
-          </section>
-
-          <section class="mt-8">
-            <h2 class="mb-4 text-gray-800 font-bold">アーカイブ</h2>
-            @include("/include/entry/archive-list-side.html")
-          </section>
-
-          <section class="mt-8">
-            <h2 class="mb-5 text-gray-800 font-bold">ハッシュタグ</h2>
-            @include("/include/tag/cloud-side.html")
-          </section>
-
-          <section class="mt-8">
-            <h2 class="sr-only">キーワード検索</h2>
-            @include("/include/parts/search-keyword.html")
-          </section>
-
-          <section class="mt-8">
-            <h2 class="mb-5 text-gray-800 font-bold">プロフィール</h2>
-            @include("/include/user-profile/profile-card.html")
-          </section>
-          @endsection
-        </div>
+      <div class="max-lg:max-h-full max-lg:overflow-auto">
+        @section("aside")
+        <section>
+          <h2 class="mb-4 text-gray-900 font-bold">カテゴリー</h2>
+          @include("/include/category/list-side.html",)
+        </section>
+
+        <section class="mt-8">
+          <h2 class="mb-4 text-gray-900 font-bold">アーカイブ</h2>
+          @include("/include/entry/archive-list-side.html")
+        </section>
+
+        <section class="mt-8">
+          <h2 class="mb-5 text-gray-900 font-bold">ハッシュタグ</h2>
+          @include("/include/tag/cloud-side.html")
+        </section>
+
+        <section class="mt-8">
+          <h2 class="sr-only">キーワード検索</h2>
+          @include("/include/parts/search-keyword.html")
+        </section>
+        @endsection
       </div>
     </aside>
-
-    <button aria-label="サイドメニュー表示切替" class="fixed bottom-6 z-20 inline-flex items-center justify-center lg:hidden px-2 py-2 text-sm font-medium tracking-wide transition-colors duration-200 bg-white border border-r- rounded-full text-gray-800 hover:text-neutral-700 border-neutral-200/70 hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-200/60 focus:shadow-outline"
-      :class="{'right-80': isShowSideMenu, 'right-0 rounded-r-none': !isShowSideMenu }"
-      @click="toggleSideMenu()">
-      <template x-if="!isShowSideMenu">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
-          <path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z" clip-rule="evenodd" />
-        </svg>
-      </template>
-      <template x-if="isShowSideMenu">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
-          <path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z" clip-rule="evenodd" />
-        </svg>
-      </template>
-    </button>
   </div>
 </div>
-<!-- CTAセクション -->
-@section("cta")
-@include("/include/parts/cta.html")
-@endsection
 
 <!-- フッター -->
 @section("footer")

diff --git a/src/develop/include/category/list-side.html b/src/develop/include/category/list-side.html
@@ -8,7 +8,7 @@
       <a href="{url}" class="flex items-center hover:opacity-70">
         <span class="flex-1 block py-2 text-gray-900">{name}</span>
         <!-- BEGIN amount:veil -->
-        <span class="block min-w-10 py-1 rounded-full text-sm text-center text-gray-700 font-medium bg-slate-100">{amount}</span>
+        <span class="block min-w-10 py-1 rounded-full text-sm text-center font-medium bg-slate-100">{amount}</span>
         <!-- END amount:veil -->
       </a><!-- END category:veil --><!-- BEGIN li#rear -->
     </li><!-- END li#rear --><!-- BEGIN ul#rear -->

diff --git a/src/develop/include/entry/archive-list-side.html b/src/develop/include/entry/archive-list-side.html
@@ -5,9 +5,9 @@
     <!-- BEGIN archive:loop -->
     <li>
       <a href="{url}" class="flex items-center hover:opacity-70">
-        <span class="flex-1 block py-2 text-gray-900">{date#Y}年 {date#n}月</span>
+        <span class="flex-1 block py-2">{date#Y}年 {date#n}月</span>
         <!-- BEGIN amount:veil -->
-        <span class="block min-w-10 py-1 rounded-full text-sm text-center text-gray-700 font-medium bg-slate-100">{amount}</span>
+        <span class="block min-w-10 py-1 rounded-full text-sm text-center font-medium bg-slate-100">{amount}</span>
         <!-- END amount:veil -->
       </a>
     </li>

diff --git a/src/develop/include/entry/body.html b/src/develop/include/entry/body.html
@@ -17,7 +17,7 @@ <h1 class="font-bold text-3xl sm:text-4xl lg:text-5xl entry-title"><a href="{tit
       <p><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年 {date#n}月 {date#j}日</time></p>
       <!-- END date:veil -->
       <!-- BEGIN category:loop -->
-      <p><a href="{url}" class="inline-block px-3 py-2 leading-none rounded-full bg-slate-100 text-gray-700 font-medium uppercase">{name}</a></p>
+      <p><a href="{url}" class="inline-block px-3 py-2 leading-none rounded-full bg-slate-100 font-medium uppercase">{name}</a></p>
       <!-- END category:loop -->
     </div>
     <!-- BEGIN tag:veil -->
@@ -68,7 +68,7 @@ <h4 class="mb-1 font-medium leading-none tracking-tight">この記事は公開
     @include("/admin/entry/action.html")
 
     <!-- BEGIN udate:veil -->
-    <p class="mt-8 text-gray-700"><time datetime="{udate#Y}-{udate#m}-{udate#d}">{udate#Y}年 {udate#n}月 {udate#j}日</time> 更新</p>
+    <p class="mt-8"><time datetime="{udate#Y}-{udate#m}-{udate#d}">{udate#Y}年 {udate#n}月 {udate#j}日</time> 更新</p>
     <!-- END udate:veil -->
 
     <!-- BEGIN_IF [{{sns_share}}/eq/true] -->

diff --git a/src/develop/include/entry/summary-card.html b/src/develop/include/entry/summary-card.html
@@ -3,11 +3,11 @@
   @include("/admin/module/setting.html")
 
   <!-- BEGIN notFound -->
-  <p class="text-gray-800 text-lg text-center">記事が見つかりませんでした。</p>
+  <p class="text-gray-900 text-lg text-center">記事が見つかりませんでした。</p>
   <!-- END notFound -->
 
   <!-- BEGIN_MODULE Touch_Keyword -->
-  <p class="text-gray-800 text-xl font-bold mb-8">%{KEYWORD} の検索結果：{itemsAmount}件</p>
+  <p class="text-gray-900 text-xl font-bold mb-8">%{KEYWORD} の検索結果：{itemsAmount}件</p>
   <!-- END_MODULE Touch_Keyword -->
 
   <!-- BEGIN unit:loop -->
@@ -29,10 +29,10 @@
         >
         <!-- END_IF -->
         <!-- BEGIN category:veil -->
-        <p class="inline-block px-3 py-2 leading-none rounded-full text-xs font-medium uppercase bg-slate-100 text-gray-700">{categoryName}</p>
+        <p class="inline-block px-3 py-2 leading-none rounded-full text-xs font-medium uppercase bg-slate-100">{categoryName}</p>
         <!-- END category:veil -->
-        <h2 class="mt-3 text-gray-800 text-lg font-bold">{title}</h2>
-        <p class="mt-2 text-gray-500 text-sm">{summary}</p>
+        <h2 class="mt-3 text-gray-900 text-lg font-bold">{title}</h2>
+        <p class="mt-2 text-sm">{summary}</p>
         <div class="flex items-center mt-2 text-xs">
           <p class="text-gray-900"><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年 {date#n}月 {date#j}日</time></p>
           <!-- BEGIN new -->

diff --git a/src/develop/include/entry/tag-relational-card.html b/src/develop/include/entry/tag-relational-card.html
@@ -25,7 +25,7 @@ <h2 class="text-4xl font-extrabold text-gray-900 text-center sm:text-5xl lg:text
         >
         <!-- END_IF -->
         <!-- BEGIN category:veil -->
-        <p class="inline-block px-3 py-2 leading-none rounded-full text-xs font-medium uppercase bg-slate-100 text-gray-700">{categoryName}</p>
+        <p class="inline-block px-3 py-2 leading-none rounded-full text-xs font-medium uppercase bg-slate-100">{categoryName}</p>
         <!-- END category:veil -->
         <h2 class="mt-3 text-lg font-bold">{title}</h2>
         <p class="mt-2 text-sm text-gray-500">{summary}</p>

diff --git a/src/develop/include/header.html b/src/develop/include/header.html
@@ -1,32 +1,28 @@
 <header class="max-lg:sticky top-0 left-0 z-10 w-full bg-white" x-data="{ showMenu: false }">
-  <div class="px-4">
-    <div class="flex items-center justify-between gap-x-4 w-full h-20 mx-auto my-0 leading-6 text-gray-800">
+  <div class="container">
+    <div class="flex items-center justify-between gap-x-4 w-full h-14 leading-6 text-gray-900">
       <!-- BEGIN_MODULE Blog_Field ctx="bid/1" -->
 
-      <div class="font-extrabold text-gray-800 lg:w-auto title-font md:mb-0">
+      <div class="font-extrabold lg:w-auto text-2xl md:mb-0">
         <p>
           <a href="%{BLOG_URL}">
-            <!-- BEGIN_IF [{site_logo@path}/nem] -->
-            <img src="%{MEDIA_ARCHIVES_DIR}{site_logo@path}" alt="{site_logo@alt}" class="w-auto h-8 lg:h-12 hover:opacity-70">
-            <!-- ELSE -->
             <span>%{BLOG_NAME}</span>
-            <!-- END_IF -->
           </a>
         </p>
       </div>
       <!-- END_MODULE Blog_Field -->
 
       @include("/include/links/navigation.html")
 
-      <div @click="showMenu = !showMenu"
+      <div
         class="flex flex-col items-center items-end justify-center w-10 h-10 -mt-1 rounded-full cursor-pointer lg:hidden hover:bg-gray-100">
-        <svg class="w-6 h-6 text-gray-700" x-show="!showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round"
+        <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round"
           stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" x-cloak>
           <path d="M4 6h16M4 12h16M4 18h16"></path>
         </svg>
 
-        <svg class="w-6 h-6 text-gray-700" x-show="showMenu" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg" x-cloak>
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
         </svg>
       </div>

diff --git a/src/develop/include/links/navigation.html b/src/develop/include/links/navigation.html
@@ -1,8 +1,8 @@
 <!-- BEGIN_MODULE Links id="{{module_id}}" -->
-<nav class="bg-white max-lg:absolute max-lg:top-20 max-lg:w-full max-lg:h-[calc(100dvh-5rem)] max-lg:left-0 lg:block" :class="\{'block': showMenu, 'hidden': !showMenu \}">
+<nav class="bg-white max-lg:absolute max-lg:top-20 max-lg:w-full max-lg:h-[calc(100dvh-5rem)] max-lg:left-0 lg:block">
   <div>
     @include("/admin/module/setting.html")
-    <ul class="flex-wrap items-center list-none p-0 space-y-5 leading-6 text-gray-800 lg:static lg:w-auto lg:flex lg:space-y-0 lg:mt-0">
+    <ul class="flex-wrap items-center list-none p-0 space-y-5 leading-6 lg:static lg:w-auto lg:flex lg:space-y-0 lg:mt-0">
       <!-- BEGIN loop -->
       <li class="box-border w-full my-3 font-medium text-center lg:w-auto group">
         <a href="{url}" class="px-5 py-2 lg:group-last:pr-0 no-underline bg-transparent rounded-full cursor-pointer hover:opacity-70">{name}</a>

diff --git a/src/develop/include/parts/cta.html b/src/develop/include/parts/cta.html
diff --git a/src/develop/include/parts/page-title.html b/src/develop/include/parts/page-title.html
diff --git a/src/develop/include/parts/search-keyword.html b/src/develop/include/parts/search-keyword.html
@@ -5,7 +5,7 @@
     <input type="text" name="keyword" placeholder="検索キーワード" value="%{KEYWORD}" class="flex w-full h-10 px-3 pr-10 py-2 text-sm bg-white border rounded-md border-gray-200 ring-offset-background placeholder:text-neutral-500 focus:border-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50">
     <button type="submit" name="ACMS_POST_2GET" class="absolute inset-y-0 right-3">
       <span class="sr-only">検索</span>
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-gray-700">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
       </svg>
     </button>

diff --git a/src/develop/include/unit.html b/src/develop/include/unit.html
@@ -2,7 +2,7 @@
 
 @section(media-unit)
 <!-- media -->
-<div class="not-prose text-gray-700 text-sm text-center [&_a]:hover:opacity-70">
+<div class="not-prose text-sm text-center [&_a]:hover:opacity-70">
   @parent
 </div>
 @endsection

diff --git a/src/develop/include/user-profile/profile-card.html b/src/develop/include/user-profile/profile-card.html