jekyll-theme-centos 0.0.0 → 0.1.0

data/_includes/centos-styleguide.md

@@ -0,0 +1,243 @@
+## Headings
+
+### Heading three
+
+```markdown
+### Heading three
+```
+
+#### Heading four
+
+```markdown
+#### Heading four
+```
+
+##### Heading five
+
+```markdown
+##### Heading five
+```
+
+###### Heading six
+
+```markdown
+###### Heading six
+```
+
+## Paragraphs
+
+Incididunt ex adipisicing ea ullamco consectetur in voluptate proident fugiat tempor deserunt reprehenderit ullamco id dolore laborum. Do laboris laboris minim incididunt qui consectetur exercitation adipisicing dolore et magna consequat magna anim sunt. Officia fugiat Lorem sunt pariatur incididunt Lorem reprehenderit proident irure. Dolore ipsum aliqua mollit ad officia fugiat sit eu aliquip cupidatat ipsum duis laborum laborum fugiat esse. Voluptate anim ex dolore deserunt ea ex eiusmod irure. Occaecat excepteur aliqua exercitation aliquip dolor esse eu eu.
+
+Officia dolore laborum aute incididunt commodo nisi velit est est elit et dolore elit exercitation. Enim aliquip magna id ipsum aliquip consectetur ad nulla quis. Incididunt pariatur dolor consectetur cillum enim velit cupidatat laborum quis ex.
+
+Officia irure in non voluptate adipisicing sit amet tempor duis dolore deserunt enim ut. Reprehenderit incididunt in ad anim et deserunt deserunt Lorem laborum quis. Enim aute anim labore proident laboris voluptate elit excepteur in. Ex labore nulla velit officia ullamco Lorem Lorem id do. Dolore ullamco ipsum magna dolor pariatur voluptate ipsum id occaecat ipsum. Dolore tempor quis duis commodo quis quis enim.
+
+```markdown
+Incididunt ex adipisicing ea ullamco consectetur in voluptate proident fugiat tempor deserunt reprehenderit ullamco id dolore laborum. Do laboris laboris minim incididunt qui consectetur exercitation adipisicing dolore et magna consequat magna anim sunt. Officia fugiat Lorem sunt pariatur incididunt Lorem reprehenderit proident irure. Dolore ipsum aliqua mollit ad officia fugiat sit eu aliquip cupidatat ipsum duis laborum laborum fugiat esse. Voluptate anim ex dolore deserunt ea ex eiusmod irure. Occaecat excepteur aliqua exercitation aliquip dolor esse eu eu.
+
+Officia dolore laborum aute incididunt commodo nisi velit est est elit et dolore elit exercitation. Enim aliquip magna id ipsum aliquip consectetur ad nulla quis. Incididunt pariatur dolor consectetur cillum enim velit cupidatat laborum quis ex.
+
+Officia irure in non voluptate adipisicing sit amet tempor duis dolore deserunt enim ut. Reprehenderit incididunt in ad anim et deserunt deserunt Lorem laborum quis. Enim aute anim labore proident laboris voluptate elit excepteur in. Ex labore nulla velit officia ullamco Lorem Lorem id do. Dolore ullamco ipsum magna dolor pariatur voluptate ipsum id occaecat ipsum. Dolore tempor quis duis commodo quis quis enim.
+```
+
+## Emphasis
+
+__This is bold text__
+
+```markdown
+__This is bold text__
+```
+
+_This is italic text_
+
+```markdown
+_This is italic text_
+```
+
+~~Strikethrough~~
+
+```markdown
+~~Strikethrough~~
+```
+
+## Ordered List
+
+1. Longan
+2. Lychee
+3. Excepteur ad cupidatat do elit laborum amet cillum reprehenderit consequat quis.
+    Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip aliquip velit pariatur dolore.
+4. Marionberry
+5. Melon
+    - Cantaloupe
+    - Honeydew
+    - Watermelon
+6. Miracle fruit
+7. Mulberry
+
+```markdown
+1. Longan
+2. Lychee
+3. Excepteur ad cupidatat do elit laborum amet cillum reprehenderit consequat quis.
+    Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip aliquip velit pariatur dolore.
+4. Marionberry
+5. Melon
+    - Cantaloupe
+    - Honeydew
+    - Watermelon
+6. Miracle fruit
+7. Mulberry
+```
+
+## Unordered List
+
+- Olive
+- Orange
+    - Blood orange
+    - Clementine
+- Papaya
+- Ut aute ipsum occaecat nisi culpa Lorem id occaecat cupidatat id id magna laboris ad duis. Fugiat cillum dolore veniam nostrud proident sint consectetur eiusmod irure adipisicing.
+- Passionfruit
+
+```markdown
+- Olive
+- Orange
+    - Blood orange
+    - Clementine
+- Papaya
+- Ut aute ipsum occaecat nisi culpa Lorem id occaecat cupidatat id id magna laboris ad duis. Fugiat cillum dolore veniam nostrud proident sint consectetur eiusmod irure adipisicing.
+- Passionfruit
+```
+
+## Tables
+
+| Table Heading 1 | Table Heading 2 | Center align    | Right align     | Table Heading 5 |
+| :-------------- | :-------------- | :-------------: | --------------: | :-------------- |
+| Item 1          | Item 2          | Item 3          | Item 4          | Item 5          |
+| Item 1          | Item 2          | Item 3          | Item 4          | Item 5          |
+| Item 1          | Item 2          | Item 3          | Item 4          | Item 5          |
+| Item 1          | Item 2          | Item 3          | Item 4          | Item 5          |
+| Item 1          | Item 2          | Item 3          | Item 4          | Item 5          |
+
+```markdown
+| Table Heading 1 | Table Heading 2 | Center align    | Right align     | Table Heading 5 |
+| :-------------- | :-------------- | :-------------: | --------------: | :-------------- |
+| Item 1          | Item 2          | Item 3          | Item 4          | Item 5          |
+| Item 1          | Item 2          | Item 3          | Item 4          | Item 5          |
+| Item 1          | Item 2          | Item 3          | Item 4          | Item 5          |
+| Item 1          | Item 2          | Item 3          | Item 4          | Item 5          |
+| Item 1          | Item 2          | Item 3          | Item 4          | Item 5          |
+```
+
+## Inline code
+
+Ad amet irure est magna id mollit Lorem in do duis enim. Excepteur velit nisi magna ea pariatur pariatur ullamco fugiat deserunt sint non sint. Duis duis est `code in text` velit velit aute culpa ex quis pariatur pariatur laborum aute pariatur duis tempor sunt ad. Irure magna voluptate dolore consectetur consectetur irure esse. Anim magna `<strong>in culpa qui officia</strong>` dolor eiusmod esse amet aute cupidatat aliqua do id voluptate cupidatat reprehenderit amet labore deserunt.
+
+## Code
+
+```python
+# Program to display the Fibonacci sequence up to n-th term
+
+nterms = int(input("How many terms? "))
+
+# first two terms
+n1, n2 = 0, 1
+count = 0
+
+# check if the number of terms is valid
+if nterms <= 0:
+   print("Please enter a positive integer")
+elif nterms == 1:
+   print("Fibonacci sequence upto",nterms,":")
+   print(n1)
+else:
+   print("Fibonacci sequence:")
+   while count < nterms:
+       print(n1)
+       nth = n1 + n2
+       # update values
+       n1 = n2
+       n2 = nth
+       count += 1
+```
+
+<pre>
+```python
+# Program to display the Fibonacci sequence up to n-th term
+
+nterms = int(input("How many terms? "))
+
+# first two terms
+n1, n2 = 0, 1
+count = 0
+
+# check if the number of terms is valid
+if nterms <= 0:
+   print("Please enter a positive integer")
+elif nterms == 1:
+   print("Fibonacci sequence upto",nterms,":")
+   print(n1)
+else:
+   print("Fibonacci sequence:")
+   while count < nterms:
+       print(n1)
+       nth = n1 + n2
+       # update values
+       n1 = n2
+       n2 = nth
+       count += 1
+```
+</pre>
+
+Supported languanges can be found at <https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers>.
+
+## Images
+
+{% include centos-content/figure.html src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/003e1649-1298-4774-a5fe-0cbc297194f1/de947wq-3400547c-c4ad-49f6-b200-62b60140b2c8.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMDAzZTE2NDktMTI5OC00Nzc0LWE1ZmUtMGNiYzI5NzE5NGYxXC9kZTk0N3dxLTM0MDA1NDdjLWM0YWQtNDlmNi1iMjAwLTYyYjYwMTQwYjJjOC5qcGcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ._xzy8oWpfHlCjtcCj0RFP66I7ivHH0-T3hjREODl0vA" alt="Landscape sketching by Philipp Urlich" caption="Landscape sketching by Philipp Urlich" %}
+
+```markdown
+{% raw %}{% include centos-content/figure.html src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/003e1649-1298-4774-a5fe-0cbc297194f1/de947wq-3400547c-c4ad-49f6-b200-62b60140b2c8.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMDAzZTE2NDktMTI5OC00Nzc0LWE1ZmUtMGNiYzI5NzE5NGYxXC9kZTk0N3dxLTM0MDA1NDdjLWM0YWQtNDlmNi1iMjAwLTYyYjYwMTQwYjJjOC5qcGcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ._xzy8oWpfHlCjtcCj0RFP66I7ivHH0-T3hjREODl0vA" alt="Landscape sketching by Philipp Urlich" caption="Landscape sketching by Philipp Urlich" %}{% endraw %}
+```
+
+## Videos
+
+{% include centos-content/video.html src="https://www.youtube.com/embed/WhWc3b3KhnY" %}
+
+```markdown
+{% raw %}{% include centos-content/video.html src="https://www.youtube.com/embed/WhWc3b3KhnY" %}{% endraw %}
+```
+
+## Blockquotes
+
+> Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.
+>> Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.
+>>> Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.
+>>>> Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.
+
+```markdown
+> Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.
+>> Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.
+>>> Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.
+>>>> Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut.
+```
+
+## Admonitions
+
+{% include centos-content/admonition/note.html content="Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut." %}
+```markdown
+{% raw %}{% include centos-content/admonition/note.html content="Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut." %}{% endraw %}
+```
+
+{% include centos-content/admonition/warning.html content="Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut." %}
+```markdown
+{% raw %}{% include centos-content/admonition/warning.html content="Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut." %}{% endraw %}
+```
+
+{% include centos-content/admonition/caution.html content="Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut." %}
+```markdown
+{% raw %}{% include centos-content/admonition/caution.html content="Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut." %}{% endraw %}
+```
+
+{% include centos-content/admonition/idea.html content="Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut." %}
+```markdown
+{% raw %}{% include centos-content/admonition/idea.html content="Ipsum et cupidatat mollit exercitation enim duis sunt irure aliqua reprehenderit mollit. Pariatur Lorem pariatur laboris do culpa do elit irure. Eiusmod amet nulla voluptate velit culpa et aliqua ad reprehenderit sit ut." %}{% endraw %}
+```

data/_layouts/centos-content/1col.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+
+<main class="centos-content-1col">
+  <div class="row">
+  {% include centos-content/1col.html %}
+  </div>
+</main>

data/_layouts/centos-content/2col.html

@@ -0,0 +1,9 @@
+---
+layout: default
+---
+
+<main class="centos-content-2col">
+  <div class="row">
+      {% include centos-content/2col.html %}
+  </div>
+</main>

data/_layouts/centos-content/download-mirror.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: 'en' }}">
+
+{% include centos-head.html %}
+
+<body>
+
+  {% include centos-nav.html -%}
+  {% include centos-header.html -%}
+
+  <main class="centos-content container">
+    <div class="row">
+      {% include centos-content/1col.html %}
+    </div>
+  </main>
+
+  {% include centos-footer.html -%}
+
+  <script src="/assets/js/jquery.min.js"></script>
+  <script src="/assets/js/jquery.dataTables.min.js"></script>
+  <script src="/assets/js/dataTables.bootstrap4.min.js"></script>
+  <script>
+  $(document).ready(function() {
+    $('#centos-mirrors-table').DataTable();
+  } );
+  </script>
+  <script src="/assets/js/bootstrap.min.js"></script>
+</body>
+
+</html>

