الگو:صفحه اصلی/دسته بندی موضوعی: تفاوت میان نسخهها
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
<html> | |||
<!-- بخش استایلهای اختصاصی و واکنشگرا --> | |||
<style> | |||
.wiki-province-container { | |||
direction: rtl; | |||
margin: 5px auto; | |||
max-width: 1200px; | |||
padding: 10px; | |||
} | |||
.wiki-province-grid { | |||
display: grid !important; | |||
grid-template-columns: repeat(4, 1fr) !important; | |||
gap: 15px !important; | |||
} | |||
.wiki-province-card { | |||
background: #ffffff; | |||
border: 1.5px solid #8ee0d8; /* رنگ پایه با ۲۵ درصد روشنایی بیشتر */ | |||
border-radius: 8px; | |||
padding: 15px 5px; | |||
text-align: center; | |||
box-shadow: 0 2px 4px rgba(0,0,0,0.02); | |||
transition: all 0.3s ease; | |||
cursor: pointer; | |||
color: #2d3748; | |||
font-weight: 600; | |||
/* استفاده از clamp برای تغییر اندازه فونت پویا بین 14px تا 17px متناسب با عرض صفحه */ | |||
font-size: clamp(14px, 1.2vw, 17px) !important; | |||
/* جلوگیری از شکستن متن و دوخطی شدن */ | |||
white-space: nowrap !important; | |||
overflow: hidden !important; | |||
text-overflow: ellipsis !important; | |||
display: block !important; | |||
} | |||
.wiki-province-card:hover { | |||
transform: translateY(-3px); | |||
box-shadow: 0 4px 12px rgba(101, 195, 186, 0.15); | |||
border-color: #65c3ba; /* تغییر رنگ به رنگ پایه در حالت هاور */ | |||
color: #65c3ba; | |||
} | |||
/* تنظیمات نمایشگر موبایل و تبلتهای کوچک */ | |||
@media (max-width: 768px) { | |||
.wiki-province-grid { | |||
grid-template-columns: repeat(2, 1fr) !important; /* ۲ کادر در هر ردیف */ | |||
gap: 10px !important; | |||
} | |||
.wiki-province-card { | |||
padding: 12px 4px !important; | |||
/* در موبایل اندازه فونت به صورت پویا با توجه به عرض صفحه بین 10.5px تا 14.5px تغییر میکند */ | |||
font-size: clamp(10.5px, 3.5vw, 14.5px) !important; | |||
} | |||
} | |||
</style> | |||
<div class="wiki-province-container"> | <div class="wiki-province-container"> | ||
<div class="wiki-province-grid"> | <div class="wiki-province-grid"> | ||