CSS issue - Style not matching GitHub

joeyespo / grip

Preview GitHub README.md files locally before committing them.

MIT License

6.42k stars 423 forks source link

CSS issue - Style not matching GitHub #291

Closed OisinMoran closed 5 years ago

OisinMoran commented 5 years ago

First off, I love grip, so thank you!

I just installed it for the first time on this machine via apt install grip and there was no styling whatsoever when I ran grip -b filename.md. I then checked this repo and saw it says to run pip install grip to install it, so uninstalled and ran that. Now I'm getting styling that is closer to GitHub's but still not quite there (which is an even weirder problem really). I have attached a screenshot in which you'll notice the full border is not there and the padding is too small (probably the same cause).

I have tried grip --clear (does not change anything) and grip -V gives the version as Grip 4.5.2.

Any help would be greatly appreciated :slightly_smiling_face:

Emi1305 commented 5 years ago

The issue seems to be that the URL https://octicons.github.com/components/octicons/octicons/octicons.css returns a 404 Not Found, I wasn't able to find the actual path to the file

OisinMoran commented 5 years ago

Weird! Where is that referenced? Searching in the code I can only find links to https://github.com/joeyespo/grip/blob/master/grip/static/octicons/octicons.css, which does exist.

Emi1305 commented 5 years ago

I saw the request in the browser's develper tools.

I can't check it right now as I'm not on the same computer, but I think I've the version that is available on the Ubuntu repositories, maybe it is outdated

Edit: In fact, I think this is an Ubuntu problem as they're providing version 4.2.0 while the last version available here is 4.5.2. If OP is also using the package provided by Ubuntu I suggest closingthis issue as it does not belong here

OisinMoran commented 5 years ago

I am on Ubuntu, but just checked there and I have version 4.5.2 so unfortunately not fixed by updating.

RuRo commented 5 years ago

Same issue here. I also have version 4.5.2 and missing borders like in the image.

Edit:

I don't think the issue is with octicons.css. Octicons are loading just fine for me.

I am not sure, how exactly grip works, but I've noticed, that grip assigns different classes than github. For example, github assigns Box Box--condensed instapaper_body md js-code-block-container to div with id=readme, while grip assigns readme boxed-group clearfix announce instapaper_body md and many of grips classes don't seem to do anything.

If you rely on github styles, maybe they've changed the API?

jessevdp commented 4 years ago

I'm also having this issue. I just installed grip (like minutes ago) through homebrew. My current version is 4.5.2.

Note the top browser window is showing grips output. The bottom window is showing GitHub directly.