j1-template 2023.2.7 → 2023.3.1

data/lib/starter_web/pages/public/learn/bookshelf/jekyll_collections.adoc

@@ -16,7 +16,7 @@ image:
   alt:                                  Photo by Giammarco on Unsplash
 
 regenerate:                             false
-permalink:                              /pages/public/collections/jekyll_collections/
+permalink:                              /pages/public/learn/bookshelf/jekyll_collections/
 
 resources:                              [ animate ]
 resource_options:
@@ -39,6 +39,14 @@ resource_options:
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
 
 // Content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -62,33 +70,36 @@ image::{{page.image.name}}[{{page.title}}, width=1280]
 {% endif %}
 ////
 
-Source: https://ben.balter.com/2015/02/20/jekyll-collections/[Ben Balter: Jekyll Collections]
+Source: https://ben.balter.com/2015/02/20/jekyll-collections/[Ben Balter: Jekyll Collections, {browser-window--new}]
 
 Most Jekyll sites are organized around two types of content, posts (ordered)
 and pages (un-ordered).
 
-* *http://jekyllrb.com/docs/posts/[Posts]* are organized reverse
-chronologically. You might use them for blog posts on a personal blog,
-or articles on a news site. You can recognize a post by its filename.
-Posts live in the `&#x5F;posts` folder, and are always named in the form of
-`YYYY-MM-DD-post-title.md`. Because posts are dated, they're
-traditionally not updated regularly once published.
-
-* *http://jekyllrb.com/docs/pages/[Pages]* are documents that don't have
-a relationship with one another. They can live anywhere within the
-site's source directory and don't have a set naming pattern. If you have
-a personal blog, you might have an `index.html` page
-(https://ben.balter.com/[the site's main page which is used to list
-posts]), or https://ben.balter.com/about/[an about me page], to name two
-examples. Because pages aren't date specific, pages are often updated
-over time to maintain accuracy.
+* http://jekyllrb.com/docs/posts/[Posts, {browser-window--new}] are organized
+  reverse chronologically. You might use them for blog posts on a personal blog,
+  or articles on a news site. You can recognize a post by its filename.
+  Posts live in the `posts` folder, and are always named in the form of
+  `YYYY-MM-DD-post-title.md`. Because posts are dated, they're
+  traditionally not updated regularly once published.
+
+* http://jekyllrb.com/docs/pages/[Pages, {browser-window--new}] are documents
+  that don't have a relationship with one another. They can live anywhere within
+  the   site's source directory and don't have a set naming pattern. If you
+  have a personal blog, you might have an `index.html` page
+  (https://ben.balter.com/[the site's main page which is used to list
+  posts, {browser-window--new}]),
+  or
+  https://ben.balter.com/about/[an about me page, {browser-window--new}],
+  to name two examples. Because pages aren't date specific, pages are often
+  updated over time to maintain accuracy.
 
 The problem is, not everything you might want to publish using a Jekyll
 falls cleanly into the those two categories of content. As I noted in
 https://github.com/jekyll/jekyll/issues/1941[the original pitch], "If
 people are using blog posts for a non-blog post thing, Jekyll has
 already failed". That's where Jekyll's
-http://jekyllrb.com/docs/collections/[collections] come in.
+http://jekyllrb.com/docs/collections/[collections, {browser-window--new}]
+come in.
 
 
 == Not a post, a page - but a collection?
@@ -99,15 +110,15 @@ bring Jekyll's zen-like simplicity to all sorts of other types of content that
 aren't ordered as with posts (ordered by date), but have a set _relationship_
 with one another - hence the name: _collection_. If you're familiar with
 traditional CMS's, you can think of collections like
-http://codex.wordpress.org/Post_Types[WordPress custom post types] or
-https://www.drupal.org/node/774728[Drupal custom content types], except
-you do not need to program a specific class, learn any back-end
+http://codex.wordpress.org/Post_Types[WordPress custom post types, {browser-window--new}]]
+or https://www.drupal.org/node/774728[Drupal custom content types, {browser-window--new}]],
+except you do not need to program a specific class, learn any back-end
 languages, and the syntax used to specify them is very easily readable.
 
 What then, might you use collections for? Let's say you're making a
 website for a bakery and want to list the different cupcakes varieties
 you sell. You might use a collection called *cupcakes*. You'd create a
