fix サイドバー・フッター修正

appleple · Dec 26, 2024 · 5252ad1 · 5252ad1
1 parent a6037a4
commit 5252ad1
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 36 deletions.
diff --git a/src/develop/_layouts/two-column.html b/src/develop/_layouts/two-column.html
@@ -31,7 +31,7 @@
 @include("/admin/switch-user.html")
 @endsection
 
-<div class="container py-20">
+<div class="container py-16 md:py-20">
   @section("topicpath")
   <!-- BEGIN_MODULE Touch_NotTop -->
   <div class="mb-10">
@@ -40,10 +40,7 @@
   <!-- END_MODULE Touch_NotTop -->
   @endsection
 
-  <div
-    x-data="sideMenu"
-    class="grid grid-cols-1 gap-x-10 gap-y-20 lg:grid-cols-[minmax(0,_1fr)_288px] lg:gap-x-20"
-  >
+  <div class="grid grid-cols-1 gap-x-10 gap-y-20 lg:grid-cols-[minmax(0,_1fr)_288px] lg:gap-x-20">
     <main>
       @section("main")
       <p>継承してメインコンテンツを設定してください</p>
@@ -57,21 +54,29 @@
       <div class="max-lg:max-h-full max-lg:overflow-auto">
         @section("aside")
         <section>
-          <h2 class="mb-4 text-gray-900 font-bold">カテゴリー</h2>
+          <h2 class="mb-4 text-lg 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")
+          <h2 class="mb-5 text-lg text-gray-900 font-bold">ハッシュタグ</h2>
+          @include("/include/tag/cloud-side.html")
         </section>
-        
+
         <section class="mt-8">
-          <h2 class="mb-5 text-gray-900 font-bold">ハッシュタグ</h2>
-          @include("/include/tag/cloud-side.html")
+          <h2 class="mb-4 text-lg text-gray-900 font-bold">アーカイブ</h2>
+          @include("/include/entry/archive-list-side.html")
+          <div class="mt-8">
+            @include("/include/entry/calendar-side.html")
+          </div>
         </section>
-        
+
         <section class="mt-8">
+          <h2 class="mb-4 text-lg text-gray-900 font-bold">新着記事</h2>
+          @include("/include/entry/summary-side.html")
+        </section>
+
+        <section class="mt-10">
           <h2 class="sr-only">キーワード検索</h2>
           @include("/include/parts/search-keyword.html")
         </section>

diff --git a/src/develop/include/category/list-side.html b/src/develop/include/category/list-side.html
@@ -1,14 +1,19 @@
 <!-- BEGIN_MODULE Category_List id="{{module_id}}" -->
-<div>
+<div class="[&>ul>li>a>.icon]:hidden">
   @include("/admin/module/setting.html")
   <!-- BEGIN category:loop --><!-- BEGIN ul#front -->
-  <ul>
+  <ul class="border-b border-solid border-gray-200">
   <!-- END ul#front --><!-- BEGIN li#front -->
-    <li><!-- END li#front --><!-- BEGIN category:veil -->
-      <a href="{url}" class="flex items-center hover:opacity-70">
-        <span class="flex-1 block py-2 text-gray-900">{name}</span>
+    <li class="py-2 border-t border-solid border-gray-200 [&>ul]:border-b-0 [&>ul>li]:border-t-0 [&>ul>li]:py-0 [&>ul>li]:pl-3"><!-- END li#front --><!-- BEGIN category:veil -->
+      <a href="{url}" class="flex items-center gap-3 py-2 hover:opacity-70">
+        <span class="icon text-gray-400 mr-1">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+          </svg>
+        </span>
+        <span class="flex-1 block text-gray-900">{name}</span>
         <!-- BEGIN amount:veil -->
