arabic-web-development/examples/css-parser-complete-v1.29.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
<صفحة>
  <رأس>
    <عنوان>اكتمال محلل CSS</عنوان>
    <نمط>
      /* Phase G keeps comments, strings, and URLs opaque while translating known CSS vocabulary. */
      :جذر {
        --مسافة-البطاقة: حصر(1rem, احسب(2vw + 0.5rem), 2rem);
        --صورة-البطاقة: رابط("/assets/cards/card).png");
        نظام_الألوان: فاتح داكن;
      }

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

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

      قسم.بطاقات > مقالة:تركيز_داخلي,
      قسم.بطاقات > مقالة:اين(:تركيز, :تركيز_مرئي) {
        عرض: شبكة;
        أعمدة_الشبكة: تكرار(ملاءمة_تلقائية, أدنى_أقصى(16rem, 1fr));
        فجوة: var(--مسافة-البطاقة);
        خلفية: رابط("/assets/cards/card).png") مركز / غطاء بلا_تكرار;
        ظل_الصندوق: 0 1rem 2rem #0002;
        تحويل: دوران(0deg);
      }

      مقالة::قبل {
        محتوى: "url(display) يبقى نصا";
        عرض: كتلة;
      }

      @وسائط (أدنى_عرض: 48rem) {
        @يدعم (عرض: شبكة) {
          قسم.بطاقات {
            عرض: شبكة;
            أعمدة_الشبكة: تكرار(2, أدنى_أقصى(0, 1fr));
            فجوة: حصر(1rem, 2vw, 2rem);
          }
        }
      }
    </نمط>
  </رأس>
  <جسم>
    <رئيسي>
      <عنوان_١>اكتمال محلل CSS</عنوان_١>
      <قسم صنف="بطاقات">
        <مقالة نمط="لون: أزرق; خلفية: رابط('/assets/inline).png'); عرض_العنصر: احسب(100% - 2rem);">
          <عنوان_٢>بطاقة متداخلة</عنوان_٢>
          <فقرة>هذا المثال يغطي سياقات CSS المتداخلة مع نمط مضمن.</فقرة>
        </مقالة>
      </قسم>
    </رئيسي>
  </جسم>
</صفحة>