-`&#x5F;cupcakes` folder, and would add `chocolate.md` or `vanilla.md` to it.
+`cupcakes` folder, and would add `chocolate.md` or `vanilla.md` to it.
 And just like posts or pages, your list of cupcakes would be accessible
 as `site.cupcakes`.
 
@@ -119,12 +130,12 @@ one-another in the sense that they're all cupcakes.
 
 [NOTE]
 ====
-Collections are a very new feature to Jekyll, and according to the
-official documentation may be subject to change
-http://jekyllrb.com/docs/collections/[Jekyll Documentation on
-Collections]; but you should not let that put you off of using them,
-because Jekyll is open-source, which means you should trust the
-community to work-together for the best common-case solution.
+Collections are a very young feature to Jekyll, and according to the
+official documentation may be subject to change Jekyll Documentation on
+http://jekyllrb.com/docs/collections/[Collections, {browser-window--new}]],
+you should not let that put you off of using them, because Jekyll is
+open-source, which means you should trust the community to work-together
+for the best common-case solution.
 ====
 
 
@@ -133,7 +144,7 @@ community to work-together for the best common-case solution.
 But what if one day you decided to expand your offerings and sell
 cookies in addition to cupcakes. Simply introduce a "cookies"
 collection, adding `chocolate-chip.md` and `peanut-butter.md` to a
-`&#x5F;cookies` directory, exposing the cookies as `site.cookies`. You'll
+`cookies` directory, exposing the cookies as `site.cookies`. You'll
 notice the collections concept start to show its value here. Pages
 wouldn't make sense here, because you'd want to be able to list cupcakes
 and cookies separately, and besides for both being baked goods, the one
@@ -147,14 +158,14 @@ to display all products, with specific includes for `cupcakes` and
 `cookies`.
 
 Abstractly, because they're not outputted by default, you can think of
-collections somewhat like http://jekyllrb.com/docs/datafiles/[Jekyll's
-`&#x5F;data` folder support], but with the potential to generate content, and
-be placed into their own specific part of your Jekyll site, so a lot
-more robust. Like `&#x5F;data` files, they can support arbitrary key/values
-through frontmatter, but they also support a full content body (like
-posts and pages), and can be broken out into separate files. If I wanted
-to break out my bakery's hours, I might have a `&#x5F;data/hours.yml` file
-that looked something like this:
+collections somewhat like Jekyll's
+ http://jekyllrb.com/docs/datafiles/[data folder support, {browser-window--new}],
+but with the potential to generate content, and be placed into their own
+specific part of your Jekyll site, so a lot more robust. Like `data` files,
+they can support arbitrary key/values through frontmatter, but they also
+support a full content body (like posts and pages), and can be broken out
+into separate files. If I wanted to break out my bakery's hours, I might
+have a `data/hours.yml` file that looked something like this:
 
 [source,yaml]
 ----
@@ -175,14 +186,15 @@ data and a plugin to turn it into pages; using collections allows the
 site owner to focus on the content.
 
 For a more concrete example, take a look at
-https://github.com/github/choosealicense.com[the source] for
-http://choosealicense.com[choosealicense.com] a site which helps explain
-OpenSource licenses like the MIT or GPL license. There are pages like
-"about" and "terms of service", but the actual licenses live in
-https://github.com/github/choosealicense.com/tree/gh-pages/&#x5F;licenses[a
-licenses collection] and are displayed via
-https://github.com/github/choosealicense.com/blob/gh-pages/licenses.html[a
-licensed page].
+https://github.com/github/choosealicense.com[the source, {browser-window--new}]
+for
+http://choosealicense.com[choosealicense.com, {browser-window--new}]
+a site which helps explain OpenSource licenses like the MIT or GPL license.
+There are pages like *about* and *terms of service*, but the actual licenses
+live in
+https://github.com/github/choosealicense.com/tree/gh-pages/licenses[a licenses collection, {browser-window--new}]
+and are displayed via
+https://github.com/github/choosealicense.com/blob/gh-pages/licenses.html[a licensed page, {browser-window--new}].
 
 === Other use-cases
 
@@ -197,7 +209,7 @@ your site.
 
 The examples above were a slight simplification. There's one other step.
 Before you can use a collection, you need to tell Jekyll about it. Going
