درس 45؛ متغیرهای CSS و سیستم رنگ و اندازه
ZIP را استخراج و index.html را باز کنید. فونت محلی است؛ اینترنت و نصب لازم نیست.
tokens.css مقادیر عمومی را تعریف می کند. style.css مصرف کننده آنهاست. promo رنگ تاکید و مرز را محلی بازتعریف می کند.
آزمایش: color-accent در :root را از #075985 به #166534 تغییر دهید. کارت های پیش فرض باید سبز شوند اما promo نارنجی باقی بماند. به کنتراست سفید روی رنگ جدید دقت کنید.
space-3 را از 1.5rem به 2rem تغییر دهید؛ فاصله داخلی و gap کارت ها تغییر می کنند. radius-card را نیز بررسی کنید.
متغیر radius-button تعریف نشده و fallback برابر 0.5rem دارد. با تعریف آن روی :root، تغییر دکمه ها را ببینید.
تمرین: فقط در exercise رنگ تاکید #6b21a8 و شعاع کارت 1.5rem شود. پاسخ با این خط پس از style.css فعال می شود:
<link rel="stylesheet" href="solution.css">
برای عیب یابی، در Inspect مقدار custom property را روی خود دکمه و والدهای آن بررسی کنید. نام ها به بزرگی حروف حساس اند. var را داخل شرط عرض @media نمی توان به این روش استفاده کرد.
در 320، 768 و 1280px، با متن بلند و بزرگ نمایی 200 درصد آزمایش کنید. با Tab همه لینک ها را دنبال کنید. رسانه و جاوااسکریپت خارجی وجود ندارد.
