تکنولوژی‌ها
قالب عمداً سبک نگه داشته شده: HTML، CSS ساده و یک کتابخانه کوچک جاوااسکریپت.
| بخش | چه | نسخه | فایل |
|---|---|---|---|
| رفتار صفحه | Alpine.js | 3.14.9 | assets/js/alpine.js |
| استایل | CSS ساده با custom properties | — | assets/css/pc-*.css |
| آیکون | Phosphor Icons (فونت) | — | assets/vendor/phosphor/ |
| فونت | دانا، ایران‌یکان، کلمه | woff2 | assets/fonts/ |
| عکس | Unsplash، WebP | — | assets/images/photos/ |
| نشان سرویس‌ها | Simple Icons (SVG) | — | assets/images/marks/ |
چه چیزهایی استفاده نشده
- فریم‌ورک CSS (Tailwind، Bootstrap): هر کلاس در فایل‌های
pc-*.cssنوشته شده و قابل خواندن است. - کتابخانه اسلایدر یا انیمیشن: اسلایدر محصول، ردیف کشیدنی و حرکت‌ها با چند خط CSS و
pc.jsساخته شده‌اند. - CDN: هیچ فایلی از اینترنت لود نمی‌شود، پس سایت با فیلتر یا قطعی سرویس‌های خارجی هم کامل می‌ماند.
- بیلد: نه npm، نه bundler.
Alpine.js
هر صفحه یک x-data روی دارد که داده و توابع آن صفحه را می‌دهد:
دستورهای پرکاربرد: x-data، x-text، x-show، x-for، @click، :class، x-model. مستندات: alpinejs.dev.
Phosphor Icons
فهرست همه آیکون‌ها: phosphoricons.com. نام هر آیکون را با پیشوند ph- بنویسید.
فونت‌ها
هر سه فونت از فونت‌های رایج وب فارسی‌اند و در pc-tokens.css با @font-face تعریف شده‌اند. هر پوسته فقط فونت خودش را لود می‌کند؛ مرورگر فایل‌های فونت پوسته‌های دیگر را دانلود نمی‌کند.
عکس‌ها
هر عکس در سه برش است: wide (۱۶۰۰×۱۰۰۰)، tall (۹۶۰×۱۲۰۰) و square (۱۰۰۰×۱۰۰۰). در جاوااسکریپت با photo(3, 'tall') آدرس ساخته می‌شود. عکس‌ها مجوز Unsplash دارند (استفاده تجاری آزاد، بدون نیاز به ذکر نام)؛ فهرست کامل در CREDITS.md.