-back to our bakery example above, I might have a `&#x5F;config.yml` file that
+back to our bakery example above, I might have a `config.yml` file that
 looks something like this:
 
 [source,yaml]
@@ -207,16 +219,16 @@ collections:
   - cookies
 ----
 
-This tells Jekyll to look in the `&#x5F;cupcakes` and `&#x5F;cookies` folders
+This tells Jekyll to look in the `cupcakes` and `cookies` folders
 for documents, and to read them into the appropriate collection, including
-http://jekyllrb.com/docs/frontmatter/[YAML front matter], just as it
-would posts (but again, without the date, because collection documents
-aren't date specific).
+http://jekyllrb.com/docs/frontmatter/[YAML front matter, {browser-window--new}],
+just as it would posts (but again, without the date, because collection
+documents aren't date specific).
 
 By default, collections are read in (and exposed as `site.[collection]`,
 an alias per-collection), but not included in the final site; at least
 not individually like you might expect posts or pages to. If you wanted
-a page for each type of cupcake, you'd have to modify the `&#x5F;config.yml`
+a page for each type of cupcake, you'd have to modify the `config.yml`
 a bit:
 
 [source,yaml]
@@ -227,12 +239,11 @@ collections:
     permalink: /cupcakes/:path/
 ----
 
-That way, `&#x5F;cupcakes/chocolate.md` is outputted as
-`cupcakes/chocolate/index.html` when the site is built and would be
-accessible as `example.com/cupcakes/chocolate/`. The other advantage,
-is, because the data is now structured and machine readable (rather than
-in plain text), you could also use the `jsonify` filter to output that
-same information as an API for use elsewhere.
+That way, `cupcakes/chocolate.md` is outputted as `cupcakes/chocolate/index.html`
+when the site is built and would be accessible as `example.com/cupcakes/chocolate/`.
+The other advantage, is, because the data is now structured and machine readable
+(rather than in plain text), you could also use the `jsonify` filter to output
+that same information as an API for use elsewhere.
 
 
 === When to use a post, a page, or a collection
@@ -266,24 +277,23 @@ group of "things" that can be logically grouped by a common theme
 (that's not their date). Here's a few examples:
 
 * Listing employees on your company's "about" page (or a project's
-maintainers)
+  maintainers)
 * Documenting methods in an OpenSource project (or the project's that
-use it, or the plugins available)
+  use it, or the plugins available)
 * Organizing jobs on your résumé (or talks given, papers written)
-* https://github.com/blog/1939-how-github-uses-github-to-document-GitHub[Articles
-on a support site]
+* https://github.com/blog/1939-how-github-uses-github-to-document-GitHub[Articles on a support site, {browser-window--new}]
 * Recipes on your personal blog (or restaurant reviews, or dishes on a
-menu)
+  menu)
 * Students in a class (or courses being offered, or listing the faculty)
 * Cheats, tips, tricks and walkthroughs for games (by platform)
 * Creating re-usable content snippets for your site such as
-testimonials, forms, sentences, buzz-words or call-outs
+  testimonials, forms, sentences, buzz-words or call-outs
 * And honestly just about anything else
 
 Collections are a powerful (and often misunderstood) Jekyll feature, but
 hopefully you've now got an idea or two for your next Jekyll project. Of
 course, if you're looking to dig in to collections, be sure to check out
-http://jekyllrb.com/docs/collections/[the formal documentation] for a
-much more in-depth explanation.
+http://jekyllrb.com/docs/collections/[the formal documentation, {browser-window--new}]
+for a much more in-depth explanation.
 
 Happy Jekylling!

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/attributes.asciidoc

