arabic-web-development/examples/css-practical-v1.26.arhtml at master · GalaxyRuler/arabic-web-development · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<صفحة>
  <رأس>
    <عنوان>لوحة عملية</عنوان>
    <نمط>
      @لوحة_خط واجهة {
        عائلة_الخط: "Noto Kufi Arabic";
        قاعدة: فاتح;
        بدائل: غامق;
      }

      :جذر {
        نظام_الألوان: فاتح داكن;
        --مسافة: تقريب(للاقرب, مطلق_حسابي(1.2rem), 1px);
      }

      جسم {
        هامش: 0;
        عائلة_الخط: نظامي;
        لون: لون_فاتح_داكن(#172033, #f6f7fb);
        خلفية: لون_فاتح_داكن(#f8fafc, #111827);
      }

      رئيسي {
        عرض_العنصر: حصر(20rem, 92vw, 72rem);
        هامش_ضمني: تلقائي;
        حشو: 2rem;
      }

      قسم.بطاقات {
        عرض: شبكة;
        أعمدة_الشبكة: تكرار(ملاءمة_تلقائية, أدنى_أقصى(16rem, 1fr));
        فجوة: وتر(1rem, 0.5rem);
      }

      مقالة {
        رؤية_المحتوى: تلقائي;
        حجم_احتواء_داخلي: 18rem;
        مزراب_شريط_التمرير: حافتان_ثابتتان;
        هامش_قص_التجاوز: 1rem;
        ظل_الصندوق: 0 1rem 2rem #0002;
        نصف_قطر_الحد: 0.5rem;
        حشو: 1rem;
      }

      مقالة عنوان_٢ {
        قص_نص_الصندوق: ابدأ_القصر;
        حافة_نص_الصندوق: ابجدية_سفلية سطر_نص;
        تثبيت_السطور: 2;
      }

      مقالة فقرة {
        حرف_الواصلة: "-";
        حد_احرف_الواصلة: 6 3 2;
        تنويع_خط_رموز: رموز_ايموجي;
      }

      زر:منبثق_مفتوح,
      إدخال:ملء_تلقائي {
        لون_تمييز: ازرق;
      }

      @وسائط (يفضل_التباين: تباين_اعلى) و (يفضل_تقليل_الشفافية: شفافية_مخفضة) {
        مقالة { ظل_الصندوق: لا_شيء; }
      }
    </نمط>
  </رأس>
  <جسم>
    <رئيسي>
      <عنوان_١>لوحة عملية</عنوان_١>
      <قسم صنف="بطاقات">
        <مقالة>
          <عنوان_٢>بطاقة تشغيل</عنوان_٢>
          <فقرة>هذا نص عربي محفوظ كما هو داخل الصفحة الناتجة.</فقرة>
        </مقالة>
      </قسم>
    </رئيسي>
  </جسم>
</صفحة>