الگو:صفحه اصلی/فهرست شهرها: تفاوت میان نسخهها
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| (۶ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۴: | خط ۴: | ||
.wiki-province-container { | .wiki-province-container { | ||
direction: rtl; | direction: rtl; | ||
margin: | margin: 5px auto; | ||
max-width: 1200px; | max-width: 1200px; | ||
padding: 10px; | padding: 10px; | ||
} | } | ||
.wiki-province-grid { | .wiki-province-grid { | ||
display: grid !important; | display: grid !important; | ||
| خط ۱۴: | خط ۱۳: | ||
gap: 15px !important; | gap: 15px !important; | ||
} | } | ||
.wiki-province-card { | .wiki-province-card { | ||
background: #ffffff; | background: #ffffff; | ||
border: | border: 1.5px solid #8ee0d8; /* رنگ پایه با ۲۵ درصد روشنایی بیشتر */ | ||
border-radius: 8px; | border-radius: 8px; | ||
padding: 15px 5px; | padding: 15px 5px; | ||
| خط ۲۶: | خط ۲۴: | ||
color: #2d3748; | color: #2d3748; | ||
font-weight: 600; | font-weight: 600; | ||
font-size: 14px; | /* استفاده از 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 { | .wiki-province-card:hover { | ||
transform: translateY(-3px); | transform: translateY(-3px); | ||
box-shadow: 0 4px 12px rgba( | box-shadow: 0 4px 12px rgba(101, 195, 186, 0.15); | ||
border-color: # | border-color: #65c3ba; /* تغییر رنگ به رنگ پایه در حالت هاور */ | ||
color: # | color: #65c3ba; | ||
} | } | ||
/* تنظیمات نمایشگر موبایل و تبلتهای کوچک */ | /* تنظیمات نمایشگر موبایل و تبلتهای کوچک */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.wiki-province-grid { | .wiki-province-grid { | ||
grid-template-columns: repeat( | grid-template-columns: repeat(2, 1fr) !important; /* ۲ کادر در هر ردیف */ | ||
gap: 10px !important; | gap: 10px !important; | ||
} | } | ||
.wiki-province-card { | .wiki-province-card { | ||
padding: 12px 4px !important; | padding: 12px 4px !important; | ||
font-size: | /* در موبایل اندازه فونت به صورت پویا با توجه به عرض صفحه بین 10.5px تا 14.5px تغییر میکند */ | ||
font-size: clamp(10.5px, 3.5vw, 14.5px) !important; | |||
} | } | ||
} | } | ||
</style> | </style> | ||
<!-- بدنه اصلی ساختار دستهبندی استانها --> | <!-- بدنه اصلی ساختار دستهبندی استانها --> | ||
<div class="wiki-province-container"> | <div class="wiki-province-container"> | ||
<div style="text-align: center; margin-bottom: 15px;"> | |||
<div style="text-align: center; margin-bottom: | <h2 style="color: #2c3e50; border-bottom: 2px solid #65c3ba; display: inline-block; padding-bottom: 10px; font-weight: bold; font-size: 24px;"> مشاغل در استانهای ایران</h2> | ||
<h2 style="color: #2c3e50; border-bottom: 2px solid # | |||
<p style="color: #7f8c8d; font-size: 14px; margin-top: 10px;">برای مشاهده کسبوکارها، استان مورد نظر خود را انتخاب کنید.</p> | <p style="color: #7f8c8d; font-size: 14px; margin-top: 10px;">برای مشاهده کسبوکارها، استان مورد نظر خود را انتخاب کنید.</p> | ||
</div> | </div> | ||
<!-- شبکه کارتهای استانها --> | <!-- شبکه کارتهای استانها --> | ||
<div class="wiki-province-grid"> | <div class="wiki-province-grid"> | ||
| خط ۲۱۸: | خط ۲۱۸: | ||
</div> | </div> | ||
</div> | </div> | ||
</html> | </html> | ||