search

manubot / rootstock

Clone me to create your Manubot manuscript
https://manubot.github.io/rootstock/
Other
453 stars 178 forks source link

Fix dimensions of mastodon icon #487

Closed miltondp closed 1 year ago

miltondp commented 1 year ago

This PR changes the dimensions of the Mastodon icon so when the manuscript is converted to docx the image has the right size. @vincerubinetti might want to check this just in case.

This is how it looks right now and how it looks with this change:

image

image

AppVeyorBot commented 1 year ago

AppVeyor build 1.0.318 for commit 5c38bb8c0f71544223e12be9b95b0f671af5c956 is now complete.

Found 51 potential spelling error(s). Preview:content/02.delete-me.md:44:adipiscing content/02.delete-me.md:44:aliqua content/02.delete-me.md:44:amet content/02.delete-me.md:44:consectetur content/02.delete-me.md:44:dolore content/02.delete-me.md:44:eiusmod content/02.delete-me.md:44:elit content/02.delete-me.md:44:incididunt content/02.delete-me.md:44:ipsum content/02.delete-me.md:44:labore content/02.delete-me.md:44:Lorem content/02.delete-me.md:44:magna content/02...
The rendered manuscript from this build is temporarily available for download at:

AppVeyorBot commented 1 year ago

AppVeyor build 1.0.319 for commit 13dae3c59cc584609144dc2f80db3c2e6205e1ef is now complete.

Found 51 potential spelling error(s). Preview:content/02.delete-me.md:44:adipiscing content/02.delete-me.md:44:aliqua content/02.delete-me.md:44:amet content/02.delete-me.md:44:consectetur content/02.delete-me.md:44:dolore content/02.delete-me.md:44:eiusmod content/02.delete-me.md:44:elit content/02.delete-me.md:44:incididunt content/02.delete-me.md:44:ipsum content/02.delete-me.md:44:labore content/02.delete-me.md:44:Lorem content/02.delete-me.md:44:magna content/02...
The rendered manuscript from this build is temporarily available for download at:

vincerubinetti commented 1 year ago

Let's take this opportunity to make the icon consistent with the others. Here is cleaner code from Font Awesome:

<!-- Modified from https://fontawesome.com/icons/mastodon under its CC BY 4.0 License -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 448 512">
    <path fill="#808080" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z" />
</svg>

Also preserving aspect ratio doesn't really matter in this case, as the svg will scale to be contained within the shorter dimension without stretching. That is, keeping it 16x16 will just add a tiny bit of white space on either side, in this case.

In the future, or maybe we can do it in this PR, it'd be better to only specify the height, and to specify it in terms of the text size it is within, i.e. height="1em".

agitter commented 1 year ago

Thanks for working on this @miltondp.

it'd be better to only specify the height, and to specify it in terms of the text size it is within

Can we address that in this same pull request? @vincerubinetti is the proposal to edit the height in the svg files and leave the relevant parts of content/00.front-matter.md as

![ORCID icon](images/orcid.svg){.inline_icon width=16 height=16}

for all icons?

vincerubinetti commented 1 year ago

Apologies, I remember what is going on now.

We already have an .inline_icon class that sets the height to 1em, but because that CSS (in themes/default.html) is loaded at the end of the <body>, it won't get applied until a few hundred milliseconds after the content of <body> has already been shown. This leads to a momentary flash where the icons are huge because they have no set dimensions. So I probably had us add width="16" height="16" to the icons themselves as a fallback, just for that momentary flash. 1em (or any other font size) will override it once the style loads, and preserve aspect ratio.

tl;dr, just add width="16" height="16" to each svg icon, and only attach {.inline_icon} when using it. No more is needed.

Also for consistency, check Font Awesome first for any icons you add in the future (I know, FA probably didn't have Mastodon right away). You'll get a nice clean single <path> element and matching viewBox, and that's all you need.

AppVeyorBot commented 1 year ago

AppVeyor build 1.0.322 for commit 4ff14836383d5931fb20303fe4d9866043581f20 is now complete.

Found 51 potential spelling error(s). Preview:content/02.delete-me.md:44:adipiscing content/02.delete-me.md:44:aliqua content/02.delete-me.md:44:amet content/02.delete-me.md:44:consectetur content/02.delete-me.md:44:dolore content/02.delete-me.md:44:eiusmod content/02.delete-me.md:44:elit content/02.delete-me.md:44:incididunt content/02.delete-me.md:44:ipsum content/02.delete-me.md:44:labore content/02.delete-me.md:44:Lorem content/02.delete-me.md:44:magna content/02...
The rendered manuscript from this build is temporarily available for download at:

miltondp commented 1 year ago

I hope I got @vincerubinetti right and made the correct changes.

AppVeyorBot commented 1 year ago

AppVeyor build 1.0.323 for commit 837c57ed6f59b3e4b8a1a2232aad0a893e109da2 is now complete.

Found 51 potential spelling error(s). Preview:content/02.delete-me.md:44:adipiscing content/02.delete-me.md:44:aliqua content/02.delete-me.md:44:amet content/02.delete-me.md:44:consectetur content/02.delete-me.md:44:dolore content/02.delete-me.md:44:eiusmod content/02.delete-me.md:44:elit content/02.delete-me.md:44:incididunt content/02.delete-me.md:44:ipsum content/02.delete-me.md:44:labore content/02.delete-me.md:44:Lorem content/02.delete-me.md:44:magna content/02...
The rendered manuscript from this build is temporarily available for download at:

vincerubinetti commented 1 year ago

The width and height next to .inline_icon is not necessary.

AppVeyorBot commented 1 year ago

AppVeyor build 1.0.325 for commit 0ffdba61cbeae02b2fe8590d7ed9c66acd7bc935 is now complete.

Found 51 potential spelling error(s). Preview:content/02.delete-me.md:44:adipiscing content/02.delete-me.md:44:aliqua content/02.delete-me.md:44:amet content/02.delete-me.md:44:consectetur content/02.delete-me.md:44:dolore content/02.delete-me.md:44:eiusmod content/02.delete-me.md:44:elit content/02.delete-me.md:44:incididunt content/02.delete-me.md:44:ipsum content/02.delete-me.md:44:labore content/02.delete-me.md:44:Lorem content/02.delete-me.md:44:magna content/02...
The rendered manuscript from this build is temporarily available for download at:

AppVeyorBot commented 1 year ago

AppVeyor build 1.0.326 for commit 4ba9cd30e898bf1330682930aca2eb140e3221ec is now complete.

Found 51 potential spelling error(s). Preview:content/02.delete-me.md:44:adipiscing content/02.delete-me.md:44:aliqua content/02.delete-me.md:44:amet content/02.delete-me.md:44:consectetur content/02.delete-me.md:44:dolore content/02.delete-me.md:44:eiusmod content/02.delete-me.md:44:elit content/02.delete-me.md:44:incididunt content/02.delete-me.md:44:ipsum content/02.delete-me.md:44:labore content/02.delete-me.md:44:Lorem content/02.delete-me.md:44:magna content/02...
The rendered manuscript from this build is temporarily available for download at: