Safari inner overrides

docs/assets/css/keyrune.css

@@ -1300,10 +1300,6 @@
     margin-left: -1.3%;
   }
 }
-_::-webkit-full-page-media .ss-inner, _:future .ss-inner, :root .safari_only .ss-inner {
-  display: none !important;
-}
-
 .ss-8ed:not(.ss-border):not(.ss-inner)::before {
   content: "\f8e7";
 }
@@ -1317,4 +1313,21 @@ _::-webkit-full-page-media .ss-inner, _:future .ss-inner, :root .safari_only .ss
   --ss-inner: var(--ss-border-contrast);
 }
 
+@supports (-webkit-hyphens: none) {
+  .ss.ss-inner {
+    list-style: none !important;
+    background-repeat: no-repeat;
+    background-position: 50% 22.4375%;
+  }
+  .ss.ss-inner::before {
+    position: revert !important;
+  }
+  .ss.ss-inner.ss-mmq {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 39 48' fill='white'%3E%3Cpath d='M30.17 28.47h-1.9c-.4 0-1.36-.1-2.37-.27.26-.25.54-.5.84-.75a4.9 4.9 0 0 1 3-1.25c.95 0 1.77.39 2.25.93.2.22.36.46.35.71v.01c0 .16-.17.24-.37.33-.43.2-1.02.3-1.8.3Zm-19.39 0h-1.9c-.77 0-1.37-.09-1.8-.29-.2-.09-.36-.17-.37-.34 0-.24.15-.48.35-.71.49-.54 1.3-.93 2.25-.93a4.9 4.9 0 0 1 3 1.25c.3.24.59.5.84.75-1 .18-1.96.27-2.37.27Zm8.9-8.52h-.31c-4.49.01-7.74-.38-10.22-.88-.06 0 .34-.42.63-.71 0 0 3.74-3.73 9.6-3.73h.15c5.86 0 9.62 3.73 9.62 3.73.28.28.7.75.62.77-2.46.46-5.76.82-10.1.82Z'/%3E%3C/svg%3E");
+  }
+  .ss.ss-inner.ss-pcy {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48' fill='white'%3E%3Cpath d='m37.17 32.78 5.31-5.7.08 2.09-4.3 4.73-1.09-1.12ZM9.32 20.74l6.77 10.93c.3 2.79-2.3 1.4-2.3 1.4l-7.4-12.81 2.93.48Zm22.77-5.22L31.02 35.3c-2.31.56-2.62-2.09-2.62-2.09l1.39-19.77 2.3 2.1Z'/%3E%3C/svg%3E");
+  }
+}
+
 /*# sourceMappingURL=keyrune.css.map */

docs/src/static/assets/css/keyrune.css

@@ -1300,10 +1300,6 @@
     margin-left: -1.3%;
   }
 }
-_::-webkit-full-page-media .ss-inner, _:future .ss-inner, :root .safari_only .ss-inner {
-  display: none !important;
-}
-
 .ss-8ed:not(.ss-border):not(.ss-inner)::before {
   content: "\f8e7";
 }
@@ -1317,4 +1313,21 @@ _::-webkit-full-page-media .ss-inner, _:future .ss-inner, :root .safari_only .ss
   --ss-inner: var(--ss-border-contrast);
 }
 
+@supports (-webkit-hyphens: none) {
+  .ss.ss-inner {
+    list-style: none !important;
+    background-repeat: no-repeat;
+    background-position: 50% 22.4375%;
+  }
+  .ss.ss-inner::before {
+    position: revert !important;
+  }
+  .ss.ss-inner.ss-mmq {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 39 48' fill='white'%3E%3Cpath d='M30.17 28.47h-1.9c-.4 0-1.36-.1-2.37-.27.26-.25.54-.5.84-.75a4.9 4.9 0 0 1 3-1.25c.95 0 1.77.39 2.25.93.2.22.36.46.35.71v.01c0 .16-.17.24-.37.33-.43.2-1.02.3-1.8.3Zm-19.39 0h-1.9c-.77 0-1.37-.09-1.8-.29-.2-.09-.36-.17-.37-.34 0-.24.15-.48.35-.71.49-.54 1.3-.93 2.25-.93a4.9 4.9 0 0 1 3 1.25c.3.24.59.5.84.75-1 .18-1.96.27-2.37.27Zm8.9-8.52h-.31c-4.49.01-7.74-.38-10.22-.88-.06 0 .34-.42.63-.71 0 0 3.74-3.73 9.6-3.73h.15c5.86 0 9.62 3.73 9.62 3.73.28.28.7.75.62.77-2.46.46-5.76.82-10.1.82Z'/%3E%3C/svg%3E");
+  }
+  .ss.ss-inner.ss-pcy {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48' fill='white'%3E%3Cpath d='m37.17 32.78 5.31-5.7.08 2.09-4.3 4.73-1.09-1.12ZM9.32 20.74l6.77 10.93c.3 2.79-2.3 1.4-2.3 1.4l-7.4-12.81 2.93.48Zm22.77-5.22L31.02 35.3c-2.31.56-2.62-2.09-2.62-2.09l1.39-19.77 2.3 2.1Z'/%3E%3C/svg%3E");
+  }
+}
+
 /*# sourceMappingURL=keyrune.css.map */

