diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/examples/blog-rtl/index.html (renamed from site/content/docs/5.2/examples/blog-rtl/index.html) | 119 |
1 files changed, 85 insertions, 34 deletions
diff --git a/site/content/docs/5.2/examples/blog-rtl/index.html b/site/content/docs/5.3/examples/blog-rtl/index.html index 05af925..274ea0e 100644 --- a/site/content/docs/5.2/examples/blog-rtl/index.html +++ b/site/content/docs/5.3/examples/blog-rtl/index.html @@ -5,17 +5,29 @@ direction: rtl extra_css: - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap" - "../blog/blog.rtl.css" -include_js: false --- +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"> + <circle cx="12" cy="12" r="10"/> + <path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/> + </symbol> + <symbol id="cart" viewBox="0 0 16 16"> + <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </symbol> + <symbol id="chevron-right" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/> + </symbol> +</svg> + <div class="container"> - <header class="blog-header lh-1 py-3"> + <header class="border-bottom lh-1 py-3"> <div class="row flex-nowrap justify-content-between align-items-center"> <div class="col-4 pt-1"> <a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a> </div> <div class="col-4 text-center"> - <a class="blog-header-logo text-dark" href="#">كبير</a> + <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">كبير</a> </div> <div class="col-4 d-flex justify-content-end align-items-center"> <a class="link-secondary" href="#" aria-label="بحث"> @@ -26,30 +38,30 @@ include_js: false </div> </header> - <div class="nav-scroller py-1 mb-2"> - <nav class="nav d-flex justify-content-between"> - <a class="p-2 link-secondary" href="#">العالم</a> - <a class="p-2 link-secondary" href="#">الولايات المتحدة</a> - <a class="p-2 link-secondary" href="#">التقنية</a> - <a class="p-2 link-secondary" href="#">التصميم</a> - <a class="p-2 link-secondary" href="#">الحضارة</a> - <a class="p-2 link-secondary" href="#">المال والأعمال</a> - <a class="p-2 link-secondary" href="#">السياسة</a> - <a class="p-2 link-secondary" href="#">الرأي العام</a> - <a class="p-2 link-secondary" href="#">العلوم</a> - <a class="p-2 link-secondary" href="#">الصحة</a> - <a class="p-2 link-secondary" href="#">الموضة</a> - <a class="p-2 link-secondary" href="#">السفر</a> + <div class="nav-scroller py-1 mb-3 border-bottom"> + <nav class="nav nav-underline justify-content-between"> + <a class="nav-item nav-link link-body-emphasis active" href="#">العالم</a> + <a class="nav-item nav-link link-body-emphasis" href="#">الولايات المتحدة</a> + <a class="nav-item nav-link link-body-emphasis" href="#">التقنية</a> + <a class="nav-item nav-link link-body-emphasis" href="#">التصميم</a> + <a class="nav-item nav-link link-body-emphasis" href="#">الحضارة</a> + <a class="nav-item nav-link link-body-emphasis" href="#">المال والأعمال</a> + <a class="nav-item nav-link link-body-emphasis" href="#">السياسة</a> + <a class="nav-item nav-link link-body-emphasis" href="#">الرأي العام</a> + <a class="nav-item nav-link link-body-emphasis" href="#">العلوم</a> + <a class="nav-item nav-link link-body-emphasis" href="#">الصحة</a> + <a class="nav-item nav-link link-body-emphasis" href="#">الموضة</a> + <a class="nav-item nav-link link-body-emphasis" href="#">السفر</a> </nav> </div> </div> <main class="container"> - <div class="p-4 p-md-5 mb-4 rounded text-bg-dark"> - <div class="col-md-6 px-0"> + <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary"> + <div class="col-lg-6 px-0"> <h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1> <p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p> - <p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p> + <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">أكمل القراءة...</a></p> </div> </div> @@ -57,11 +69,14 @@ include_js: false <div class="col-md-6"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="col p-4 d-flex flex-column position-static"> - <strong class="d-inline-block mb-2 text-primary">العالم</strong> + <strong class="d-inline-block mb-2 text-primary-emphasis">العالم</strong> <h3 class="mb-0">مشاركة مميزة</h3> - <div class="mb-1 text-muted">نوفمبر 12</div> + <div class="mb-1 text-body-secondary">نوفمبر 12</div> <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> - <a href="#" class="stretched-link">أكمل القراءة</a> + <a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> + أكمل القراءة + <svg class="bi"><use xlink:href="#chevron-right"/></svg> + </a> </div> <div class="col-auto d-none d-lg-block"> {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} @@ -71,11 +86,14 @@ include_js: false <div class="col-md-6"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="col p-4 d-flex flex-column position-static"> - <strong class="d-inline-block mb-2 text-success">التصميم</strong> + <strong class="d-inline-block mb-2 text-success-emphasis">التصميم</strong> <h3 class="mb-0">عنوان الوظيفة</h3> - <div class="mb-1 text-muted">نوفمبر 11</div> + <div class="mb-1 text-body-secondary">نوفمبر 11</div> <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> - <a href="#" class="stretched-link">أكمل القراءة</a> + <a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> + أكمل القراءة + <svg class="bi"><use xlink:href="#chevron-right"/></svg> + </a> </div> <div class="col-auto d-none d-lg-block"> {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} @@ -84,20 +102,20 @@ include_js: false </div> </div> - <div class="row"> + <div class="row g-5"> <div class="col-md-8"> <h3 class="pb-4 mb-4 fst-italic border-bottom"> من Firehose </h3> <article class="blog-post"> - <h2 class="blog-post-title mb-1">مثال على تدوينة</h2> + <h2 class="display-5 link-body-emphasis mb-1">مثال على تدوينة</h2> <p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p> <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p> <hr> <p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p> - <blockquote> + <blockquote class="blockquote"> <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p> </blockquote> <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p> @@ -126,7 +144,7 @@ include_js: false </article> <article class="blog-post"> - <h2 class="blog-post-title mb-1">تدوينة أخرى</h2> + <h2 class="display-5 link-body-emphasis mb-1">تدوينة أخرى</h2> <p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p> <p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p> @@ -138,7 +156,7 @@ include_js: false </article> <article class="blog-post"> - <h2 class="blog-post-title mb-1">ميزة جديدة</h2> + <h2 class="display-5 link-body-emphasis mb-1">ميزة جديدة</h2> <p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p> <p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p> @@ -161,11 +179,44 @@ include_js: false <div class="col-md-4"> <div class="position-sticky" style="top: 2rem;"> - <div class="p-4 mb-3 bg-light rounded"> + <div class="p-4 mb-3 bg-body-tertiary rounded"> <h4 class="fst-italic">حول</h4> <p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p> </div> + <div> + <h4 class="fst-italic">المشاركات الاخيرة</h4> + <ul class="list-unstyled"> + <li> + <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#"> + {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} + <div class="col-lg-8"> + <h6 class="mb-0">مثال على عنوان منشور المدونة</h6> + <small class="text-body-secondary">15 يناير 2023</small> + </div> + </a> + </li> + <li> + <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#"> + {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} + <div class="col-lg-8"> + <h6 class="mb-0">هذا عنوان آخر للمدونة</h6> + <small class="text-body-secondary">14 يناير 2023</small> + </div> + </a> + </li> + <li> + <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#"> + {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} + <div class="col-lg-8"> + <h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6> + <small class="text-body-secondary">13 يناير 2023</small> + </div> + </a> + </li> + </ul> + </div> + <div class="p-4"> <h4 class="fst-italic">الأرشيف</h4> <ol class="list-unstyled mb-0"> @@ -198,9 +249,9 @@ include_js: false </main> -<footer class="blog-footer"> +<footer class="py-5 text-center text-body-secondary bg-body-tertiary"> <p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p> - <p> + <p class="mb-0"> <a href="#">عد إلى الأعلى</a> </p> </footer> |