-        <span class="block min-w-10 py-1 rounded-full text-sm text-center font-medium bg-slate-100">{amount}</span>
+        <span class="block min-w-10 py-1 rounded-full text-sm text-center bg-slate-50">{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
@@ -1,11 +1,11 @@
 <!-- BEGIN_MODULE Entry_ArchiveList id="{module_id}" -->
 <div>
   @include("/admin/module/setting.html")
-  <ul class="acms-list-group">
+  <ul class="border-b border-solid border-gray-200">
     <!-- BEGIN archive:loop -->
-    <li>
-      <a href="{url}" class="flex items-center hover:opacity-70">
-        <span class="flex-1 block py-2">{date#Y}年 {date#n}月</span>
+    <li class="py-2 border-t border-solid border-gray-200">
+      <a href="{url}" class="flex items-center gap-3 py-2 hover:opacity-70">
+        <span class="flex-1 block">{date#Y}年 {date#n}月</span>
         <!-- BEGIN amount:veil -->
         <span class="block min-w-10 py-1 rounded-full text-sm text-center font-medium bg-slate-100">{amount}</span>
         <!-- END amount:veil -->

diff --git a/src/develop/include/entry/calendar-side.html b/src/develop/include/entry/calendar-side.html
@@ -0,0 +1,36 @@
+<!-- BEGIN_MODULE Calendar_Month -->
+<div class="text-gray-900">
+@include("/admin/module/setting.html")
+<h3 class="text-lg font-bold">{year}年{month}月</h3>
+<div class="grid grid-cols-7 mt-4" aria-hidden="true">
+  <!-- BEGIN weekLabel:loop -->
+  <div class="text-xs font-medium text-center [&:nth-child(n+6)]:text-red-600">{label}</div>
+  <!-- END weekLabel:loop -->
+</div>
+<div class="mt-4">
+  <!-- BEGIN week:loop -->
+  <div class="grid grid-cols-7">
+    <!-- BEGIN day:loop -->
+    <!-- BEGIN spacer -->
+    <div class="px-0.5 mb-1 aspect-square [&:nth-child(n+6)]:text-red-600" aria-hidden="true"></div>
+    <!-- END spacer -->
+    <!-- BEGIN none -->
+    <div class="flex items-center justify-center px-0.5 aspect-square text-sm text-center [&:nth-child(n+6)]:text-red-600">
+      <span <!-- BEGIN_IF [{day}/eq/%{d}] --> class="text-indigo-600 font-bold"<!-- END_IF -->>{day}</span>
+    </div>
+    <!-- END none -->
+    <!-- BEGIN link -->
+    <div class="flex items-center justify-center px-0.5 aspect-square text-sm text-center [&:nth-child(n+6)]:text-red-600">
+      <a href="{url}" class="flex items-center justify-center w-7 h-7 rounded-full cursor-pointer bg-gray-100 hover:bg-gray-200" aria-label="{day}日の記事一覧を表示する">
+        <span<!-- BEGIN_IF [{day}/eq/%{d}] --> class="text-indigo-600 font-bold"<!-- END_IF -->>{day}</span>
+      </a>
+    </div>
+    <!-- END link -->
+    <!-- END day:loop -->
+  </div>
+  <!-- END week:loop -->
+  <p class="text-right text-sm hover:underline">
+    <a href="%{BASE_URL}calendar.html" class="text-indigo-600">年間カレンダーで見る</a>
+  </p>
+</div>
+<!-- END_MODULE Calendar_Month -->
diff --git a/src/develop/include/entry/summary-side.html b/src/develop/include/entry/summary-side.html
@@ -4,14 +4,12 @@
   <ul>
     <!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->
     <li class="mb-5">
-      <a href="{url}" class="flex hover:opacity-70">
+      <a href="{url}" class="flex items-start gap-2 hover:opacity-70">
         <div class="w-1/3 aspect-square overflow-hidden rounded">
           <!-- BEGIN_IF [{path}/nem] -->
           <img
-            src="%{ROOT_DIR}{path}[resizeImg({x}, {y})]"
+            src="%{ROOT_DIR}{path}[resizeImg(192)]"
             alt="{alt}"
-            width="{x}"
-            height="{y}"
             class="object-cover w-full h-full"
           >
           <!-- ELSE -->
@@ -26,12 +24,12 @@
           <!-- END noimage -->
           <!-- END_IF -->
         </div>
-        <div class="flex flex-col items-start justify-center w-2/3 p-2">
-          <h3 class="mb-2 text-gray-900">{title}</h3>
+        <div class="flex flex-col items-start justify-center w-2/3">
+          <h3 class="text-gray-900 font-bold text-sm line-clamp-3">{title}</h3>
           <div class="flex items-center mt-1 text-xs">
-            <p class="text-gray-900 text-xs"><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年 {date#n}月 {date#j}日</time></p>
+            <p class="text-gray-500 text-xs"><time datetime="{date#Y}-{date#m}-{date#d}">{date#Y}年 {date#n}月 {date#j}日</time></p>
             <!-- BEGIN new -->
-            <p class="ml-3 text-indigo-600 font-bold">NEW</p>
+            <p class="ml-2 px-2 py-1 rounded-full bg-gray-50 text-gray-900 text-xs">NEW</p>
             <!-- END new -->
           </div>
         </div>

diff --git a/src/develop/include/footer.html b/src/develop/include/footer.html
@@ -1,5 +1,5 @@
 <footer class="bg-white">
-  <div class="max-w-screen-xl px-4 py-12 mx-auto space-y-8 overflow-hidden sm:px-6 lg:px-8">
+  <div class="overflow-hidden max-w-screen-xl pt-2 px-4 pb-6 mx-auto">
 
     @include("/include/links/textlink.html")
 

diff --git a/src/develop/include/header.html b/src/develop/include/header.html
@@ -1,4 +1,4 @@
-<header class="max-lg:sticky top-0 left-0 z-10 w-full bg-white" x-data="{ showMenu: false }">
+<header class="max-lg:sticky top-0 left-0 z-10 w-full bg-white">
   <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" -->
@@ -12,10 +12,11 @@
       </div>
       <!-- END_MODULE Blog_Field -->
 
-      @include("/include/links/navigation.html")
+      <div class="max-lg:hidden">
+        @include("/include/links/navigation.html")
+      </div>
 
-      <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">
+      <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" 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>

diff --git a/src/develop/src/style/main.css b/src/develop/src/style/main.css
@@ -396,9 +396,27 @@
 }
 /* stylelint-enable */
 
+/* stylelint-disable */
 /* ------------------------------ 
   独自カスタマイズ
  ------------------------------ */
+@layer utility {
+  /* Tag_Cloud */
+  .tagSize1, .tagSize2, .tagSize3 {
+    @apply text-xs;
+  }
+  .tagSize4, .tagSize5, .tagSize6, .tagSize7, .tagSize8, .tagSize9, .tagSize10 {
+      @apply text-sm;
+  }
+  .tagSize11, .tagSize12, .tagSize13, .tagSize14, .tagSize15, .tagSize16, .tagSize17 {
+      @apply text-base;
+  }
+  .tagSize18, .tagSize19, .tagSize20, .tagSize21, .tagSize22, .tagSize23, .tagSize24, .tagSize25 {
+      @apply text-lg;
+  }
+}
+/* stylelint-enable */
+
 
 /* エントリー本文
 =============================== */