search

cyanharlow / purecss-francine

HTML/CSS drawing in the style of an 18th-century oil painting. Hand-coded entirely in HTML & CSS.
7.74k stars 511 forks source link

How to adjust the Chrome to admire this masterpiece #24

Open zhu-ting opened 6 years ago

zhu-ting commented 6 years ago

Amazing at this masterpiece! But even I have zoom out the Chrome broswer to 25%, I could only see a littile part of it.
I wonder how to admire the whole picture? Thanks. 2018-05-10 11 46 08

cyanharlow commented 6 years ago

@pavilion2t Thank you so much!

So is that screenshot what you see with the zoom at 25%? Ack! That... is weird.

All of the elements are sized with "em"s, which makes them relative to the font sizing. So is it possible that your browser has the default font size set to something much larger? Like in the chrome settings seen below?

image

cyanharlow commented 6 years ago

@pavilion2t Try pasting this into the console and let me know if that shrinks it. If it does, then I think we've got it narrowed down to a font size issue.

var request = new XMLHttpRequest(); request.open('GET', 'francine.css', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { var data = request.responseText; var styles = document.getElementsByTagName('link'); for (var i = 0; i < styles.length; i++) { styles[i].parentNode.removeChild(styles[i]) }; var newPxStyles = document.createElement('style'); newPxStyles.innerHTML = data.replace(/em/g, 'px'); document.body.appendChild(newPxStyles) } }; request.send();

cyanharlow commented 6 years ago

I might just change this to use px instead of em anyway.

I think I had a good reason for using em but now I can't remember what it was.

zhu-ting commented 6 years ago

@cyanharlow Great. I really appreciate your time. I try pasting your code to the console and it returned something like below. I supposed the request.open('GET', 'francine.css', true)are unable to find the file 'francine.css' So I opened the atom editor and replaced all the em with px. As you have expected, it is really a font size issue.
Currently, the picture is a little smaller than normal.

1
cyanharlow commented 6 years ago

@pavilion2t OH, wow I'm an idiot - I didn't provide the full URL in that code I gave - I'm sorry!

But thank you for going the extra mile with your fix, this is good to know! Just in case anyone else is browsing at adjusted font sizes (which I didn't even think to factor in) I have now changed this from em to px in this commit https://github.com/cyanharlow/purecss-francine/commit/b9558c2fc6628e219836e7fd7e791b4354f56784

Ideally now it should look normal while at 100% zoom.