From 450aa5b4b44c32086ca16a029134ba6c519b9bb3 Mon Sep 17 00:00:00 2001 From: Alex Cabal Date: Tue, 25 Jan 2022 21:25:21 -0600 Subject: [PATCH] Fix squashed spine in 3D book image in Safari --- www/css/core.css | 5 ++--- www/images/logo-spine.svg | 38 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 www/images/logo-spine.svg diff --git a/www/css/core.css b/www/css/core.css index 6be62c46..4b485818 100644 --- a/www/css/core.css +++ b/www/css/core.css @@ -2089,9 +2089,8 @@ abbr.acronym{ width: calc(var(--size) + 2px); height: 100%; left: calc(-1 * var(--size)); - background: no-repeat center/calc(var(--size) - .5rem) url('/images/logo-small.svg') #ddd; /* inverts to #222 */ + background: no-repeat center/calc(var(--size) - .5rem) url('/images/logo-spine.svg') #222; background-size: calc(var(--size) - .5rem) var(--size); - filter: invert(1); transform-origin: right; transform: skewY(45deg); z-index: -1; @@ -2106,7 +2105,7 @@ abbr.acronym{ position: absolute; width: var(--size); height: 235px; - background: url('/images/pages-texture.svg') #fff; /* inverts to #222 */ + background: url('/images/pages-texture.svg') #fff; background-size: .5rem; /* needed to prevent visual glitch in FF */ top: calc(-1 * (234px + (var(--size) / 2))); left: calc(-1 * var(--size)); diff --git a/www/images/logo-spine.svg b/www/images/logo-spine.svg new file mode 100644 index 00000000..75382cd0 --- /dev/null +++ b/www/images/logo-spine.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +