Commit ff31b99

@@ -43,17 +43,17 @@ else {
 }
 ---
 
-<div id="pagination" class="flex w-full">
+<div id="pagination" class="flex w-full justify-between max-md:px-2">
   <div>
     {
       current > 1 && (
-        <Button id="prev-page-btn" class="btn-primary mr-auto" href={getPageUrl(current - 1)}>
+        <Button id="prev-page-btn" class="btn-primary" href={getPageUrl(current - 1)}>
           <Icon name="material-symbols:chevron-left-rounded" class="my-1 text-2xl" />
         </Button>
       )
     }
   </div>
-  <div class="mx-auto flex items-center justify-center gap-2">
+  <div class="max-2xs:hidden mx-auto flex items-center justify-center gap-2">
     <div class={pages.length > 1 ? 'join' : undefined}>
       {
         pages.map((p) => {
@@ -76,7 +76,7 @@ else {
       total > 1 && (
         <label
           id="page-jumper"
-          class="input input-bordered mx-2 flex flex-row items-center gap-0 overflow-hidden px-0"
+          class="input input-bordered max-xs:hidden mx-2 flex flex-row items-center gap-0 overflow-hidden px-0"
           data-base-url={baseUrl}
           data-special-pages={specialPages?.map((p) => `${p.page}:${p.url}`).join(',')}
         >
@@ -101,7 +101,7 @@ else {
   <div>
     {
       current < total && (
-        <Button id="next-page-btn" class="btn-primary ml-auto" href={getPageUrl(current + 1)}>
+        <Button id="next-page-btn" class="btn-primary" href={getPageUrl(current + 1)}>
           <Icon name="material-symbols:chevron-right-rounded" class="my-1 text-2xl" />
         </Button>
       )

@@ -49,6 +49,9 @@
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] * ));
 
 @theme {
+  --breakpoint-xs: 30rem;
+  --breakpoint-2xs: 20rem;
+  --breakpoint-3xs: 15rem;
   --tracking-extra-wide: 0.25em;
 }