added new rss buttons for mobile view

NixOS · Aug 28, 2024 · f4d8894 · f4d8894
1 parent 6e0ba30
commit f4d8894
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -65,8 +65,8 @@ const blogMenu = await getEntry("menus", "blog");
     >
       {
         blogMenu.data.map((e) => (
-	<div class="flex flex-col">
-          <div>
+	<div class="flex flex-row md:flex-col gap-4">
+          <div class="flex-1">
             <input
               name="category"
               type="checkbox"
@@ -98,7 +98,15 @@ const blogMenu = await getEntry("menus", "blog");
               <span class="font-light">{e.title}</span>
             </label>
 	  </div>
-	  <div class="flex flex-row" style="justify-content: center">
+          <div class="md:hidden pt-6">
+            <label
+              class="
+            relative p-4 md:p-8 gap-2 w-full md:w-auto text-nix-blue border-1 fill-nix-blue hover:fill-white border-nix-blue rounded-2xl flex md:flex-col items-center hover:bg-nix-blue-darker hover:text-white cursor-pointer peer-checked:bg-nix-blue peer-checked:text-white peer-checked:fill-white hover:peer-checked:border-nix-blue-darker hover:peer-checked:bg-nix-blue-darker peer-focus:ring-2 peer-focus:ring-black peer-focus:ring-offset-2"
+            >
+	    <a href={"/blog/" + e.id + "-rss.xml"}><InlineSVG src="/src/assets/image/blog-menu/rss.svg" class="inline-block w-12 h-12" /></a>
+            </label>
+	  </div>
+	  <div class="hidden md:flex flex-row rss-small" style="justify-content: center">
 	    <a href={"/blog/" + e.id + "-rss.xml"}><InlineSVG src="/src/assets/image/blog-menu/rss.svg" class="inline-block w-4 h-4" />rss</a>
 	  </div>
 	</div>