summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.3/examples/blog
diff options
context:
space:
mode:
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
-rw-r--r--site/content/docs/5.3/examples/blog/blog.css (renamed from site/content/docs/5.2/examples/blog/blog.css)32
-rw-r--r--site/content/docs/5.3/examples/blog/blog.rtl.css (renamed from site/content/docs/5.2/examples/blog/blog.rtl.css)32
-rw-r--r--site/content/docs/5.3/examples/blog/index.html (renamed from site/content/docs/5.2/examples/blog/index.html)115
4 files changed, 170 insertions, 128 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>
diff --git a/site/content/docs/5.2/examples/blog/blog.css b/site/content/docs/5.3/examples/blog/blog.css
index cc5fc74..ddbca5a 100644
--- a/site/content/docs/5.2/examples/blog/blog.css
+++ b/site/content/docs/5.3/examples/blog/blog.css
@@ -1,8 +1,4 @@
-/* stylelint-disable selector-list-comma-newline-after */
-
-.blog-header {
- border-bottom: 1px solid #e5e5e5;
-}
+/* stylelint-disable stylistic/selector-list-comma-newline-after */
.blog-header-logo {
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
@@ -17,15 +13,6 @@ h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
}
-.display-4 {
- font-size: 2.5rem;
-}
-@media (min-width: 768px) {
- .display-4 {
- font-size: 3rem;
- }
-}
-
.flex-auto {
flex: 0 0 auto;
}
@@ -46,24 +33,7 @@ h1, h2, h3, h4, h5, h6 {
.blog-post {
margin-bottom: 4rem;
}
-.blog-post-title {
- font-size: 2.5rem;
-}
.blog-post-meta {
margin-bottom: 1.25rem;
color: #727272;
}
-
-/*
- * Footer
- */
-.blog-footer {
- padding: 2.5rem 0;
- color: #727272;
- text-align: center;
- background-color: #f9f9f9;
- border-top: .05rem solid #e5e5e5;
-}
-.blog-footer p:last-child {
- margin-bottom: 0;
-}
diff --git a/site/content/docs/5.2/examples/blog/blog.rtl.css b/site/content/docs/5.3/examples/blog/blog.rtl.css
index fc03c35..043d4e6 100644
--- a/site/content/docs/5.2/examples/blog/blog.rtl.css
+++ b/site/content/docs/5.3/examples/blog/blog.rtl.css
@@ -1,8 +1,4 @@
-/* stylelint-disable selector-list-comma-newline-after */
-
-.blog-header {
- border-bottom: 1px solid #e5e5e5;
-}
+/* stylelint-disable stylistic/selector-list-comma-newline-after */
.blog-header-logo {
font-family: Amiri, Georgia, "Times New Roman", serif;
@@ -17,15 +13,6 @@ h1, h2, h3, h4, h5, h6 {
font-family: Amiri, Georgia, "Times New Roman", serif;
}
-.display-4 {
- font-size: 2.5rem;
-}
-@media (min-width: 768px) {
- .display-4 {
- font-size: 3rem;
- }
-}
-
.flex-auto {
flex: 0 0 auto;
}
@@ -46,24 +33,7 @@ h1, h2, h3, h4, h5, h6 {
.blog-post {
margin-bottom: 4rem;
}
-.blog-post-title {
- font-size: 2.5rem;
-}
.blog-post-meta {
margin-bottom: 1.25rem;
color: #727272;
}
-
-/*
- * Footer
- */
-.blog-footer {
- padding: 2.5rem 0;
- color: #727272;
- text-align: center;
- background-color: #f9f9f9;
- border-top: .05rem solid #e5e5e5;
-}
-.blog-footer p:last-child {
- margin-bottom: 0;
-}
diff --git a/site/content/docs/5.2/examples/blog/index.html b/site/content/docs/5.3/examples/blog/index.html
index 6b60ea0..d0d6f08 100644
--- a/site/content/docs/5.2/examples/blog/index.html
+++ b/site/content/docs/5.3/examples/blog/index.html
@@ -4,17 +4,29 @@ title: Blog Template
extra_css:
- "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
- "blog.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="#">Subscribe</a>
</div>
<div class="col-4 text-center">
- <a class="blog-header-logo text-dark" href="#">Large</a>
+ <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="link-secondary" href="#" aria-label="Search">
@@ -25,30 +37,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="#">World</a>
- <a class="p-2 link-secondary" href="#">U.S.</a>
- <a class="p-2 link-secondary" href="#">Technology</a>
- <a class="p-2 link-secondary" href="#">Design</a>
- <a class="p-2 link-secondary" href="#">Culture</a>
- <a class="p-2 link-secondary" href="#">Business</a>
- <a class="p-2 link-secondary" href="#">Politics</a>
- <a class="p-2 link-secondary" href="#">Opinion</a>
- <a class="p-2 link-secondary" href="#">Science</a>
- <a class="p-2 link-secondary" href="#">Health</a>
- <a class="p-2 link-secondary" href="#">Style</a>
- <a class="p-2 link-secondary" href="#">Travel</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="#">World</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">U.S.</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Technology</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Design</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Culture</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Business</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Politics</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Opinion</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Science</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Health</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Style</a>
+ <a class="nav-item nav-link link-body-emphasis" href="#">Travel</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">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
- <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
+ <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">Continue reading...</a></p>
</div>
</div>
@@ -56,11 +68,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">World</strong>
+ <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
<h3 class="mb-0">Featured post</h3>
- <div class="mb-1 text-muted">Nov 12</div>
+ <div class="mb-1 text-body-secondary">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="stretched-link">Continue reading</a>
+ <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
+ Continue reading
+ <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="Thumbnail" >}}
@@ -70,11 +85,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">Design</strong>
+ <strong class="d-inline-block mb-2 text-success-emphasis">Design</strong>
<h3 class="mb-0">Post title</h3>
- <div class="mb-1 text-muted">Nov 11</div>
+ <div class="mb-1 text-body-secondary">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
- <a href="#" class="stretched-link">Continue reading</a>
+ <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
+ Continue reading
+ <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="Thumbnail" >}}
@@ -90,7 +108,7 @@ include_js: false
</h3>
<article class="blog-post">
- <h2 class="blog-post-title mb-1">Sample blog post</h2>
+ <h2 class="display-5 link-body-emphasis mb-1">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
@@ -144,7 +162,7 @@ include_js: false
</article>
<article class="blog-post">
- <h2 class="blog-post-title mb-1">Another blog post</h2>
+ <h2 class="display-5 link-body-emphasis mb-1">Another blog post</h2>
<p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -192,7 +210,7 @@ include_js: false
</article>
<article class="blog-post">
- <h2 class="blog-post-title mb-1">New feature</h2>
+ <h2 class="display-5 link-body-emphasis mb-1">New feature</h2>
<p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -213,11 +231,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">About</h4>
<p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
</div>
+ <div>
+ <h4 class="fst-italic">Recent posts</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">Example blog post title</h6>
+ <small class="text-body-secondary">January 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">This is another blog post title</h6>
+ <small class="text-body-secondary">January 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">Longer blog post title: This one has multiple lines!</h6>
+ <small class="text-body-secondary">January 13, 2023</small>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </div>
+
<div class="p-4">
<h4 class="fst-italic">Archives</h4>
<ol class="list-unstyled mb-0">
@@ -250,9 +301,9 @@ include_js: false
</main>
-<footer class="blog-footer">
+<footer class="py-5 text-center text-body-secondary bg-body-tertiary">
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
- <p>
+ <p class="mb-0">
<a href="#">Back to top</a>
</p>
</footer>
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-23 14:32:54 +0000