July 19th, 2025: Overhauling my Neocities Website

I'm writing this to recap all the things I've gone through in redesigning my index page (and reorganizing my pages). To break it down I'll divide it into three parts, the initial planning, the execution, and the fixes.

The plan was simple. I wanted to learn how to make a proper responsive site and I want to learn just a teensy tiny bit of javascript to make the sticky notes on my site be draggable. That was most of the plan, really. My site before was very desktop-based and although the viewport sizing does technically work on mobile phones it's not ideal for portrait-based layouts. That said, I'm trying to learn more html for accessibility reasons (I already have plans for the future and it involves making a dark mode). Although I won't be making the absolute best and responsive layouts anytime soon I am trying to take baby steps with a practice-based approach with these things.

Execution is the meat of this blog. The first order of business was redoing the assets of the old index page. This means taking a stroll down Clip Studio Paint's asset market. Why CSP? Because it's easy, I have some leftover Clippy, if I'm lucky I could get assets in a similar style rather than, and lastly the terms of use are very lenient. So long as you're not redistributing the files you're pretty much good. This lets me browse for more assets than I could ever draw.

Second of all is figuring out the layout. I should've brought this up in planning but to be frank it's easier to visualize things when it's right in front of you. I already knew I wanted a book as the background and my ransom letter buttons as, well, buttons. I want to keep the analog feel with the sticky notes and washi tape as well. This meant that I needed to find a way to free-place elements on desktop but snap to a column or grid on mobile for responsiveness.

I turned to other neocities websites to sleuth around their codes. One of those was shishka.neoticies.org. At this point I haven't exactly figured out what "keywords" I was supposed to be looking for in terms of responsiveness. So I went back to the drawing board and asked my friend who knows how to code. He said use media query. That was the extent of it. I didn't know what that entailed so I spent some more days on forums and guides, trying to find the keyword I'm looking for. I'm talking about googling stuff like "gridless responsive website html," "can you make a responsive webpage not on a grid," "free placing elements in html," "how to make absolute-ly divs responsive on mobile," etc etc etc.I know at this point that position:absolute isn't the best way to approach things, hence I was looking for other ways to be able to freely pepper around my buttons while keeping it responsive.

While I was on-off figuring out how to do that, I googled "make draggable windows html" and worked on the sticky notes. This process was quicker and more painless than the other. I used already-made code for draggable windows and tweaked it to the assets I have on hand. It took a couple of tries but this code was ready to go in hours. Back to the layout. I went back to the website I've been eyeing and saw two lines of code that made the whole thing click for me:

@media (min-width:1030px){section{position: absolute;}}
@media (max-width:1029px){section{position: relative;}}

YOU COULD DO THAT???

My coder friend, now on vacation, was not in the mood to talk about anything related to his line of work-Fair. At least now I know what to do in terms of googling keywords. I want to know how far I could push the media query.

So I tried it myself, using the layout I already have on hand. And it fucking worked. My freely-placed divs can snap to a grid once it's on a small screen. I have nobody to share this with so I yell into a discord server void.

Once I was putting everything together, using my old layout, I discovered two things. 1) There was a lot of jank when I was going back-and-forth with the code. At one point I needed to insert a completely transparent image for the layout to work and 2) It is hella crowded in here.

So phase 2.5. Back to the drawing board, I want a cleaner and simple index page, with minimal buttons and draggable assets. Just enough to give is some quirk and personality but not too overwhelming. I turned to pen and paper and realized quickly I needed to re-do the organization for most of my site.

Okay. no biggie. Time to group together buttons. I consolidated poetry, art, OCs, and ransom lettering into "my works," and I put my favorite media, sites/neighbors, and even my shrines under "favorites", What was non-negotiable was the sitemap and blog being on the homepage, alongside two stickies for my status and site updates. Oh, and my "catdya/about page" should be prominent as well.

Using good old physical mindmaps I managed to settle on a layout/organization/pipeline that was doable, quirky, but still readable at a glance. Now we get to the annoying part, putting everything together.

Saying I was tormented by this overhaul is an understatement. I despised this entire markup language and everything it has to offer. I kept going back and forth between screen sizes to make sure everything was responsive. Buttons kept shifting back and forth. And mind you, I do not know how to run localhost on my laptop. I was doing this all LIVE on neocities. My followers all got a full view of my sandboxes and my miniscule edits along the way. This coupled with the fact that I don't use third party software/planners like figma only perplex me even more. WHY I do this to myself is anybody's guess.

Now the line between execution and fixes is blurry, but I'll draw the line here. Here are the things I needed to fix with minimal explanation: background wood color never being quite right, needing to redo all the px sizing into vw because I tested it on my brother's big monitor and it was all jumbled, needing to make two media queries for small and big screens for EACH element because I don't know what the best practice is, fighting with the flexbox, fighting with sizing, fighting with rotation, figuring out whether to put the active tag first or the figure tag first, using sections AND divs to separate the responsive sections with the desktop-only divs, my buttons being slightly different sizes and needing to reconfigure each one. Individually. Each time I'm making a page. Also reorganizing my entire neocities storage library, using negative margins to put the washi tape ON TOP and OVER the sticky note.

Basically what I'm saying is there's a lot of quirky choices I've made and if you point any of them out to me or tell me it's not "best practices" I'm exploding you with my head I'm exploding you with my head I'm exploding you with my head.

Lastly, I needed to sleep this off because It was late at night when I discovered this: using vw to size buttons on desktop is fine until you put that into a responsive template and it becomes SO SMALL. So in the morning I had to abandon my usual "style" tags in the body and instead use media query to set two different vw sizes for mobile and desktop.

Okay, that's the bulk of it. In total it took me 3 days to redesign my site, 4 days if you count thinking about it. I've bothered my dad about it. I've bothered my friends about it. I've also bothered everyone in my life about it.

Now there are more menus to get where you want, BUT the homepage looks nicer and neater with less clutter. Besides, you could always navigate using the sitema-awh man I gotta update that too now don't I.