Standardized styles

Author: aalhour

_data/strings_ar.yml

@@ -2,7 +2,7 @@
 # All user-facing text for the Arabic version
 
 # Site
-site_title: "البازار الرقمي 💬"
+site_title: "البازار الرقمي"
 site_tagline: "بازار حديث للعقول الرقمية العربية."
 
 #############################
@@ -94,7 +94,7 @@ about:
       title: "طقوس وجلسات تعيد الناس باستمرار"
       description: "لا نعتمد على التفاعل «بالأمل». لدينا إيقاع ثابت مثل سبت البازار، وجلسات فايرسايد الشهرية، وأسئلة وأجوبة دورية — كي تتراكم العلاقات مع الوقت بدل أن تخبو."
     - label: "المشاريع والإرشاد"
-      title: "من حديث → روابط ودّية → إنجاز"
+      title: "من حديث ← روابط ودّية ← إنجاز"
       description: "عندما يتكوّن الودّ والثقة، تبدأ الأشياء الحقيقية: دوائر تغذية راجعة، إرشاد، تعاون، ومشاريع وُلدت من المجتمع مثل Meshkah. الإرشاد مُنظّم (وقت محدد/طلبات واضحة)، والمشاريع اختيارية — بلا وعود فضفاضة، فقط إثبات عمل."
 
 # Rhythm Section (How we use the space)
@@ -124,8 +124,8 @@ rules_summary:
   items:
     - title: "لا سبام. لا ترويج مبطّن. لا نشرٍ متكرر بين المسارات."
       description: "أي رابط يحتاج سياقاً (لمن هو + لماذا يهم + ماذا تريد). انشر مرة واحدة في المسار الصحيح — ولا ترشّ المحتوى في كل مكان."
-    - title: "لا لقُمع «راسلني خاص»."
-      description: "لا تصطد عملاء/فرص/مرشحين عبر دفع الناس للخاص. الافتراضي هو الرد علناً. الخاص فقط بموافقة أو بطلب."
+    - title: "لا لقُمع «راسلني على الخاص»."
+      description: "لا تصطد عملاء/فرص/مرشحين عبر دفع الناس للخاص. الخيار الافتراضي هو الرد علناً. الخاص فقط بموافقة أو بطلب."
     - title: "ابقَ قريباً من العمل."
       description: "تقنية، منتجات، أعمال، مسارات مهنية، والبيئة الرقمية. لا نقاشات سياسية/دينية/طائفية تتحول لحرائق."
     - title: "اسأل جيداً. ورد الجميل."
@@ -152,7 +152,7 @@ rules_page:
   dek: "هذه الإرشادات موجودة ليبقى البازار الرقمي مفيداً ودافئاً وآمناً — لا لفرض رقابة زائدة. إذا ترددت، اختر الوضوح والكرم والاحترام."
   meta_note: "هذه وثيقة حيّة. سنحسّنها مع نمو المجتمع وظهور مواقف جديدة."
   short_version_label: "باختصار:"
-  short_version: "احترام قبل كل شيء. كن مفيداً. لا سبام. لا قُمع «راسلني خاص». ابقَ قريباً من العمل. احمِ الخصوصية. للمشرفين حق إزالة من يكرر إفساد المكان."
+  short_version: "الإحترام قبل كل شيء. كن مفيداً. لا سبام. لا قُمع «راسلني على الخاص». ابقَ قريباً من العمل. احمِ الخصوصية. للمشرفين حق إزالة من يكرر إفساد المكان."
   rules:
     - number: "٠١"
       title: "الاحترام والأمان أولاً"
@@ -198,7 +198,7 @@ rules_page:
         - ✅ جيد: “نبحث عن مهندس Backend في عمّان (أو عن بُعد). التقنية: Go/Postgres. نطاق الراتب: X–Y. نبحث عن ترشيحات. (مسار الوظائف)”
         - ✅ جيد: “هذه خلاصة Postmortem لعطل حصل معنا — أشاركها لأنها مرتبطة بنقاش اليوم. أهم درس: …”
         - ❌ غير مناسب: نشر نفس رابط “دورتي/منتجي” في ٣ مسارات بدون سياق.
-        - ❌ غير مناسب: “فرصة رهيبة!! راسلني خاص” بدون تفاصيل.
+        - ❌ غير مناسب: “فرصة رهيبة!! راسلني على الخاص” بدون تفاصيل.
 
     - number: "٠٥"
       title: "الوظائف والفرص (موثّقة، منظمة، وفي مسارها فقط)"
@@ -212,11 +212,11 @@ rules_page:
         **غير مسموح:** سبام التوظيف، رسائل جماعية بالخاص، أو “أرسل CV” بدون أي تفاصيل.
 
     - number: "٠٦"
