4 ms·

I used a modified version of Tufte.css (forked years ago) for my website[0]. I love the way it works for the longish posts I wanted to make but Tufte's ideas ar

I used a modified version of Tufte.css (forked years ago) for my website[0]. I love the way it works for the longish posts I wanted to make but Tufte's ideas are not without their problems when converted into a web page. The design really works best in landscape mode. Portrait "works" but the sidenotes interact with the main text and each other in annoying ways. This sometimes makes writing documents harder than it should be since I have to test the output in both Landscape and Portrait to make sure it doesn't look terrible. This somewhat defeats my goal of having a nice clean markdown->styled html workflow. I often have to make small changes to get things looking OK. That said, I am very happy with the overall look and functionality of the style. [0] An example page: https://sheep.horse/2017/4/so_you_want_to_start_an_unpopular_blog.html https://sheep.horse/2017/4/so_you_want_to_start_an_unpopular...

leephillips 6y ago
Haha, I enjoyed that. And it looks good. I may even be a return visitor!
hinkley 6y ago
I wonder if there's a way to move the footnotes to the bottom of a section when the display is narrow...
- AndrewStephens 6y ago
  I've thought about this a lot and I can think of two ways but I am too lazy to implement either of them. The first is to use Javascript to dynamically move the footnotes, or to hide them behind a dynamic interface. I've seen other sites use similar techniques. However, one of my original goals was to avoid JavaScript where possible and there are always some users who don't run js. The second is just to include the footnotes and sidenotes twice in the document in different places and use css media queries to select between them. This wouldn't be a big deal since I am already generating the document from markdown anyway.
- bradley_taunt 6y ago
  I _somewhat_ solved this problem with my Jekyll theme based of Tufte CSS[0]. Not perfect, but it just places the marginnote below it's corresponding element. [0] https://et-jekyll.netlify.app/et-jekyll-theme/ https://et-jekyll.netlify.app/et-jekyll-theme/ Edit: I realize you are referring to "footnotes" and not margin/side notes, but I believe you could use the same method.
kindly_fo 6y ago
looks like dogshit. Seriously use some screen oriented font family.

leephillips 6y ago

Haha, I enjoyed that. And it looks good. I may even be a return visitor!

hinkley 6y ago

I wonder if there's a way to move the footnotes to the bottom of a section when the display is narrow...

AndrewStephens 6y ago
I've thought about this a lot and I can think of two ways but I am too lazy to implement either of them. The first is to use Javascript to dynamically move the footnotes, or to hide them behind a dynamic interface. I've seen other sites use similar techniques. However, one of my original goals was to avoid JavaScript where possible and there are always some users who don't run js. The second is just to include the footnotes and sidenotes twice in the document in different places and use css media queries to select between them. This wouldn't be a big deal since I am already generating the document from markdown anyway.
bradley_taunt 6y ago
I _somewhat_ solved this problem with my Jekyll theme based of Tufte CSS[0]. Not perfect, but it just places the marginnote below it's corresponding element. [0] https://et-jekyll.netlify.app/et-jekyll-theme/ https://et-jekyll.netlify.app/et-jekyll-theme/ Edit: I realize you are referring to "footnotes" and not margin/side notes, but I believe you could use the same method.

kindly_fo 6y ago

looks like dogshit. Seriously use some screen oriented font family.