Skip to content

Commit e3610cd

Browse files
committed
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
1 parent b86fb11 commit e3610cd

File tree

5 files changed

+30
-27
lines changed

5 files changed

+30
-27
lines changed

postcss.config.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ module.exports = {
44
plugins: {
55
"postcss-import": {},
66
cssnano: {
7-
preset: ["default", {
8-
normalizeUrl: false,
9-
}]
7+
preset: ["default"]
108
},
119
"autoprefixer": {}
1210
},

src/main/css/asciidoctor.css

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
/* Doc background embellishment */
3737

3838
#doc {
39-
background: var(--asciidoctor-doc-embellishment-background);
39+
background: url("../img/doc-background.svg") no-repeat top right / 305px 147px;
4040
}
4141

4242
.doc #header {
@@ -910,3 +910,28 @@ i.fa.icon-warning {
910910
padding: 2rem 0;
911911
border-top: 1px solid var(--asciidoctor-section-divider-color);
912912
}
913+
914+
/* Responsive and Dark Theme Overrides */
915+
916+
html.dark-theme #doc {
917+
background: url("../img/doc-background-dark.svg") no-repeat top right / 305px
918+
147px;
919+
}
920+
921+
@media screen and (max-width: 1024px) {
922+
#doc {
923+
background: url("../img/doc-background.svg") no-repeat top right / 203px
924+
95px;
925+
}
926+
html.dark-theme #doc {
927+
background: url("../img/doc-background-dark.svg") no-repeat top right /
928+
203px 95px;
929+
}
930+
}
931+
932+
@media screen and (max-width: 800px) {
933+
html.dark-theme #doc,
934+
#doc {
935+
background: none;
936+
}
937+
}

src/main/css/layout.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
#banner {
2424
height: 100%;
25-
background: var(--layout-banner-logo) no-repeat top
25+
background: url("../img/banner-logo.svg") no-repeat top
2626
var(--layout-banner-logo-offset) left var(--layout-banner-logo-offset) /
2727
auto var(--layout-banner-logo-height);
2828
}

src/main/css/settings-dark.css

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@ html.dark-theme {
2323
--layout-switchtheme-background-color: var(--selected-background-color);
2424

2525
/* Asciidoctor */
26-
--asciidoctor-doc-embellishment-background: url("../img/doc-background-dark.svg")
27-
no-repeat top right / 305px 147px;
2826
--asciidoctor-code-background: rgba(177, 209, 241, 0.15);
2927
--asciidoctor-code-data-lang-color: #6e6e6e;
3028
--asciidoctor-admonition-font-color: #f0f0f0;
@@ -64,17 +62,3 @@ html.dark-theme {
6462
--codetools-divider-color: rgba(44, 44, 44, 0.274);
6563
}
6664

67-
/* Responsive Overrides */
68-
69-
@media screen and (max-width: 1024px) {
70-
html.dark-theme {
71-
--asciidoctor-doc-embellishment-background: url("../img/doc-background-dark.svg")
72-
no-repeat top right / 203px 95px;
73-
}
74-
}
75-
76-
@media screen and (max-width: 800px) {
77-
html.dark-theme {
78-
--asciidoctor-doc-embellishment-background: none;
79-
}
80-
}

src/main/css/settings.css

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
*/
1616

1717
:root {
18+
/* NOTE: Don't use relative `url()` values in here. Safari load them properly */
19+
1820
/* General */
1921
--html-font-size: 1em;
2022
--pixel-to-rem: 16 * 1rem;
@@ -41,7 +43,6 @@
4143
--selected-background-color: #191e1e;
4244

4345
/* Layout */
44-
--layout-banner-logo: url("../img/banner-logo.svg");
4546
--layout-banner-logo-offset: 18px;
4647
--layout-banner-logo-height: 50px;
4748
--layout-max-width: 1400px;
@@ -53,8 +54,6 @@
5354
--layout-switchtheme-button-hover-color: var(--color-accent-1);
5455

5556
/* Asciidoctor */
56-
--asciidoctor-doc-embellishment-background: url("../img/doc-background.svg")
57-
no-repeat top right / 305px 147px;
5857
--asciidoctor-doc-embellishment-margin-width: 250px;
5958
--asciidoctor-doc-background-embellishment-height: 147px;
6059
--asciidoctor-details-background: var(--color-accent-1);
@@ -161,8 +160,6 @@
161160
@media screen and (max-width: 1024px) {
162161
:root {
163162
--toc-width: 16rem;
164-
--asciidoctor-doc-embellishment-background: url("../img/doc-background.svg")
165-
no-repeat top right / 203px 95px;
166163
--asciidoctor-doc-embellishment-margin-width: 140px;
167164
}
168165
}
@@ -177,7 +174,6 @@
177174
--toc-bar-height: 24px;
178175
--toc-width: 0;
179176
--toc-display: none;
180-
--asciidoctor-doc-embellishment-background: none;
181177
--asciidoctor-doc-embellishment-margin-width: 0;
182178
}
183179
}

0 commit comments

Comments
 (0)