Made a journal page. It's still in the works but it's starting to look pretty snazzy.
I still don't entirely understand what the problem was, but big part of it was that I didn't realize I was the only one seeing the title font (CakeCafe). I have it installed on my computer, so I supposed the browser was able to find it even while my CSS was lacking the proper font-face. (Thanks Skep for helping me figure that out!)
What I don't understand is why the other fonts didn't work even when I had their font-faces and all set up. Or why CakeCafe broke when I made a font-face for it. Oh well. I guess it doesn't matter as long as I can get some fonts to work, right? :'D
So anyway, I put up a new title font, that I think suits the site better anyway, and is easier to read, too! Woo!
Or why they don't work. Heck. I was trying to install a different font for the body, so I was revisiting tutorials of how to add custom fonts on your site, and turns out I never even made a @font-face thing for the title font I use?
Am I the only one who can see the CakeCafe font? Because I sure can see it, for some reason it works.
Well, then I tried to do it by the book and did the @font-face thing, and added a couple of other fonts following the instructions I found, and now the title font stopped working!
The body font changed too, but now I wonder if it never worked and it was using the failsafe font I had assigned, or if it now broke and started using the failsafe. I don't know! Agh.
I just deleted everything I did in the CSS file and went back to how it was, since it looked nicer. I hate it when I don't understand what's wrong 😣
I changed the navigation back into a floating item and took the grid away from the container, since I now understand floats better and I don't get grids as much. It also fixed my problem with the positioning of new textboxes! I thought it might be nice for organisation if on some pages there was several text boxes on top of each other.
I dunno! I'm just trying things out to see what looks nice 😅
I also changed the selected text colors for fun. I got my priorities straight! /lh /j
Try selecting something. Does it look nice? :)
I added an image to the 404 error page, and played around with CSS a bunch. I learned about box-shadows and filter effects! Got some ideas for other page layouts 🤔
I might try something after this!
Just placeholder text on them so far. I also linked them all together.
I couldn't get the hover effects for the navigation to work like I wanted, so I decided to leave them be. It looks nice enough like this. So, I finally assigned the full layout for this index page. Soon, these "logs" will move aside and there'll be some real home page text here instead!
First, I think I'll work on the other pages though, at least as much as to set something up so the links actually go somewhere. It's pretty clear that this blog is still a WIP, but yaknow, I guess I like it to be obvious on the front page 😅
I think I finally got the layout to look how I intended, although I have no idea how I did it.
Now, I would like to animate the navigation tabs in a way that they would extend a little when you hover over them.
I managed to make an underline appear when you hover over a tab, but for some reason, when you hover over one tab, all of them will extend. That's not ideal. But I don't know how to fix it.
The resizing of the browser window now makes the whole thing misalign horribly. I can only imagine how bad it looks on a *bigger* screen than what I have 😅 Uhh I... idk how to fix it in a way that'd look nice on all sizes. I might have to take the responsive resizing away at least for now. Maybe I can make a mobile friendly version sometime separately?
In fact, that might be why the layout looked different on my index page when I tried to implement it 🤔
The index doesn't have the "viewport" meta stuff, but my test page does.
(edit.)
Hmm, I guess there wouldn't be issue with a bigger screen, since the container will still contain where the text box and links are. The problem is just when a smaller screen squishes everything and it pushes the box to the left.
A little more messing around and I got the text box relatively into the center (tho it only works on the test page.. i'll have to figure that out later) and the links to look more or less like I wanted! Now I only gotta figure out how to animate the hover movement how I'd like.
Thank you for Skeb for helping out with the text box situation!
I figured out my header situation. I also started messing around with links and link placements.
I'd like the links to be on the side of this text box, and studying some other pages that do that I noticed they have the text and nav links in one container, so I tried to do that. No surprise, I had problems getting it how I want it.
I want my text box to be in the middle of the page, but with the container, the container goes in the middle, and everything inside it is divided between themselves. So I couldn't figure out how to get my text box to be right in the middle of the page.
Or like. Hm. I have a visual in my mind of how I want them to be kinda like tabs on the side of the text box, and I don't know how to do that. Maybe I have too specific ideas for a total noob and. I'm fine with things being a bit different than I envisioned as long as it works, but also.. I know there's a way to do it like I want and I can't let it go sjhdjdf;;
I have ideas for what I want to put on my site, but I'm still a bit stuck on formatting. I don't know what I should focus on next. I might put my logo up as a header, and first I need to format it properly. I heard that .webp files load faster, but they apparently don't have transparency.
And what about after I have the header figured out? Is it already time to start making other pages and put content up? Or maybe I should just figure out links first even if they won't link anywhere.
I wanted a scrollable text box but I wonder if it takes away some elegance... Making the text feel centered with and without the bar might be tricky.
Also played around with a header but I couldn't stick it to the middle :/
And made a dashed horisontal line bc yippee!
I didn't get it to work so I deleted it all :(
I'll try something else.
My browser wasn't keeping up with the changes I made to the code. Refreshing the page normally didn't help.
Neocities' help center had a solution: I had to use a "hard refresh" (crl+shift+R) to get the changes to update.
And now I even managed to get a bg image working! :D
Obviously I'll need a color bg for my text too since now it's hard to read, but I'll figure that out later methinks.
(edit.) Nvm I figured it out already! xD This is not the style I'll want to keep going forward, but I'll keep it for now while I look for a way that suits me :3