Merge pull request #2 from gracegrimwood/issue-31-fixes

Issue 31 fixes

Author: k-wall

_layouts/use-cases.html

@@ -10,7 +10,7 @@
             <div class="row g-0">
                 <div class="col-auto">
                   {% for use_case in site.use_cases %}
-                    <p class="card-text">{{ use_case.content | markdownify | inject_anchors}}</p>
+                    <div class="card-text">{{ use_case.content | markdownify | inject_anchors}}</div>
                   {% endfor %}
                 </div>
             </div>

_sass/kroxylicious.scss

@@ -110,6 +110,8 @@ $navbar-dark-disabled-color: rgba($white, 0.45);
   }
 }
 
+// Rouge highlighter non-theme formatting
+// (AKA any formatting for Rouge that isn't part of the generated theme)
 
 .highlighter-rouge {
   background-color: #f8f8f8!important;
@@ -130,3 +132,31 @@ div.highlighter-rouge {
   }
 }
 
+// Anchor Links
+
+h2>a.anchor, h3>a.anchor, h4>a.anchor, h5>a.anchor, h6>a.anchor {
+  font-family: bootstrap-icons!important;
+  color: rgba($primary, 0);
+  display: block;
+  margin-left: -1.5ex;
+  position: absolute;
+  text-decoration: none !important;
+  visibility: hidden;
+  z-index: 2;
+  transition:
+          visibility 1ms linear,
+          color 200ms ease-in-out;
+}
+
+h2>a.anchor::before, h3>a.anchor::before, h4>a.anchor::before, h5>a.anchor::before, h6>a.anchor::before {
+  content: "\f470";
+}
+
+h2:hover>a.anchor, h3:hover>a.anchor, h4:hover>a.anchor, h5:hover>a.anchor, h6:hover>a.anchor {
+  visibility: visible;
+  color: rgba($primary, 1);
+}
+
+h2:hover>a.anchor:hover, h3:hover>a.anchor:hover, h4:hover>a.anchor:hover, h5:hover>a.anchor:hover, h6:hover>a.anchor:hover {
+  color: rgba($secondary, 1);
+}

css/code.css

@@ -1,3 +1,15 @@
+/*
+ * This file is a generated Rouge code highlighter theme, and can be
+ * re-generated with the `rougify` command. More info about this can be found
+ * at https://rouge.jneen.net/ or https://github.com/rouge-ruby/rouge
+ *
+ * NOTE: Manual adjustments to the code highlighting colors and fonts in this
+ * file will persist as it is not re-generated at runtime.
+ * However, any formatting that is not part of the Rouge theme should NOT be
+ * put in this file, and should instead go in _sass/kroxylicious.scss as it
+ * will be overwritten if this file is ever re-generated.
+ */
+
 .highlight table td { padding: 5px; }
 .highlight table pre { margin: 0; }
 .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1 {
@@ -148,23 +160,3 @@
 .highlight .w {
   color: #bbbbbb;
 }
-
-h2>a.anchor, h3>a.anchor, h4>a.anchor, h5>a.anchor, h6>a.anchor {
-  display: block;
-  margin-left: -1.5ex;
-  position: absolute;
-  text-decoration: none !important;
-  visibility: hidden;
-  z-index: 2;
-  transition: visibility 1s;
-}
-
-h2>a.anchor::before, h3>a.anchor::before, h4>a.anchor::before, h5>a.anchor::before, h6>a.anchor::before {
-  content: "\00A7";
-  display: block;
-}
-
-h2:hover>a.anchor, h2>a.anchor:hover, h3:hover>a.anchor, h3>a.anchor:hover, h4:hover>a.anchor, h4>a.anchor:hover, h5:hover>a.anchor, h5>a.anchor:hover, h6:hover>a.anchor, h6>a.anchor:hover {
-  visibility: visible;
-}
-

css/style.scss

@@ -1,4 +1,10 @@
 ---
 ---
+/*
+ * This file exists solely to import the _sass/kroxylicious.scss file
+ * and the Rouge code highlighter theme CSS so they can be compiled by Jekyll.
+ * Any actual formatting should go in the _sass/kroxylicious.scss file, which
+ * is compiled into CSS by jekyll-sass-converter when the site is built.
+ */
 @import "kroxylicious";
 @import "code.css";