change: ドロワーメニュー魔わち野スタイル調整

appleple · Aug 8, 2024 · 59e2842 · 59e2842
1 parent 1e1e681
commit 59e2842
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 18 deletions.
diff --git a/src/develop/_layouts/two-column.html b/src/develop/_layouts/two-column.html
@@ -58,27 +58,27 @@
       @endsection
     </main>
 
-    <aside class="lg:block" :class="{'block': showSideMenu, 'hidden': !showSideMenu }">
+    <aside class="lg:block z-20" :class="{'block': showSideMenu, 'hidden': !showSideMenu }">
       <div class="fixed inset-0 bg-black bg-opacity-30"
         x-show="showSideMenu"
         x-transition
         @click="showSideMenu = false"
       ></div>
-      <div class="max-lg:fixed top-0 right-0 bottom-0 max-lg:p-6 bg-white transition-transform" :class="{'max-lg:translate-x-0': showSideMenu }">
+      <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': showSideMenu }">
         <div class="max-lg:max-h-full max-lg:overflow-auto">
           @section("aside")
           <section>
-            <h2 class="mb-5 text-gray-800 text-xl font-bold">カテゴリー</h2>
+            <h2 class="mb-4 text-gray-800 font-bold">カテゴリー</h2>
             @include("/include/category/list-side.html",)
           </section>
 
-          <section class="mt-12">
-            <h2 class="mb-5 text-gray-800 text-xl font-bold">アーカイブ</h2>
+          <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-12">
-            <h2 class="mb-5 text-gray-800 text-xl font-bold">ハッシュタグ</h2>
+          <section class="mt-8">
+            <h2 class="mb-5 text-gray-800 font-bold">ハッシュタグ</h2>
             @include("/include/tag/cloud-side.html")
           </section>
 
@@ -87,19 +87,28 @@ <h2 class="sr-only">キーワード検索</h2>
             @include("/include/parts/search-keyword.html")
           </section>
 
-          <section class="mt-12">
-            <h2 class="text-gray-800 text-xl font-bold">プロフィール</h2>
+          <section class="mt-8">
+            <h2 class="mb-5 text-gray-800 font-bold">プロフィール</h2>
             @include("/include/parts/profile-card.html")
           </section>
           @endsection
         </div>
       </div>
     </aside>
 
-    <button class="fixed right-6 bottom-6 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 rounded-md 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" @click="showSideMenu = !showSideMenu" aria-label="サイドメニュー表示切替">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-8">
-        <path fill-rule="evenodd" d="M3 6a3 3 0 0 1 3-3h2.25a3 3 0 0 1 3 3v2.25a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm9.75 0a3 3 0 0 1 3-3H18a3 3 0 0 1 3 3v2.25a3 3 0 0 1-3 3h-2.25a3 3 0 0 1-3-3V6ZM3 15.75a3 3 0 0 1 3-3h2.25a3 3 0 0 1 3 3V18a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2.25Zm9.75 0a3 3 0 0 1 3-3H18a3 3 0 0 1 3 3V18a3 3 0 0 1-3 3h-2.25a3 3 0 0 1-3-3v-2.25Z" clip-rule="evenodd" />
-      </svg>
+    <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': showSideMenu, 'right-0 rounded-r-none': !showSideMenu }"
+      @click="showSideMenu = !showSideMenu">
+      <template x-if="!showSideMenu">
+        <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="showSideMenu">
+        <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>

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">
         <span class="flex-1 block py-2 text-gray-900">{name}</span>
         <!-- BEGIN amount:veil -->
-        <span class="block w-10 py-1 rounded-md text-sm text-center text-gray-700 bg-slate-100">{amount}</span>
+        <span class="block min-w-10 py-1 rounded-full text-sm text-center text-gray-700 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
@@ -7,7 +7,7 @@
       <a href="{url}" class="flex items-center">
         <span class="flex-1 block py-2 text-gray-900">{date#Y}年 {date#n}月</span>
         <!-- BEGIN amount:veil -->
-        <span class="block w-10 py-1 rounded-md text-sm text-center text-gray-700 bg-slate-100">{amount}</span>
+        <span class="block min-w-10 py-1 rounded-full text-sm text-center text-gray-700 font-medium bg-slate-100">{amount}</span>
         <!-- END amount:veil -->
       </a>
     </li>

diff --git a/src/develop/include/links/navigation.html b/src/develop/include/links/navigation.html
@@ -5,7 +5,7 @@
     <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">
       <!-- 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 group-last:pr-0 no-underline bg-transparent rounded-full cursor-pointer hover:opacity-70">{name}</a>
+        <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>
       </li>
       <!-- END loop -->
     </ul>

diff --git a/src/develop/include/parts/profile-card.html b/src/develop/include/parts/profile-card.html
@@ -1,5 +1,5 @@
 <div class="w-full mt-3 border border-gray-200 rounded-lg shadow-sm">
-  <div class="flex flex-col items-center justify-center p-10">
+  <div class="flex flex-col items-center justify-center p-5">
     <img class="w-32 h-32 mb-6 rounded-full" src="https://cdn.devdojo.com/images/june2021/headshot2.jpg">
     <h2 class="text-gray-800 text-lg font-medium">John Doe</h2>
     <p class="font-medium text-blue-500">CEO and Founder</p>
@@ -8,7 +8,7 @@ <h2 class="text-gray-800 text-lg font-medium">John Doe</h2>
 
   <div class="flex border-t border-gray-200 divide-x divide-gray-200">
     <a href="#_" class="flex-1 block p-5 text-center text-gray-300 transition duration-200 ease-out hover:bg-gray-100 hover:text-gray-500">
-      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-auto fill-current" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512" class="w-6 h-6 mx-auto" aria-hidden="true"><!-- !Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. --><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
     </a>
     <a href="#_" class="flex-1 block p-5 text-center text-gray-300 transition duration-200 ease-out hover:bg-gray-100 hover:text-gray-500">
       <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-auto fill-current" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /></svg>