تغییرات

components/haditha/CardList.vue

@@ -45,6 +45,7 @@ const goToLibraryShow = (item) => {
       class="library-list grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-5 md:gap-x-28 md:gap-y-12 mx-6"
     >
       <UCard
+      class="mx-auto"
         v-if="props.list.length"
         v-for="(item, index) in props.list"
         :key="index"
@@ -184,4 +185,5 @@ const goToLibraryShow = (item) => {
     }
   }
 }
+
 </style>

pages/haditha/public-pages/about-us.vue

@@ -30,7 +30,9 @@ const NavigationMenu = defineAsyncComponent(() =>
       <UContainer class="page-inner-container sm:px-6 lg:px-4">
         <navigation-menu></navigation-menu>
 
-        <div class="page-header pt-38 pb-4 flex justify-between items-center">
+        <div
+          class="page-header pt-10 md:pt-38 pb-4 flex justify-between items-center"
+        >
           <div class="flex items-center">
             <h1 class="m-0 title">درباره</h1>
             <img
@@ -42,36 +44,36 @@ const NavigationMenu = defineAsyncComponent(() =>
           </div>
         </div>
 
-        <div class="page-content p-6">
+        <div class="page-content p-5">
           <p>
             حدیثا، یک موتور جستجوی پیشرفته و تخصصی در حوزه احادیث اسلامی است که
             با هدف دسترسی آسان و سریع به منابع معتبر حدیثی طراحی شده است. این
             پلتفرم، بستری است برای پژوهشگران، علاقه‌مندان به معارف اسلامی، و
             تمامی افرادی که به دنبال دسترسی به گنجینه ارزشمند احادیث نبوی و
             اهل‌بیت (علیهم‌السلام) هستند.
-  </p>
+          </p>
 
-  <p>
+          <p>
             ما در حدیثا تلاش می‌کنیم تا با بهره‌گیری از فناوری‌های نوین و منابع
             اصیل اسلامی، بهترین تجربه جستجو را به کاربران ارائه دهیم. تمامی
             محتوای این موتور جستجو از کتب معتبر حدیثی و منابع شناخته‌شده استخراج
             شده و با دقت علمی بالا سامان‌دهی شده است.
-  </p>
+          </p>
 
-  <p>اهداف ما شامل موارد زیر است:</p>
+          <p>اهداف ما شامل موارد زیر است:</p>
 
-  <ul class="list-disc list-inside">
+          <ul class="list-disc list-inside">
-    <li>ارائه محتوای معتبر و دسته‌بندی‌شده از احادیث اسلامی.</li>
+            <li>ارائه محتوای معتبر و دسته‌بندی‌شده از احادیث اسلامی.</li>
-    <li>تسهیل دسترسی به معارف اسلامی برای پژوهشگران و عموم مردم.</li>
+            <li>تسهیل دسترسی به معارف اسلامی برای پژوهشگران و عموم مردم.</li>
-    <li>کمک به ترویج فرهنگ و اخلاق اسلامی از طریق انتشار احادیث.</li>
+            <li>کمک به ترویج فرهنگ و اخلاق اسلامی از طریق انتشار احادیث.</li>
-  </ul>
+          </ul>
 
-  <p>
+          <p>
             ما به حریم خصوصی کاربران خود احترام می‌گذاریم و متعهد به ارائه
             خدماتی با کیفیت و دقیق هستیم. حدیثا پلی است میان شما و کلام گهربار
             اهل‌بیت و پیامبر اسلام (صلی‌الله‌علیه‌و‌آله).
-  </p>
+          </p>
-  <p>به خانواده حدیثا بپیوندید و در مسیر دانش و معرفت گام بردارید.</p>
+          <p>به خانواده حدیثا بپیوندید و در مسیر دانش و معرفت گام بردارید.</p>
         </div>
       </UContainer>
     </div>
@@ -97,17 +99,24 @@ const NavigationMenu = defineAsyncComponent(() =>
     }
 
     .page-content {
+      height: calc(100dvh - 13em);
+      overflow: auto;
       color: var(--ui-color-two);
 
-p {
+      p {
-  font-family: IRANSansX;
+        font-family: IRANSansX;
-  font-weight: 300;
+        font-weight: 300;
-  font-size: 14px;
+        font-size: 14px;
-  line-height: 21px;
+        line-height: 21px;
-  letter-spacing: 0%;
+        letter-spacing: 0%;
-  text-align: right;
+        text-align: right;
-}
+      }
     }
   }
 }