-      title: "الرسائل الخاصة ليست الافتراضي"
+      title: "الرسائل الخاصة ليست الخيار الافتراضي"
       body: |
-        نحن لا نشجع قُمع “راسلني خاص”.
+        نحن لا نشجع قُمع “راسلني على الخاص”.
 
-        الافتراضي أن يكون الرد علناً ليستفيد الجميع. الخاص فقط:
+        الخيار الافتراضي أن يكون الرد علناً ليستفيد الجميع. الخاص فقط:
         - عندما يطلب الطرف الآخر ذلك صراحة، أو
         - لتفاصيل حساسة بعد ملخص علني، أو
         - لمقدمات/تعريفات بموافقة الطرفين.
@@ -355,7 +355,7 @@ start_here_page:
     heading: "📜 القواعد في ٢٠ ثانية"
     items:
       - "لا سبام، لا ترويج مبطّن، ولا تكرار نشر نفس الشيء"
-      - "لا سلوك \"راسلني خاص\" كسوق للصفقات"
+      - "لا سلوك \"راسلني على الخاص\" كسوق للصفقات"
       - "التزم بمواضيع العمل (لا حروب سياسية/طائفية)"
       - "احترام الخصوصية والسلامة"
       - "للمشرفين حق إزالة من يُسيء للمساحة"

_data/strings_en.yml

@@ -2,7 +2,7 @@
 # All user-facing text for the English version
 
 # Site
-site_title: "Digital Bazaar 💬"
+site_title: "Digital Bazaar"
 site_tagline: "A modern bazaar for Arab digital minds."
 
 #############################
@@ -229,7 +229,7 @@ rules_page:
 #############################
 start_here_page:
   title: "Start Here (60 seconds)"
-  subtitle: "Do these three steps to be active, not overwhelmed, today."
+  subtitle: "Do these three steps to start contributing today and avoid getting overwhelmed."
 
   # Checklist
   checklist:

_layouts/cadence.html

@@ -44,53 +44,51 @@ <h1 class="hero-title">{{ strings.cadence_page.title }}</h1>
 </section>
 
 <!-- Keep up callout -->
-<div class="cadence-keep-up-section">
-  <div class="cadence-keep-up">
-    <strong>{{ strings.cadence_page.keep_up.label }}</strong> {{ strings.cadence_page.keep_up.text }}
-  </div>
+<div class="callout-box callout-box--info" style="margin-top: var(--space-lg);">
+  <strong>{{ strings.cadence_page.keep_up.label }}</strong> {{ strings.cadence_page.keep_up.text }}
 </div>
 
 <!-- 1) Recurring Sessions -->
-<div class="cadence-section">
+<section class="section">
   <h2>{{ strings.cadence_page.rhythms.heading }}</h2>
-  <div class="cadence-rhythms">
+  <div class="rhythm-grid">
     {%- for item in strings.cadence_page.rhythms.items -%}
     <div class="rhythm-card">
       <h3>{{ item.title }}</h3>
       <p class="rhythm-desc">{{ item.description }}</p>
-      <p class="rhythm-how"><strong>{{ item.how }}</strong></p>
+      <p class="rhythm-how">{{ item.how }}</p>
     </div>
     {%- endfor -%}
   </div>
-</div>
+</section>
 
 <!-- 2) How to Participate -->
-<div class="cadence-section">
+<section class="section">
   <h2>{{ strings.cadence_page.participation.heading }}</h2>
-  <div class="two-col-quality">
-    <div class="quality-card do-card">
+  <div class="info-card-grid">
+    <div class="info-card info-card--flat info-card--tall info-card--do">
       <h3>{{ strings.cadence_page.participation.do.heading }}</h3>
-      <ul>
+      <ul class="list-plain list-check">
         {%- for item in strings.cadence_page.participation.do.items -%}
         <li>{{ item }}</li>
         {%- endfor -%}
       </ul>
     </div>
-    <div class="quality-card dont-card">
+    <div class="info-card info-card--flat info-card--tall info-card--dont">
       <h3>{{ strings.cadence_page.participation.dont.heading }}</h3>
-      <ul>
+      <ul class="list-plain list-cross">
         {%- for item in strings.cadence_page.participation.dont.items -%}
         <li>{{ item }}</li>
         {%- endfor -%}
       </ul>
     </div>
   </div>
-</div>
+</section>
 
 <!-- 3) Host a Session -->
-<div class="cadence-section">
+<section class="section">
   <h2>{{ strings.cadence_page.host.heading }}</h2>
-  <p class="host-intro">{{ strings.cadence_page.host.text }}</p>
+  <p>{{ strings.cadence_page.host.text }}</p>
 
   <div class="intro-template">
     <h3>{{ strings.cadence_page.host.template_label }}</h3>
