clayh53 / tufte-jekyll

Minimal Jekyll blog styled to resemble the look and layout of Edward Tufte's books
MIT License
635 stars 206 forks source link

Narrow-viewport functionality not happening #17

Closed themaikimo closed 9 years ago

themaikimo commented 9 years ago

Is something further needed to make the narrow-viewport feature appear? Your Github-hosted presentation is collapsing on a narrow screen (browser and phone) exactly as documented. But neither my local 'bundle exec jekyll serve' nor webhosted nginx presentation is: at all widths my presentations are substituting checkboxes for superscripts, showing the circled-plus expander for sidenotes and margin figures, and never popping into fullscreen width and hiding margin notes as screen narrows.

Thanks for any ideas. I really like this theme!

clayh53 commented 9 years ago

It sounds like the .scss file is not being updated properly on the build.

This may be due to the baseurl nonsense in the _config.yaml file that is necessary to get the site to display properly on github pages.

Change baseurl: /tufte-jekyll to baseurl: /

For your local test, open a terminal window and navigate to the folder containing the theme.

type in jekyll build

and then type in jekyll serve -w

Open up a browser and point it to localhost:4000/

You may have to open up the tufte.scss file in a text editor. Make a minor change like adding a space somewhere and then save. This should rebuild the tufte.css file in the _site folder.

Reload the page and going to the example page and making the width narrow. This all works on my local machine.

Hope this helps.

On Nov 5, 2015, at 6:52 PM, Mike James notifications@github.com wrote:

Is something further needed to make the narrow-viewport feature appear? Your Github-hosted presentation is collapsing on a narrow screen (browser and phone) exactly as documented. But neither my local 'bundle exec jekyll serve' nor webhosted nginx presentation is: at all widths my presentations are substituting checkboxes for superscripts, showing the circled-plus expander for sidenotes and margin figures, and never popping into fullscreen width and hiding margin notes as screen narrows.

Thanks for any ideas. I really like this theme!

— Reply to this email directly or view it on GitHub.

themaikimo commented 9 years ago

Thanks for these ideas.

Changing the _config.yml baseurl value to '/' results in no formatting and all rendered links being broken, as they all relative hrefs begin with '//': For example, from rendered _site/index.html: <link rel="stylesheet" href="//css/tufte.css">

I did touch the css/tufte.scss file, indeed forcing it to render a new _site/tufte.css. But the original presenting problem remains.

clayh53 commented 9 years ago

perhaps leave baseurl completely blank. It has to be some sort of path issue with the jekyll build.

On Nov 5, 2015, at 9:45 PM, Mike James notifications@github.com wrote:

Thanks for these ideas.

Changing the _config.yml baseurl value to '/' results in no formatting and all rendered links being broken, as they all relative hrefs begin with '//': For example, from rendered _site/index.html: I did touch the css/tufte.scss file, indeed forcing it to render a new _site/tufte.css. But the original presenting problem remains.

— Reply to this email directly or view it on GitHub.

gavinmcgimpsey commented 9 years ago

I've been having problems with this as well. I suspect the _site/tufte.css that is generated from css/tufte.scss is being immediately overwritten by css/tufte.css. At first, making changes to css/tufte.scss did not result in any changes in _site/tufte.css. After removing css/tufte.css, those changes propogated.

In fact, when I removed css/tufte.css, I no longer have the problem described.

I do have a new problem, which is that the margin note now floats far to the right of where it ought to.

clayh53 commented 9 years ago

I’ll remove the tufte.css file from the /css directory and leave only the tufts.scss file. I had been using codekit to do all the sass build, but after reading about how jekyll now has baked-in sass support, I just use jekyll build and jekyll watch to do all the conversion stuff. I inadvertently left the tufte.css file in the folder.

As far as the margin note stuff, I will investigate and try to see what is up.

Thanks for smoking out this issue.

On Nov 7, 2015, at 9:25 PM, Gavin McGimpsey notifications@github.com wrote:

I've been having problems with this as well. I suspect the _site/tufte.css that is generated from css/tufte.scss is being immediately overwritten by css/tufte.css. At first, making changes to css/tufte.scss did not result in any changes in _site/tufte.css. After removing css/tufte.css, those changes propogated.

In fact, when I removed css/tufte.css, I no longer have the problem described.

I do have a new problem, which is that the margin note now floats far to the right of where it ought to.

— Reply to this email directly or view it on GitHub https://github.com/clayh53/tufte-jekyll/issues/17#issuecomment-154771076.

gavinmcgimpsey commented 9 years ago

Looks like in css/tufte.scss you've got p, footer, div.table-wrapper, div.mathblock { width: 55%; } but then later on li.listing { margin:0; & p{ width: 100% } } overrides it, at least for paragraphs.

gavinmcgimpsey commented 9 years ago

Thanks for a great theme!

clayh53 commented 9 years ago

Are you getting the problem on normal pages?

On Nov 7, 2015, at 9:44 PM, Gavin McGimpsey notifications@github.com wrote:

Looks like in css/tufte.scss you've got p, footer, div.table-wrapper, div.mathblock { width: 55%; } but then later on li.listing { margin:0; & p{ width: 100% } } overrides it, at least for paragraphs.

— Reply to this email directly or view it on GitHub https://github.com/clayh53/tufte-jekyll/issues/17#issuecomment-154771607.

clayh53 commented 9 years ago

I've made some minor changes and gotten rid of the tufte.css file in the /css folder. It is all displaying correctly for me now on Chrome, Safari, IE11 and iOS mobile Safari

themaikimo commented 9 years ago

My presenting problem is now cleared. Thanks, Clay!