a sigil

Signed-off-by: Xe Iaso <me@christine.website>

blog/a-sigil-2022-01-11.markdown

@@ -0,0 +1,45 @@
+---
+title: "Site Update: A Sigil"
+date: 2022-01-11
+---
+
+<style>
+.logo-wumbo {
+    background-color: #fdf5d7;
+    -webkit-mask: url("/static/img/xeiaso.svg");
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    mask: url("/static/img/xeiaso.svg");
+    mask-repeat: no-repeat;
+    mask-size: 100%;
+    width: 9.5em;
+    height: 16em;
+    display: inline-block;
+}
+
+@media (prefers-color-scheme: light) {
+    .logo-wumbo {
+        background-color: #1d2021;
+    }
+}
+</style>
+
+The upper left-hand corner of my website has gotten more interesting as of
+recently. I have decided to experiment with adding an SVG icon to the upper left
+hand corner of the page.
+
+This is the sigilized form of the name `Xe Iaso`. This sigil is equivalent in
+meaning and semantics to the name `Xe Iaso`. Here is a version of it in a much
+bigger size:
+
+<center><span class="logo-wumbo"></span></center>
+
+[Fun fact: the sigil is written using <a
+href="https://greggshorthand.github.io/index.html">Gregg Shorthand</a>. It says
+the phonetic equivalent of `Xe Iaso`.](conversation://Mara/hacker)
+
+I have tested this in Edge on Linux, Firefox on Linux, Chrome on Android and
+Safari on iOS. This should cover most of the big web browsers, but surely I've
+missed something. If you use a _modern release_ of a _standards compliant_ web
+browser and you don't see a logo anywhere on the page, please let me know so I
+can go cry and then hopefully fix the issue.

css/shim.css

@@ -64,6 +64,8 @@ img {
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: 100%;
     mask: url("/static/img/xeiaso.svg");
+    mask-repeat: no-repeat;
+    mask-size: 100%;
     height: 32px;
     width: 19px;
     float: left;