xianmin / hugo-theme-jane

A readable & concise theme for Hugo
https://xianmin.github.io/hugo-theme-jane/
MIT License
918 stars 285 forks source link

Footnote tooltip is garbled #379

Closed sboukortt closed 6 months ago

sboukortt commented 6 months ago

Maybe I’m using it wrong, but I’m trying to add this footnote:

[^1]: [“Probability concepts explained: Marginalisation”](https://towardsdatascience.com/probability-concepts-explained-marginalisation-2296846344fc), by Jonny Brooks-Bartlett (2018)

As a footnote, it’s rendered properly:

image

But the tooltip looks as though it’s wrapping around without actually creating a new line:

image

I don’t know enough CSS to attempt to fix it reliably, but as a stopgap solution, maybe a setting could be added to disable the tooltips?

Thanks.

xianmin commented 6 months ago

This feature isn't really helpful right now, I removed it. Thank you for letting me know!

gvol commented 5 months ago

For me, this was enough to fix it:

diff --git a/assets/sass/_partial/_post/_footnote.scss b/assets/sass/_partial/_post/_footnote.scss
index a54d1bc..aa09fce 100644
--- a/assets/sass/_partial/_post/_footnote.scss
+++ b/assets/sass/_partial/_post/_footnote.scss
@@ -66,7 +66,8 @@
   //     margin-left: -10px;
   //   }
   .fn-text {
-    // line-height: 1.35;
+    // The footnote is contained in a <sup> which sets the line-height to 0
+    line-height: 1.25;
     display: inline-block;
     padding: 1em;
     font-size: 1.2em;

Someday I'll go through my other changes and clean them up to see which are useful.