diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/examples/blog/index.html (renamed from site/content/docs/5.2/examples/blog/index.html) | 115 |
1 files changed, 83 insertions, 32 deletions
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> |