fix 一覧・ナビゲーション周りのスタイル調整

Author: flour621

src/develop/_layouts/two-column.html

@@ -34,7 +34,7 @@
 <div class="container py-16 md:py-20">
   @section("topicpath")
   <!-- BEGIN_MODULE Touch_NotTop -->
-  <div class="mb-10">
+  <div class="mb-4">
     @include("/include/topicpath.html")
   </div>
   <!-- END_MODULE Touch_NotTop -->

src/develop/include/entry/summary-card.html

@@ -11,7 +11,7 @@
   <!-- END_MODULE Touch_Keyword -->
 
   <!-- BEGIN unit:loop -->
-  <div class="grid grid-cols-12 pb-10 sm:gap-x-8 gap-y-16">
+  <div class="grid grid-cols-12 pb-10 gap-8">
     <!-- BEGIN entry:loop -->
     <div class="flex flex-col items-start space-y-3 col-span-12 {{column_class|default('sm:col-span-6')}}">
       <a href="{url}" class="block w-full hover:opacity-70">

src/develop/include/header.html

@@ -1,6 +1,6 @@
-<header class="max-lg:sticky top-0 left-0 z-10 w-full bg-white">
+<header class="max-lg:sticky top-0 left-0 z-10 w-full shadow-sm bg-white">
   <div class="container">
-    <div class="flex items-center justify-between gap-x-4 w-full h-14 leading-6 text-gray-900">
+    <div class="flex items-center justify-between gap-x-4 w-full leading-6 text-gray-900">
       <!-- BEGIN_MODULE Blog_Field ctx="bid/1" -->
 
       <div class="font-extrabold lg:w-auto text-2xl md:mb-0">

src/develop/include/htmx/swap-index.html

@@ -1,5 +1,7 @@
 <!-- タグフィルター -->
+<div class="mb-10">
 @include("/include/tag/filter.html")
+</div>
 
 @include("/include/entry/summary-card.html", {
   "ctx": "cid/%{CID}/page/%{PAGE}/%{DATE_YEAR}/%{DATE_MONTH}/keyword/%{KEYWORD}/tag/%{TAG}/"

src/develop/include/parts/navigation-pc.html

@@ -1,6 +1,6 @@
-<ul class="flex flex-wrap items-center list-none leading-6">
-  <li class="py-2.5 font-medium text-center group">
-    <a href="%{HOME_URL}" class="inline-flex items-center gap-2 px-5 py-2 hover:opacity-70">
+<ul class="flex flex-wrap items-center list-none leading-6 [&>li>a.stay]:border-b-2 [&>li>a.stay]:border-solid [&>li>a.stay]:border-indigo-600">
+  <li class="mx-5 font-medium text-center group">
+    <a href="%{HOME_URL}" class="<!-- BEGIN_IF [%{CCD}/neq/contact/_and_/%{ECD}/neq/profile.html] -->stay<!-- END_IF --> flex items-center gap-2 py-4 hover:opacity-70">
       <span>Blogs</span>
       <span class="text-gray-400 transition-transform group-hover:-rotate-180">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
@@ -22,13 +22,13 @@ <h2 class="inline-block mr-12 pr-12 py-2 border-r border-gray-200 font-normal">B
       </div>
     </div>
   </li>
-  <li class=" my-3 font-medium text-center">
-    <a href="%{HOME_URL}profile.html" class="px-5 py-2 no-underline bg-transparent rounded-full cursor-pointer hover:opacity-70">
+  <li class="mx-5 font-medium text-center">
+    <a href="%{HOME_URL}profile.html" class="js-link_match_location-full block py-4 no-underline hover:opacity-70">
       <span>Profile</span>
     </a>
   </li>
-  <li class=" my-3 font-medium text-center">
-    <a href="%{HOME_URL}contact.html" class="pl-5 py-2 no-underline bg-transparent rounded-full cursor-pointer hover:opacity-70">
+  <li class="ml-5 font-medium text-center">
+    <a href="%{HOME_URL}contact/" class="js-link_match_location-category block py-4 no-underline hover:opacity-70">
       <span>Contact</span>
     </a>
   </li>

src/develop/include/tag/filter.html

@@ -1,28 +1,25 @@
 <!-- BEGIN_MODULE Tag_Filter id="{{module_id}}" -->
 <!-- BEGIN tagBox -->
-<div class="mb-8">
-  <p class="flex flex-wrap gap-2 text-xl font-bold"><!-- BEGIN selected:loop -->
-    <span class="inline-flex items-start">#{name}</span>
-    <!-- END selected:loop -->の検索結果</p>
+<p class="flex flex-wrap gap-3 text-gray-900 text-2xl font-bold"><!-- BEGIN selected:loop -->
+  <span>#{name}</span>
+<!-- END selected:loop -->の検索結果</p>
 
-  <!-- BEGIN choice:veil -->
-  <div class="mt-3">
-    <h2 class="text-gray-500">さらに絞り込む</h2>
-    <ul class="flex flex-wrap gap-4 font-bold mt-2">
-      <!-- BEGIN choice:loop -->
-      <li>
-        <a href="{url}" class="hover:opacity-70"
-          hx-push-url="{url}"
-          hx-get="{url}tpl/include/htmx/swap-index.html"
-          hx-target="#swap-htmx"
-          hx-swap="innerHTML"
-        >#{name}</a>
-      </li>
-      <!-- END choice:loop -->
-    </ul>
-  </div>
-  <!-- END choice:veil -->
-  </p>
+<!-- BEGIN choice:veil -->
+<div class="mt-4">
+  <h2 class="text-gray-500">さらに絞り込む</h2>
+  <ul class="flex flex-wrap gap-x-4 gap-y-1.5 mt-2">
+    <!-- BEGIN choice:loop -->
+    <li>
+      <a href="{url}" class="text-gray-900 hover:opacity-70"
+        hx-push-url="{url}"
+        hx-get="{url}tpl/include/htmx/swap-index.html"
+        hx-target="#swap-htmx"
+        hx-swap="innerHTML"
+      >#{name}</a>
+    </li>
+    <!-- END choice:loop -->
+  </ul>
 </div>
+<!-- END choice:veil -->
 <!-- END tagBox -->
 <!-- END_MODULE Tag_Filter -->

src/develop/include/topicpath.html

@@ -1,6 +1,6 @@
 <!-- BEGIN_MODULE Topicpath id="{{module_id}}" -->
 <nav aria-label="現在のページ">
-<ol class="inline-flex items-center flex-wrap mb-3 text-sm text-neutral-500 [&_.active-breadcrumb]:text-neutral-500/80 sm:mb-0">
+<ol class="inline-flex items-center flex-wrap text-sm text-neutral-500 [&_.active-breadcrumb]:text-neutral-500/80">
   <!-- BEGIN blog:loop -->
   <li class="flex items-center h-full"><!-- BEGIN blog:glue --><span class="mx-2 text-gray-400">/</span><!-- END blog:glue --><a href="{url}" class="py-1 hover:text-neutral-900">{name}</a></li>
   <!-- END blog:loop --><!-- BEGIN category:loop -->

src/develop/index.html

@@ -1,6 +1,9 @@
 @extends("/_layouts/two-column.html")
 
 @section("main")
+<!-- BEGIN_MODULE Touch_Category -->
+<h2 class="text-gray-900 font-bold text-2xl mb-10">%{CATEGORY_NAME}</h2>
+<!-- END_MODULE Touch_Category -->
 <div id="swap-htmx">
 @include("/include/htmx/swap-index.html")
 </div>