@@ -0,0 +1,58 @@
+// ~/document_base_folder/000_includes
+//  Asciidoc attribute includes:                 attributes.asciidoc
+// -----------------------------------------------------------------------------
+
+// URLs - Internal references and/or sources on the Internet
+// -----------------------------------------------------------------------------
+tag::urls[]
+
+:url-j1--home:                                    https://jekyll.one/
+
+end::urls[]
+
+
+// FOOTNOTES, global asciidoc attributes (variables)
+// -----------------------------------------------------------------------------
+tag::footnotes[]
+end::footnotes[]
+
+
+// Tags - Asciidoc attributes used internally
+// -----------------------------------------------------------------------------
+tag::tags[]
+end::tags[]
+
+
+// Data - Data elements for Asciidoctor extensions
+// -----------------------------------------------------------------------------
+tag::data[]
+
+:data-image--core_web_vitals_best:               "pages/core_web_vitals/core_web_vitals_best.jpg, Best values for performance (Lighthouse)"
+
+end::data[]
+
+
+// Images - Images from local include/images folder
+// -----------------------------------------------------------------------------
+tag::images[]
+end::images[]
+
+
+// PRODUCTS, local product information (e.g. release)
+// -----------------------------------------------------------------------------
+tag::products
+
+:license:                                         e.g. Apache License, Version 2.0
+:revdate:                                         e.g. 2018
+:revnumber:                                       e.g. 1.2.3
+
+end::products[]
+
+
+// AUTHORS, local author information (e.g. article)
+// -----------------------------------------------------------------------------
+tag::authors[]
+
+:uri-author-xxx:                                  https://xxx
+
+end::authors[]

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/accordion.asciidoc