data/_layouts/centos-content/download.html

@@ -0,0 +1,18 @@
+---
+layout: default
+---
+
+<main class="centos-content-1col">
+  <div class="centos-content-download">
+    <div class="row">
+      {% include centos-content/download/cards.html %}
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="row">
+      {% include centos-content/2col.html %}
+    </div>
+  </div>
+
+</main>

data/_layouts/centos-content/sponsors.html

@@ -0,0 +1,21 @@
+---
+ layout: centos-content/1col
+---
+
+{{ content }}
+
+<section class="centos-content-sponsors-cards">
+  <div class="d-flex align-content-start flex-wrap align-content-stretch">
+    {% for sponsor in site.sponsors %}
+    <div class="card">
+      <a href="{{ sponsor.address }}">
+      <img class="card-img-top" src="{{ sponsor.logo }}" alt="{{ sponsor.name }}">
+      <div class="card-body">
+        <p class="card-title">{{ sponsor.name }}</p>
+        <p class="card-text">{{ sponsor.description }}</p>
+      </div>
+      </a>
+    </div>
+    {% endfor %}
+  </div>
+</section>

data/_layouts/centos-home.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: 'en' }}">
+
+{% include centos-head.html -%}
+
+<body>
+
+  {% include centos-nav.html -%}
+  {% include centos-header.html -%}
+
+  <main class="centos-content container">
+    <div class="row">
+        {% include centos-content/news.html -%}
+        {% include centos-content/sponsors.html %}
+    </div>
+    <div class="row">
+        {% include centos-content/around.html -%}
+    </div>
+  </main>
+
+  {% include centos-footer.html -%}
+
+  <script src="/assets/js/jquery.min.js"></script>
+  <script src="/assets/js/bootstrap.min.js"></script>
+  <script src="/assets/js/moment.min.js"></script>
+  <script src="/assets/js/jquery.rss.js"></script>
+  <script>
+    jQuery(function($) {
+      $("#rss-feeds").rss("https://www.centos.org/assets/planet.rss", {
+        limit: 5,
+        ssl: true,
+        entryTemplate: '<li><a href="{url}">{date} : {title}</a><br/>{shortBodyPlain}</li>'
+        },
+      )
+   })
+  </script>
+</body>
+
+</html>

