Remove relative url variables

Remove all relative `url()` variables in favor of direct CSS
declarations. It appears that Safari treats url variables as relative
to the element that they're defined on, rather than the CSS file that
declares them.

Fixes gh-11

Author: philwebb

postcss.config.js

@@ -4,9 +4,7 @@ module.exports = {
   plugins: {
     "postcss-import": {},
     cssnano: {
-      preset: ["default", {
-        normalizeUrl: false,
-      }]
+      preset: ["default"]
     },
     "autoprefixer": {}
   },

src/main/css/asciidoctor.css

@@ -36,7 +36,7 @@
 /* Doc background embellishment */
 
 #doc {
-  background: var(--asciidoctor-doc-embellishment-background);
+  background: url("../img/doc-background.svg") no-repeat top right / 305px 147px;
 }
 
 .doc #header {
@@ -910,3 +910,28 @@ i.fa.icon-warning {
   padding: 2rem 0;
   border-top: 1px solid var(--asciidoctor-section-divider-color);
 }
+
+/* Responsive and Dark Theme Overrides */
+
+html.dark-theme #doc {
+  background: url("../img/doc-background-dark.svg") no-repeat top right / 305px
+    147px;
+}
+
+@media screen and (max-width: 1024px) {
+  #doc {
+    background: url("../img/doc-background.svg") no-repeat top right / 203px
+      95px;
+  }
+  html.dark-theme #doc {
+    background: url("../img/doc-background-dark.svg") no-repeat top right /
+      203px 95px;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  html.dark-theme #doc,
+  #doc {
+    background: none;
+  }
+}

src/main/css/layout.css

@@ -22,7 +22,7 @@
 
 #banner {
   height: 100%;
-  background: var(--layout-banner-logo) no-repeat top
+  background: url("../img/banner-logo.svg") no-repeat top
     var(--layout-banner-logo-offset) left var(--layout-banner-logo-offset) /
     auto var(--layout-banner-logo-height);
 }

src/main/css/settings-dark.css

@@ -23,8 +23,6 @@ html.dark-theme {
   --layout-switchtheme-background-color: var(--selected-background-color);
 
   /* Asciidoctor */
-  --asciidoctor-doc-embellishment-background: url("../img/doc-background-dark.svg")
-    no-repeat top right / 305px 147px;
   --asciidoctor-code-background: rgba(177, 209, 241, 0.15);
   --asciidoctor-code-data-lang-color: #6e6e6e;
   --asciidoctor-admonition-font-color: #f0f0f0;
@@ -64,17 +62,3 @@ html.dark-theme {
   --codetools-divider-color: rgba(44, 44, 44, 0.274);
 }
 
-/* Responsive Overrides */
-
-@media screen and (max-width: 1024px) {
-  html.dark-theme {
-    --asciidoctor-doc-embellishment-background: url("../img/doc-background-dark.svg")
-      no-repeat top right / 203px 95px;
-  }
-}
-
-@media screen and (max-width: 800px) {
-  html.dark-theme {
-    --asciidoctor-doc-embellishment-background: none;
-  }
-}

src/main/css/settings.css

@@ -15,6 +15,8 @@
  */
 
 :root {
+  /* NOTE: Don't use relative `url()` values in here. Safari load them properly */
+
   /* General */
   --html-font-size: 1em;
   --pixel-to-rem: 16 * 1rem;
@@ -41,7 +43,6 @@
   --selected-background-color: #191e1e;
 
   /* Layout */
-  --layout-banner-logo: url("../img/banner-logo.svg");
   --layout-banner-logo-offset: 18px;
   --layout-banner-logo-height: 50px;
   --layout-max-width: 1400px;
@@ -53,8 +54,6 @@
   --layout-switchtheme-button-hover-color: var(--color-accent-1);
 
   /* Asciidoctor */
-  --asciidoctor-doc-embellishment-background: url("../img/doc-background.svg")
-    no-repeat top right / 305px 147px;
   --asciidoctor-doc-embellishment-margin-width: 250px;
   --asciidoctor-doc-background-embellishment-height: 147px;
   --asciidoctor-details-background: var(--color-accent-1);
@@ -161,8 +160,6 @@
 @media screen and (max-width: 1024px) {
   :root {
     --toc-width: 16rem;
-    --asciidoctor-doc-embellishment-background: url("../img/doc-background.svg")
-      no-repeat top right / 203px 95px;
     --asciidoctor-doc-embellishment-margin-width: 140px;
   }
 }
@@ -177,7 +174,6 @@
     --toc-bar-height: 24px;
     --toc-width: 0;
     --toc-display: none;
-    --asciidoctor-doc-embellishment-background: none;
     --asciidoctor-doc-embellishment-margin-width: 0;
   }
 }