Fix squashed spine in 3D book image in Safari

This commit is contained in:
Alex Cabal 2022-01-25 21:25:21 -06:00
parent f5c248fb40
commit 450aa5b4b4
2 changed files with 40 additions and 3 deletions

View file

@ -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));

38
www/images/logo-spine.svg Normal file
View file

@ -0,0 +1,38 @@
<svg width="220" height="140" fill="#fff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"><!-- preserveAspectRatio="none" is required for Safari: https://bugs.webkit.org/show_bug.cgi?id=82645 -->
<defs>
<g id="laurel">
<path d="M56.35 8.23a57.2 57.2 0 00-9.23 7.48 159.9 159.9 0 00-13.83 16.5 96.05 96.05 0 00-8.44 14.01 73.75 73.75 0 00-5.66 16.03 57.86 57.86 0 00.33 26.58c3.02 12.64 12.8 23.2 22.6 31.78 7.63 6.7 17.89 11.07 26.93 14.29l.9-2.45c-8.92-3.19-18.4-7.45-25.72-13.88-9.43-8.3-18.14-18.42-21.88-30.43A51.82 51.82 0 0120.73 65a88.84 88.84 0 016.26-19.88 64.43 64.43 0 017.6-13.28 149.4 149.4 0 0112.47-15.22A59.1 59.1 0 0156.9 8.7z"/>
<path d="M52.42 127.4s-6.32-2.01-11.35-1.43c-7.97.96-8.74 5.9-8.74 5.9s3.21 1.99 10.09 1.24c8.05-.9 10-5.71 10-5.71z"/>
<path d="M41.65 119.97s-5.36-2.5-10.45-2.47c-8.74.05-9.26 4.73-9.26 4.73s3.16 2.28 10.17 2.2c8.1-.14 9.54-4.43 9.54-4.43z"/>
<path d="M33.65 112.22s-5.09-4.45-10.01-5.69c-8.5-2.14-11.3 2.8-11.3 2.8s3.16 3.8 9.98 5.48c7.86 1.92 11.33-2.59 11.33-2.59z"/>
<path d="M24.63 100.24s-4.34-4.6-10.28-6.4C6.57 91.43 2.9 96.1 2.8 96.21c0 0 3.2 4.02 9.84 5.78 8.88 2.33 11.99-1.76 11.99-1.76z"/>
<path d="M20.34 90.7s-4.07-6.16-10.09-9.07C4.4 78.8.08 81.2 0 81.3c0 0 3.02 5.5 8.55 8.13 7.53 3.58 11.8 1.24 11.8 1.24z"/>
<path d="M19.02 82.31c-2.14-2.03-2.3-7.56-5.39-12A13.41 13.41 0 002.1 64.52s.77 7.8 6.16 12.5c5.71 5 10.77 5.28 10.77 5.28z"/>
<path d="M18.42 69.2s.22-6.76-1.57-11.9a13.2 13.2 0 00-9.4-8.55s-1.1 7.67 2.83 13.63c4.2 6.33 8.16 6.82 8.16 6.82z"/>
<path d="M21.3 56.53s1.38-5.7.7-11.08c-1.05-8.14-7.38-9.87-7.51-9.84 0 0-2.18 7.53.93 13.96 3.27 6.88 5.88 6.96 5.88 6.96z"/>
<path d="M26.88 42.9s2.2-5.12 1.93-10.56a13.2 13.2 0 00-5.64-10.72s-4.92 4.42-2.09 14.02c1.74 5.77 5.8 7.28 5.8 7.28z"/>
<path d="M33.98 31.73s3.3-5.05 4.17-10.44a19.8 19.8 0 00-1.64-11s-5.34 2.34-5.12 11.33a22 22 0 002.59 10.09z"/>
<path d="M42.69 20.93s3.9-4.18 4.95-9.84c.82-4.73 0-9.84-.9-11.1 0 0-5.1 3.16-5.48 11.16-.27 6.04 1.05 8.9 1.43 9.78z"/>
<path d="M49.01 14.3s7.45.28 11.16-1.89c4.13-2.4 8.2-7.61 8.52-9.13 0 0-6.51-2.86-12.59 2.37a27.65 27.65 0 00-7.09 8.66z"/>
<path d="M40.82 23.27s3.57-4.15 9.68-5.22a15.83 15.83 0 0110.66 1.26s-3.57 4.62-10.44 5.22c-6.05.58-9.02-.88-9.9-1.26z"/>
<path d="M33.45 32.89s3.41-4.01 9.51-5.09c4.73-.82 6.99 0 9.32 1.38 0 0-2.86 4.4-9.75 5.03-6.02.55-8.2-.96-9.08-1.32z"/>
<path d="M26.3 45.42s3.2-4.94 8.91-7.34c5.86-2.47 8.88-1.29 11.41-.35-.82 1.2-4.12 6.24-9.43 7.75-5.83 1.65-9.95.16-10.88-.06z"/>
<path d="M22.07 56.53s2.8-5.14 8.36-7.94c5.66-2.9 8.77-1.93 11.35-1.16-.71 1.27-3.65 6.52-8.88 8.41-5.66 2.04-9.9.85-10.83.69z"/>
<path d="M19.85 69.78c2.42-3.13 3.76-6.46 7.47-9.79 4.62-4.12 8.58-2.8 11.27-2.53-1.34 2.48-3.3 6.38-7.42 9.35-4.9 3.52-10.36 2.94-11.32 2.97z"/>
<path d="M20.15 81.96c2.06-3.36 3.02-6 6.38-9.7 4.12-4.6 8.02-3.8 10.72-3.86a25.51 25.51 0 01-6.52 9.93c-4.48 4.07-9.62 3.49-10.58 3.63z"/>
<path d="M22.82 91.66c3.1-4.78 2.72-5.85 5.77-9.84 3.24-4.26 7.37-4.15 10.06-4.4-.83 2.67-2.06 6.32-5.55 9.95-3.71 3.9-7.56 3.41-10.28 4.29z"/>
<path d="M27.9 101.2c1.98-4.23 1.65-6.87 3.44-9.9 2.94-4.95 5.8-5.14 8.5-5.39-2.15 6.13-1.66 6.16-4 9.9-2.3 3.63-5.41 4.12-7.94 5.39z"/>
<path d="M34.09 109.2c1.1-4.54-.03-5.91 1.15-9.21 1.95-5.39 4.73-6.16 7.31-6.9-.27 3.6.17 5.91-1.87 9.81-1.43 2.78-4.4 4.57-6.6 6.33z"/>
<path d="M46.46 100.3s2.25 4.3 1.5 9.34c-1.04 7.03-4.8 8.13-4.8 8.13s-2.17-3.21-1.93-9.75c.22-6.99 5.28-7.7 5.28-7.7z"/>
<path d="M54.57 107.52s2.22 4.4 1.73 9.4c-.6 6.46-4.15 8.08-4.15 8.08s-2.23-3.6-2.34-9.04c-.14-8.3 4.76-8.44 4.76-8.44z"/>
</g>
</defs>
<path d="M112.99 139.91a1 1 0 001.02-1.02v-4.15h2.55c.2 0 .36-.16.36-.35v-3.96a7.02 7.02 0 00-5.5-6.87v-2.1a1.51 1.51 0 10-3.02 0v2.07a7.04 7.04 0 00-5.5 6.87v3.99c0 .19.17.35.36.35h2.55v4.15a1.02 1.02 0 102.04 0v-4.15h4.12v4.15c0 .55.47 1.02 1.02 1.02z" stroke-width="2.75"/>
<path d="M109.91 126.94v-7.01s-22.82-9-31.45-5.23a3.3 3.3 0 000 6.1c17.32 7.54 43.38-19.76 60.67-12.23 5.44 2.4 5.94 10.31 0 12.24-10.72 3.46-29.22-10.86-29.22-10.86v-5" fill="none" stroke="#fff" stroke-width="3.05" stroke-linejoin="round"/>
<path d="M64.94 38.48c-2.64 0-5 2.36-5 4.97v54c0 2.6 2.36 5 5 5h35v.32a3.99 4.67 0 003.98 4.68h11.98a3.99 4.67 0 004.02-4.68v-.27h35.07a5.27 5.27 0 004.9-5.06V43.45a5.17 5.17 0 00-5-4.97h-3.03v58.08l-17.84.2-17.87.19-2.28 1.1c-2.92 1.4-3.71 1.56-5.47 1.01a25.84 25.84 0 01-3.27-1.37l-1.84-.94H67.93V38.48z" stroke-width="2.75"/>
<path d="M64.94 32.46v67.2h37.44c.27.17 1.02.64 2.33 1.25 1.57.74 3.39 1.53 5.2 1.53s3.63-.82 5.2-1.53c1.32-.61 2.03-1.1 2.33-1.24h37.44V32.46h-38.26l-.36.27s-1.1.69-2.47 1.38a12.37 12.37 0 01-3.74 1.32h-.22a12.31 12.31 0 01-3.8-1.3c-1.37-.71-2.47-1.42-2.47-1.42l-.36-.25H75.9zm3.98 4.01h33.43c.3.2 1.02.63 2.31 1.32 1.13.55 1.92 1.1 3.24 1.38v37.8c0 .76 1.21 1.5 2.01 1.5.8 0 2-.74 2-1.5v-37.8c1.33-.3 2.12-.83 3.25-1.4 1.3-.7 2-1.13 2.31-1.33h33.43v60.2h-34.25l-.33.22s-1.1.64-2.5 1.3c-1.38.66-3.17 1.26-3.91 1.26-.74 0-2.5-.6-3.9-1.26-1.38-.66-2.5-1.3-2.5-1.3l-.33-.22H68.92z" stroke-width="2.75"/>
<path d="M88.69 52.47c-4.67 0-9.43 3.44-9.43 8.82 0 3.03 2.03 5.72 5.5 7.43 3.43 1.73 6.54 2.69 6.54 4.78 0 2.7-2.75 2.86-4.18 2.86-3.24 0-7.09-3.3-7.09-3.3l-3.3 5.55s4.12 3.85 10.89 3.85c5.63 0 10.88-2.42 10.88-9.35 0-3.79-3.52-6.51-6.76-7.89-3.3-1.4-6.05-2.55-6.05-4.17 0-1.57 1.21-2.59 3.47-2.59 2.97 0 5.85 2 5.85 2l2.67-5.27s-3.71-2.75-9-2.75z" font-weight="700" font-size="35.09" font-family="'League Spartan'" stroke-width="2.75"/>
<path d="M140.37 52.47H123.2v29.96h17.16v-5.99h-10.31v-6.05h9.9v-5.93h-9.9v-5.97h10.3v-6z" font-weight="700" font-size="36.36" font-family="'League Spartan'" stroke-width="2.75"/>
<use xlink:href="#laurel"/>
<use xlink:href="#laurel" transform="scale(-1, 1)" x="-219.839"/>
</svg>

After

Width:  |  Height:  |  Size: 5.8 KiB