package.json

@@ -4,7 +4,7 @@
   "author": "Andrew Gioia",
   "description": "Magic: the Gathering icon font",
   "license": "(OFL-1.1 AND GPL-3.0-only)",
-  "homepage": "https://keyrune4.andrewgioia.com",
+  "homepage": "https://keyrune.andrewgioia.com",
   "main": "dist/css/keyrune.css",
   "directories": {
     "doc": "docs"

src/scss/_fixes.scss

@@ -19,13 +19,6 @@
     }
 }
 
-// safari specific overrides
-_::-webkit-full-page-media, _:future, :root .safari_only {
-    .#{$keyrune-prefix}-inner {
-        display: none !important;
-    }
-}
-
 // set specific corrections
 //
 // 8ed alt

src/scss/_safari.scss

@@ -0,0 +1,23 @@
+@supports (-webkit-hyphens: none) {
+    .#{$keyrune-prefix}.#{$keyrune-prefix}-inner {
+
+        // remove list style and setup for background image approach on the element itself
+        list-style: none !important;
+        background-repeat: no-repeat;
+        background-position: 50% 22.4375%; // no idea why this needs to be 22.4375%!
+
+        // revert the absolute positioning on ::before
+        &::before {
+            position: revert !important;
+        }
+
+        // iterate over each set and for those with an inner, add the svg as a background image
+        @each $set, $attributes in $keyrune-sets {
+            @if (map-get($attributes, inner_svg)) {
+                &.#{$keyrune-prefix}-#{$set} {
+                    background-image: url(glyph-content(map-get($attributes, inner_svg)));
+                }
+            }
+        }
+    }
+}

src/scss/_variables.scss

@@ -294,6 +294,7 @@ $keyrune-sets: (
         rarity: "\e08d",
         border: "\e08e",
         inner: "\e08f",
+        inner_svg: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2' viewBox='0 0 39 48' fill='white'%3E%3Cpath d='M30.17 28.47h-1.9c-.4 0-1.36-.1-2.37-.27.26-.25.54-.5.84-.75a4.9 4.9 0 0 1 3-1.25c.95 0 1.77.39 2.25.93.2.22.36.46.35.71v.01c0 .16-.17.24-.37.33-.43.2-1.02.3-1.8.3Zm-19.39 0h-1.9c-.77 0-1.37-.09-1.8-.29-.2-.09-.36-.17-.37-.34 0-.24.15-.48.35-.71.49-.54 1.3-.93 2.25-.93a4.9 4.9 0 0 1 3 1.25c.3.24.59.5.84.75-1 .18-1.96.27-2.37.27Zm8.9-8.52h-.31c-4.49.01-7.74-.38-10.22-.88-.06 0 .34-.42.63-.71 0 0 3.74-3.73 9.6-3.73h.15c5.86 0 9.62 3.73 9.62 3.73.28.28.7.75.62.77-2.46.46-5.76.82-10.1.82Z'/%3E%3C/svg%3E",
     ),
     brb: (
         rarity: "\e090",
@@ -329,6 +330,7 @@ $keyrune-sets: (
         rarity: "\e0a2",
         border: "\e0a3",
         inner: "\e0a4",
+        inner_svg: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48' fill='white'%3E%3Cpath d='m37.17 32.78 5.31-5.7.08 2.09-4.3 4.73-1.09-1.12ZM9.32 20.74l6.77 10.93c.3 2.79-2.3 1.4-2.3 1.4l-7.4-12.81 2.93.48Zm22.77-5.22L31.02 35.3c-2.31.56-2.62-2.09-2.62-2.09l1.39-19.77 2.3 2.1Z'/%3E%3C/svg%3E",
     ),
     btd: (
         rarity: "\e0a5",

src/scss/keyrune.scss

@@ -5,3 +5,4 @@
 @import "media";
 @import "sets";
 @import "fixes";
+@import "safari";