blog: style: replace the funky h2 backgrounds with SVGs

sass/static/style.scss

@@ -14,6 +14,41 @@
     @return $string;
 }
 
+// @source https://gist.github.com/B-iggy/14da053d2cebf92e1930
+// @author B-iggy
+@function url-encode($string) {
+  $map: (
+   "%": "%25",
+   "<": "%3C",
+   ">": "%3E",
+   " ": "%20",
+   "!": "%21",
+   "*": "%2A",
+   "'": "%27",
+   '"': "%22",
+   "(": "%28",
+   ")": "%29",
+   ";": "%3B",
+   ":": "%3A",
+   "@": "%40",
+   "&": "%26",
+   "=": "%3D",
+   "+": "%2B",
+   "$": "%24",
+   ",": "%2C",
+   "/": "%2F",
+   "?": "%3F",
+   "#": "%23",
+   "[": "%5B",
+   "]": "%5D"
+   );
+  $new: $string;
+  @each $search, $replace in $map {
+    $new: str-replace($new, $search, $replace);
+  }
+  @return $new;
+}
+
 /// declare a cross-browser @font-face.
 /// note that Firefox is very picky about the syntax here: experimentation shows that
 ///   the eot MUST come first (even if FF doesn't load it), and the other formats MUST
@@ -90,6 +125,34 @@ $icon_bootstrap_arrow_return_right: url('data:image/svg+xml; utf8, <svg xmlns="h
 $icon_bootstrap_arrow_right: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path fill="currentColor" fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg>');
 // MIT; source: https://icon-sets.iconify.design/bi/arrow-bar-right/
 $icon_bootstrap_arrow_bar_right: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path fill="currentColor" fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8zm-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5z"/></svg>');
+// @author colin
+// made in Inkscape
+$icon_h2_slash_svg: '
+<svg
+   aria-hidden="true"
+   role="img"
+   width="9.0000038"
+   height="36.000004"
+   preserveAspectRatio="xMidYMid meet"
+   viewBox="0 0 9.0000038 36.000004"
+   version="1.1"
+   id="svg4"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <path
+     fill="none"
+     stroke="#{$color_cream_5}"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     d="M 8.3205889,0.67941499 0.67941499,35.320589"
+     id="path2"
+     style="stroke-width:1.35883;stroke-miterlimit:4;stroke-dasharray:none" />
+</svg>
+';
+$icon_h2_slash: url("data:image/svg+xml; utf8, #{url-encode($icon_h2_slash_svg)}");
+
 
 $marker_title: $icon_bootstrap_arrow_return_right;
 $marker_section: $icon_bootstrap_arrow_right;
@@ -135,16 +198,6 @@ h1, h2, h3, header
     margin-right: 0;
 }
 
-// some element which should not ever be displayed.
-// TODO: probably want to inline this to prevent any early rendering.
-.hide
-{
-    height: 0;
-    overflow: hidden;
-    margin: 0;
-    padding: 0;
-}
-
 body
 {
     background-color: $color_bg;
@@ -168,13 +221,6 @@ body
     flex-grow: 1000;
 }
 
-#tile-slash
-{
-    font-size: 1.6rem;
-    // opacity: 50%;
-    color: $color_cream_5;
-}
-
 .portal
 {
     max-width: 40rem;
@@ -325,7 +371,8 @@ body
         }
         h2::after
         {
-            background: -moz-element(#tile-slash) center;
+            background-image: $icon_h2_slash;
+            background-repeat: repeat-x;
         }
 
     // TODO colin: numbers are slightly wrong because of scrollbar width.

templates/base.html

@@ -32,11 +32,6 @@
             {% block content %} {% endblock %}
         </div>
     </div>
-
-
-    <div class="hide">
-        <span id="tile-slash">/</span>
-    </div>
 </body>
 
 </html>