@@ -101,9 +99,9 @@ <h3>{{ strings.cadence_page.host.template_label }}</h3>
         <span class="copy-text">{{ strings.cadence_page.host.copy_button }}</span>
       </button>
     </div>
-    <p class="copy-hint">{{ strings.cadence_page.host.note }}</p>
+    <p class="hint-text">{{ strings.cadence_page.host.note }}</p>
   </div>
-</div>
+</section>
 
 <script>
 (function() {
@@ -127,17 +125,14 @@ <h3>{{ strings.cadence_page.host.template_label }}</h3>
 </script>
 
 <!-- 4) FAQ -->
-<div class="cadence-section">
+<section class="section">
   <h2>{{ strings.cadence_page.faq.heading }}</h2>
-  <div class="mini-faq">
-    {%- for item in strings.cadence_page.faq.items -%}
-    <div class="faq-item">
-      <strong>{{ item.question }}</strong>
-      <p>{{ item.answer }}</p>
-    </div>
-    {%- endfor -%}
+  {%- for item in strings.cadence_page.faq.items -%}
+  <div class="faq-item">
+    <strong>{{ item.question }}</strong>
+    <p>{{ item.answer }}</p>
   </div>
-</div>
+  {%- endfor -%}
+</section>
 
 {{ content }}
-

_layouts/home.html

@@ -100,13 +100,13 @@ <h2 class="section-title">{{ strings.rules_summary.title }}</h2>
   <div class="two-col">
     <div>
       <div class="mini-heading">{{ strings.rules_summary.short_title }}</div>
-      <ul class="clean">
+      <ul class="list-plain list-arrow list-muted">
         {%- for rule in strings.rules_summary.items -%}
         <li><strong>{{ rule.title }}</strong> {{ rule.description }}</li>
         {%- endfor -%}
       </ul>
     </div>
-    <div class="callout">
+    <div class="callout-box">
       <p class="mini-heading">{{ strings.rules_summary.moderation_title }}</p>
       <p>{{ strings.rules_summary.moderation_text }}</p>
       <p style="margin-top:10px;">

_layouts/rules.html

@@ -44,24 +44,24 @@ <h1 class="hero-title">{{ strings.rules_page.title }}</h1>
 </section>
 
 <div class="rules-intro">
-  <p class="meta-note">{{ strings.rules_page.meta_note }}</p>
+  <p class="hint-text" style="text-align: start;">{{ strings.rules_page.meta_note }}</p>
 </div>
 
-<div class="highlight-box">
+<div class="callout-box callout-box--info">
   <strong>{{ strings.rules_page.short_version_label | default: 'Short version:' }}</strong> {{ strings.rules_page.short_version }}
 </div>
 
-<ol class="rules-list-detailed">
+<ol class="rules-list">
   {%- for rule in strings.rules_page.rules -%}
-  <li class="rule">
-    <div class="rule-title-row">
-      <div class="rule-number">{{ rule.number }}</div>
-      <div class="rule-title">{{ rule.title }}</div>
+  <li class="rule-item">
+    <div class="rule-header">
+      <span class="rule-number">{{ rule.number }}</span>
+      <span class="rule-title">{{ rule.title }}</span>
     </div>
     <div class="rule-body">
       {{ rule.body | markdownify }}
       {%- if rule.list -%}
-      <ul class="rule-list-inner">
+      <ul class="list-plain list-arrow">
         {%- for item in rule.list -%}
         <li>{{ item }}</li>
         {%- endfor -%}
@@ -72,13 +72,15 @@ <h1 class="hero-title">{{ strings.rules_page.title }}</h1>
   {%- endfor -%}
 </ol>
 
-<div class="cta-box">
+<div class="callout-box callout-box--white" style="text-align: {% if lang == 'ar' %}right{% else %}left{% endif %};">
   <p><strong>{{ strings.rules_page.cta_title }}</strong> {{ strings.rules_page.cta_text }}</p>
   <p>{{ strings.rules_page.cta_closing }}</p>
-  <a class="btn btn-primary" href="{{ site.social.whatsapp_community }}" target="_blank" rel="noopener">
-    <span>{{ strings.buttons.join_whatsapp }}</span>
-    <span aria-hidden="true">{{ strings.arrow_external }}</span>
-  </a>
+  <p style="margin-top: var(--space-md);">
+    <a class="btn btn-primary" href="{{ site.social.whatsapp_community }}" target="_blank" rel="noopener">
+      <span>{{ strings.buttons.join_whatsapp }}</span>
+      <span aria-hidden="true">{{ strings.arrow_external }}</span>
+    </a>
+  </p>
 </div>
 
 {{ content }}