@@ -0,0 +1,34 @@
+[source, sass]
+----
+$accordion-padding-y:                   1rem !default;
+$accordion-padding-x:                   1.25rem !default;
+$accordion-color:                       var(--#{$prefix}body-color) !default;
+$accordion-bg:                          var(--#{$prefix}body-bg) !default;
+$accordion-border-width:                var(--#{$prefix}border-width) !default;
+$accordion-border-color:                var(--#{$prefix}border-color) !default;
+$accordion-border-radius:               var(--#{$prefix}border-radius) !default;
+$accordion-inner-border-radius:         subtract($accordion-border-radius, $accordion-border-width) !default;
+
+$accordion-body-padding-y:              $accordion-padding-y !default;
+$accordion-body-padding-x:              $accordion-padding-x !default;
+
+$accordion-button-padding-y:            $accordion-padding-y !default;
+$accordion-button-padding-x:            $accordion-padding-x !default;
+$accordion-button-color:                var(--#{$prefix}body-color) !default;
+$accordion-button-bg:                   var(--#{$prefix}accordion-bg) !default;
+$accordion-transition:                  $btn-transition, border-radius .15s ease !default;
+$accordion-button-active-bg:            var(--#{$prefix}primary-bg-subtle) !default;
+$accordion-button-active-color:         var(--#{$prefix}primary-text-emphasis) !default;
+
+$accordion-button-focus-border-color:   $input-focus-border-color !default;
+$accordion-button-focus-box-shadow:     $btn-focus-box-shadow !default;
+
+$accordion-icon-width:                  1.25rem !default;
+$accordion-icon-color:                  $body-color !default;
+$accordion-icon-active-color:           $primary-text-emphasis !default;
+$accordion-icon-transition:             transform .2s ease-in-out !default;
+$accordion-icon-transform:              rotate(-180deg) !default;
+
+$accordion-button-icon:                 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/alerts.asciidoc

@@ -0,0 +1,15 @@
+[source, sass]
+----
+$alert-padding-y:                       $spacer !default;
+$alert-padding-x:                       $spacer !default;
+$alert-margin-bottom:                   1rem !default;
+$alert-border-radius:                   var(--#{$prefix}border-radius) !default;
+$alert-link-font-weight:                $font-weight-bold !default;
+$alert-border-width:                    var(--#{$prefix}border-width) !default;
+$alert-dismissible-padding-r:           $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
+
+// Deprecated in v5.2.0, to be removed in v6
+$alert-bg-scale:                        -80% !default;
+$alert-border-scale:                    -70% !default;
+$alert-color-scale:                     40% !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/badges.asciidoc

@@ -0,0 +1,9 @@
+[source, sass]
+----
+$badge-font-size:                       .75em !default;
+$badge-font-weight:                     $font-weight-bold !default;
+$badge-color:                           $white !default;
+$badge-padding-y:                       .35em !default;
+$badge-padding-x:                       .65em !default;
+$badge-border-radius:                   var(--#{$prefix}border-radius) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/body.asciidoc

@@ -0,0 +1,14 @@
+[source, sass]
+----
+$body-text-align:                       null !default;
+$body-color:                            $gray-900 !default;
+$body-bg:                               $white !default;
+
+$body-secondary-color:                  rgba($body-color, .75) !default;
+$body-secondary-bg:                     $gray-200 !default;
+
+$body-tertiary-color:                   rgba($body-color, .5) !default;
+$body-tertiary-bg:                      $gray-100 !default;
+
+$body-emphasis-color:                   $black !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/breadcrumbs.asciidoc

@@ -0,0 +1,14 @@
+[source, sass]
+----
+$breadcrumb-font-size:                  null !default;
+$breadcrumb-padding-y:                  0 !default;
+$breadcrumb-padding-x:                  0 !default;
+$breadcrumb-item-padding-x:             .5rem !default;
+$breadcrumb-margin-bottom:              1rem !default;
+$breadcrumb-bg:                         null !default;
+$breadcrumb-divider-color:              var(--#{$prefix}secondary-color) !default;
+$breadcrumb-active-color:               var(--#{$prefix}secondary-color) !default;
+$breadcrumb-divider:                    quote("/") !default;
+$breadcrumb-divider-flipped:            $breadcrumb-divider !default;
+$breadcrumb-border-radius:              null !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/buttons.asciidoc

@@ -0,0 +1,75 @@
+[source, sass]
+----
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+//
+
+$input-btn-padding-y:                   .375rem !default;
+$input-btn-padding-x:                   .75rem !default;
+$input-btn-font-family:                 null !default;
+$input-btn-font-size:                   $font-size-base !default;
+$input-btn-line-height:                 $line-height-base !default;
+
+$input-btn-focus-width:                 $focus-ring-width !default;
+$input-btn-focus-color-opacity:         $focus-ring-opacity !default;
+$input-btn-focus-color:                 $focus-ring-color !default;
+$input-btn-focus-blur:                  $focus-ring-blur !default;
+$input-btn-focus-box-shadow:            $focus-ring-box-shadow !default;
+
+$input-btn-padding-y-sm:                .25rem !default;
+$input-btn-padding-x-sm:                .5rem !default;
+$input-btn-font-size-sm:                $font-size-sm !default;
+
+$input-btn-padding-y-lg:                .5rem !default;
+$input-btn-padding-x-lg:                1rem !default;
+$input-btn-font-size-lg:                $font-size-lg !default;
+
+$input-btn-border-width:                var(--#{$prefix}border-width) !default;
+
+// For each of Bootstrap's buttons, define text, background, and border color.
+//
+$btn-color:                             var(--#{$prefix}body-color) !default;
+$btn-padding-y:                         $input-btn-padding-y !default;
+$btn-padding-x:                         $input-btn-padding-x !default;
+$btn-font-family:                       $input-btn-font-family !default;
+$btn-font-size:                         $input-btn-font-size !default;
+$btn-line-height:                       $input-btn-line-height !default;
+$btn-white-space:                       null !default;                          // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm:                      $input-btn-padding-y-sm !default;
+$btn-padding-x-sm:                      $input-btn-padding-x-sm !default;
+$btn-font-size-sm:                      $input-btn-font-size-sm !default;
+
+$btn-padding-y-lg:                      $input-btn-padding-y-lg !default;
+$btn-padding-x-lg:                      $input-btn-padding-x-lg !default;
+$btn-font-size-lg:                      $input-btn-font-size-lg !default;
+
+$btn-border-width:                      $input-btn-border-width !default;
+
+$btn-font-weight:                       $font-weight-normal !default;
+$btn-box-shadow:                        inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width:                       $input-btn-focus-width !default;
+$btn-focus-box-shadow:                  $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity:                  .65 !default;
+$btn-active-box-shadow:                 inset 0 3px 5px rgba($black, .125) !default;
+
+$btn-link-color:                        var(--#{$prefix}link-color) !default;
+$btn-link-hover-color:                  var(--#{$prefix}link-hover-color) !default;
+$btn-link-disabled-color:               $gray-600 !default;
+
+// Allows for customizing button radius independently from global border radius
+//
+$btn-border-radius:                     var(--#{$prefix}border-radius) !default;
+$btn-border-radius-sm:                  var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg:                  var(--#{$prefix}border-radius-lg) !default;
+
+$btn-transition:                        color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$btn-hover-bg-shade-amount:             15% !default;
+$btn-hover-bg-tint-amount:              15% !default;
+$btn-hover-border-shade-amount:         20% !default;
+$btn-hover-border-tint-amount:          10% !default;
+$btn-active-bg-shade-amount:            20% !default;
+$btn-active-bg-tint-amount:             20% !default;
+$btn-active-border-shade-amount:        25% !default;
+$btn-active-border-tint-amount:         10% !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/cards.asciidoc

@@ -0,0 +1,22 @@
+[source, sass]
+----
+$card-spacer-y:                         $spacer !default;
+$card-spacer-x:                         $spacer !default;
+$card-title-spacer-y:                   $spacer * .5 !default;
+$card-title-color:                      null !default;
+$card-subtitle-color:                   null !default;
+$card-border-width:                     var(--#{$prefix}border-width) !default;
+$card-border-color:                     var(--#{$prefix}border-color-translucent) !default;
+$card-border-radius:                    var(--#{$prefix}border-radius) !default;
+$card-box-shadow:                       null !default;
+$card-inner-border-radius:              subtract($card-border-radius, $card-border-width) !default;
+$card-cap-padding-y:                    $card-spacer-y * .5 !default;
+$card-cap-padding-x:                    $card-spacer-x !default;
+$card-cap-bg:                           rgba(var(--#{$prefix}body-color-rgb), .03) !default;
+$card-cap-color:                        null !default;
+$card-height:                           null !default;
+$card-color:                            null !default;
+$card-bg:                               var(--#{$prefix}body-bg) !default;
+$card-img-overlay-padding:              $spacer !default;
+$card-group-margin:                     $grid-gutter-width * .5 !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/carousel.asciidoc

@@ -0,0 +1,37 @@
+[source, sass]
+----
+$carousel-control-color:                $white !default;
+$carousel-control-width:                15% !default;
+$carousel-control-opacity:              .5 !default;
+$carousel-control-hover-opacity:        .9 !default;
+$carousel-control-transition:           opacity .15s ease !default;
+
+$carousel-indicator-width:              30px !default;
+$carousel-indicator-height:             3px !default;
+$carousel-indicator-hit-area-height:    10px !default;
+$carousel-indicator-spacer:             3px !default;
+$carousel-indicator-opacity:            .5 !default;
+$carousel-indicator-active-bg:          $white !default;
+$carousel-indicator-active-opacity:     1 !default;
+$carousel-indicator-transition:         opacity .6s ease !default;
+
+$carousel-caption-width:                70% !default;
+$carousel-caption-color:                $white !default;
+$carousel-caption-padding-y:            1.25rem !default;
+$carousel-caption-spacer:               1.25rem !default;
+
+$carousel-control-icon-width:           2rem !default;
+
+$carousel-control-prev-icon-bg:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
+$carousel-control-next-icon-bg:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path 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'/></svg>") !default;
+
+$carousel-transition-duration:          .6s !default;
+$carousel-transition:                   transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+
+
+// carousel-dark-variables
+//
+$carousel-dark-indicator-active-bg:     $black !default;
+$carousel-dark-caption-color:           $black !default;
+$carousel-dark-control-icon-filter:     invert(1) grayscale(100) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/close.asciidoc

@@ -0,0 +1,15 @@
+[source, sass]
+----
+$btn-close-width:                       1em !default;
+$btn-close-height:                      $btn-close-width !default;
+$btn-close-padding-x:                   .25em !default;
+$btn-close-padding-y:                   $btn-close-padding-x !default;
+$btn-close-color:                       $black !default;
+$btn-close-bg:                          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
+$btn-close-focus-shadow:                $focus-ring-box-shadow !default;
+$btn-close-opacity:                     .5 !default;
+$btn-close-hover-opacity:               .75 !default;
+$btn-close-focus-opacity:               1 !default;
+$btn-close-disabled-opacity:            .25 !default;
+$btn-close-white-filter:                invert(1) grayscale(100%) brightness(200%) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/code.asciidoc

@@ -0,0 +1,14 @@
+[source, sass]
+----
+$code-font-size:                        $small-font-size !default;
+$code-color:                            $pink !default;
+
+$kbd-padding-y:                         .1875rem !default;
+$kbd-padding-x:                         .375rem !default;
+$kbd-font-size:                         $code-font-size !default;
+$kbd-color:                             var(--#{$prefix}body-bg) !default;
+$kbd-bg:                                var(--#{$prefix}body-color) !default;
+$nested-kbd-font-weight:                null !default; // Deprecated in v5.2.0, removing in v6
+
+$pre-color:                             null !default;
+----