+@media screen and (max-width: 719.99px) {
+  .page-content{
+    height: calc(100dvh - 12em);
+  }
+}
 </style>

pages/haditha/public-pages/contactus.vue

@@ -32,7 +32,9 @@ const NavigationMenu = defineAsyncComponent(() =>
 
         <navigation-menu></navigation-menu>
 
-        <div class="page-header pt-38 pb-4 flex justify-between items-center">
+        <div
+          class="page-header pt-10 md:pt-38 pb-4 flex justify-between items-center"
+        >
           <div class="flex items-center">
             <h1 class="m-0 title">تماس با ما</h1>
           </div>
@@ -89,8 +91,10 @@ const NavigationMenu = defineAsyncComponent(() =>
     left: 0;
     background-image: url("../../../assets/haditha/images/modal-top-bgi.png");
     backdrop-filter: blur(54px);
-    width: 447px;
+    width: 100%;
-    height: 447px;
+    max-width: 447px;
+    height: 100%;
+    max-height: 447px;
     top: 0;
     left: 0;
 
@@ -105,8 +109,11 @@ const NavigationMenu = defineAsyncComponent(() =>
     bottom: 0;
     background-image: url("../../../assets/haditha/images/modal-bttom-right-bgi.png");
     backdrop-filter: blur(54px);
-    width: 438px;
+    width: 100%;
-    height: 238px;
+
+    max-width: 438px;
+    height: 100%;
+    max-height: 238px;
     mix-blend-mode: Multiply;
     background-repeat: no-repeat;
     background-size: cover;
@@ -120,8 +127,11 @@ const NavigationMenu = defineAsyncComponent(() =>
     bottom: 0;
     left: 0;
 
-    width: 458px;
+    width: 100%;
-    height: 239px;
+    max-width: 458px;
+    height: 100%;
+
+    max-height: 239px;
     mix-blend-mode: Multiply;
     background-image: url("../../../assets/haditha/images/modal-bottom-left-bgi.png");
     background-repeat: no-repeat;

pages/haditha/public-pages/rules.vue

@@ -30,7 +30,9 @@ const NavigationMenu = defineAsyncComponent(() =>
       <UContainer class="page-inner-container sm:px-6 lg:px-4">
         <navigation-menu></navigation-menu>
 
-        <div class="page-header pt-38 pb-4 flex justify-between items-center">
+        <div
+          class="page-header pt-10 md:pt-38 pb-4 flex justify-between items-center"
+        >
           <div class="flex items-center">
             <h1 class="m-0 title">قوانین و مقررات</h1>
             <img
@@ -42,7 +44,7 @@ const NavigationMenu = defineAsyncComponent(() =>
           </div>
         </div>
 
-        <div class="page-content p-6">
+        <div class="page-content p-5">
           <ul class="list-decimal list-inside">
             <li>
               احترام به حقوق معنوی: تمامی محتواهای ارائه‌شده در این سایت متعلق
@@ -110,8 +112,9 @@ const NavigationMenu = defineAsyncComponent(() =>
     }
 
     .page-content {
+      height: calc(100dvh - 13em);
+      overflow: auto;
       color: var(--ui-color-two);
-
       ul li {
         font-family: IRANSansX;
         font-weight: 300;
@@ -123,4 +126,9 @@ const NavigationMenu = defineAsyncComponent(() =>
     }
   }
 }
+@media screen and (max-width: 719.99px) {
+  .page-content{
+    height: calc(100dvh - 12em);
+  }
+}
 </style>