data/_layouts/default.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: 'en' }}">
+
+{% include centos-head.html -%}
+
+<body>
+  {% include centos-nav.html -%}
+  {% include centos-header.html -%}
+
+  {{ content }}
+
+  {% include centos-footer.html -%}
+
+  <script src="/assets/js/jquery.min.js"></script>
+  <script src="/assets/js/bootstrap.min.js"></script>
+</body>
+
+</html>

data/_layouts/{download/cards.html → page.html}

@@ -2,6 +2,4 @@
 layout: default
 ---
 
-{% include download/cards.html %}
-
 {{ content }}

data/_layouts/post.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_sass/bootstrap/_alert.scss

@@ -3,25 +3,11 @@
 //
 
 .alert {
-  // scss-docs-start alert-css-vars
-  --#{$prefix}alert-bg: transparent;
-  --#{$prefix}alert-padding-x: #{$alert-padding-x};
-  --#{$prefix}alert-padding-y: #{$alert-padding-y};
-  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-  --#{$prefix}alert-color: inherit;
-  --#{$prefix}alert-border-color: transparent;
-  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
-  --#{$prefix}alert-border-radius: #{$alert-border-radius};
-  --#{$prefix}alert-link-color: inherit;
-  // scss-docs-end alert-css-vars
-
   position: relative;
-  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
-  margin-bottom: var(--#{$prefix}alert-margin-bottom);
-  color: var(--#{$prefix}alert-color);
-  background-color: var(--#{$prefix}alert-bg);
-  border: var(--#{$prefix}alert-border);
-  @include border-radius(var(--#{$prefix}alert-border-radius));
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
+  @include border-radius($alert-border-radius);
 }
 
 // Headings for larger alerts
@@ -33,7 +19,6 @@
 // Provide class for links that match alerts
 .alert-link {
   font-weight: $alert-link-font-weight;
-  color: var(--#{$prefix}alert-link-color);
 }
 
 
@@ -42,27 +27,26 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: $alert-dismissible-padding-r;
+  padding-right: $close-font-size + $alert-padding-x * 2;
 
   // Adjust close link position
-  .btn-close {
+  .close {
     position: absolute;
     top: 0;
     right: 0;
-    z-index: $stretched-link-z-index + 1;
-    padding: $alert-padding-y * 1.25 $alert-padding-x;
+    z-index: 2;
+    padding: $alert-padding-y $alert-padding-x;
+    color: inherit;
   }
 }
 
 
-// scss-docs-start alert-modifiers
-// Generate contextual modifier classes for colorizing the alert
-@each $state in map-keys($theme-colors) {
-  .alert-#{$state} {
-    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
-    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
-    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
-    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
   }
 }
-// scss-docs-end alert-modifiers

data/_sass/bootstrap/_badge.scss

@@ -4,26 +4,22 @@
 // `background-color`.
 
 .badge {
-  // scss-docs-start badge-css-vars
-  --#{$prefix}badge-padding-x: #{$badge-padding-x};
-  --#{$prefix}badge-padding-y: #{$badge-padding-y};
-  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
-  --#{$prefix}badge-font-weight: #{$badge-font-weight};
-  --#{$prefix}badge-color: #{$badge-color};
-  --#{$prefix}badge-border-radius: #{$badge-border-radius};
-  // scss-docs-end badge-css-vars
-
   display: inline-block;
-  padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
-  @include font-size(var(--#{$prefix}badge-font-size));
-  font-weight: var(--#{$prefix}badge-font-weight);
+  padding: $badge-padding-y $badge-padding-x;
+  @include font-size($badge-font-size);
+  font-weight: $badge-font-weight;
   line-height: 1;
-  color: var(--#{$prefix}badge-color);
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  @include border-radius(var(--#{$prefix}badge-border-radius));
-  @include gradient-bg();
+  @include border-radius($badge-border-radius);
+  @include transition($badge-transition);
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      text-decoration: none;
+    }
+  }
 
   // Empty badges collapse automatically
   &:empty {
@@ -36,3 +32,23 @@
   position: relative;
   top: -1px;
 }
+
+// Pill badges
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

data/_sass/bootstrap/_breadcrumb.scss

@@ -1,40 +1,44 @@
 .breadcrumb {
-  // scss-docs-start breadcrumb-css-vars
-  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
-  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
-  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
-  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
-  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
-  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
-  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
-  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
-  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
-  // scss-docs-end breadcrumb-css-vars
-
   display: flex;
   flex-wrap: wrap;
-  padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
-  margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
-  @include font-size(var(--#{$prefix}breadcrumb-font-size));
+  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  margin-bottom: $breadcrumb-margin-bottom;
+  @include font-size($breadcrumb-font-size);
   list-style: none;
-  background-color: var(--#{$prefix}breadcrumb-bg);
-  @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
+  background-color: $breadcrumb-bg;
+  @include border-radius($breadcrumb-border-radius);
 }
 
 .breadcrumb-item {
+  display: flex;
+
   // The separator between breadcrumbs (by default, a forward-slash: "/")
   + .breadcrumb-item {
-    padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+    padding-left: $breadcrumb-item-padding;
 
     &::before {
-      float: left; // Suppress inline spacings and underlining of the separator
-      padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
-      color: var(--#{$prefix}breadcrumb-divider-color);
-      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+      display: inline-block; // Suppress underlining of the separator in modern browsers
+      padding-right: $breadcrumb-item-padding;
+      color: $breadcrumb-divider-color;
+      content: escape-svg($breadcrumb-divider);
     }
   }
 
+  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
+  // without `<ul>`s. The `::before` pseudo-element generates an element
+  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
+  //
+  // To trick IE into suppressing the underline, we give the pseudo-element an
+  // underline and then immediately remove it.
+  + .breadcrumb-item:hover::before {
+    text-decoration: underline;
+  }
+  // stylelint-disable-next-line no-duplicate-selectors
+  + .breadcrumb-item:hover::before {
+    text-decoration: none;
+  }
+
   &.active {
-    color: var(--#{$prefix}breadcrumb-item-active-color);
+    color: $breadcrumb-active-color;
   }
 }