search

jdan / 98.css

A design system for building faithful recreations of old UIs
https://jdan.github.io/98.css
MIT License
9.01k stars 299 forks source link

X only sometimes shows up in top-right corner button? #98

Closed BalooRJ1 closed 4 years ago

BalooRJ1 commented 4 years ago

Hello,

I am using 98.css locally hosted on my website here on Neocities. I was initially using the remote css file but that seemed to make my website not loadable. Anyway, I downloaded the local files from the website and uploaded them to my own. Placed the proper files in their place, fonts included. Everything works except for some reason I can't for the life of me figure out, the X logo in the top-right corner of a dialog box generated with 98.css doesn't seem to appear. It appears on only one page of my website: https://baloo.neocities.org/WebsiteResources.html, and on none of the others. But I can't seem to distinguish any code difference with my Web Navigation bar using 98.css Does anyone know if I am doing something wrong, or is this just some sort of glitch? Thanks so much.

juanigaray commented 4 years ago

I think I found out why. Your close button is available: https://baloo.neocities.org/icon/close.svg but it isn't being accessed. If you use the inspector you'll see that in the docs page the close button has this background: 

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");

whereas your page has 

background-image: svg-load("icon/close.svg")

I can't delve any deeper into it rn but did you build the CSS before serving it? As in:

You can run a build manually with npm run build. This will write to the dist/ directory.

BalooRJ1 commented 4 years ago

Thank you for the reply! I actually didn't build the CSS to my website, I merely downloaded the ZIP file and dragged and dropped the files into my website's database on Neocities...which is probably why it did not generate a proper style.css sheet. I was under the impression that the style sheet could merely point to where I had the svg files in the icon folder and populate them in. I'll have to take another look at that. Thanks again for the feedback.

juanigaray commented 4 years ago

Hi, @BalooRJ1 ! I'll close this issue if that's OK with you. Were you able to build and deploy the css?

BalooRJ1 commented 4 years ago

Hi Juan,

I have not gotten around to building the CSS on my website, but this can be closed for now as you have given me sufficient information to fix the problem. Thanks so much.

BalooRJ1 commented 4 years ago

Got help with this, it was fixed. Had to replace "svg-load" in the style.css file with "url" to load the icons.