🐛 Fixed red flag splitting across two lines (#79)

* Fix red flag splitting across two lines

Added white-space: nowrap to .flag_red and added new properties to link within toc to compensate for nowrap.

* Reverting back to original state.

* Revisited line wrap issue.

Co-authored-by: Tatiana Mac <github@tatianamac.com>

.eleventy.js

@@ -14,7 +14,7 @@ module.exports = function(config) {
       )}">${word}</a>`;
     }
 
-    return word;
+    return `<span>${word}</span>`;
   });
 
   config.addFilter('linkSubTermIfDefined', (subTermData, collection) => {

assets/css/components/_flag.scss

@@ -1,10 +1,11 @@
 .flag__red {
   background-color: rgb(255, 192, 203);
   border-radius: 1rem;
+  display: inline-block;
   font-size: 0.9rem;
   font-weight: bold;
-  margin: 0.25rem 0.75rem;
   padding: 0.45rem 0.65rem;
+  margin: 0.50rem 0.75rem 0.25rem 0;
   text-transform: lowercase;
 
   &:before {

assets/css/structures/_table-of-content.scss

@@ -1,3 +1,8 @@
 .toc__list-item {
   break-inside: avoid;
+
+    > span, > a {
+    margin-right: 0.75rem;
+    }
+
 }