ArimaMary's Site Homepage 2.0 Postmortem

Post mortem? I haven’t written one of these in a couple of months.

A completed project I want to write about. I think it should be the new homepage for my main site. Here’s an image of the final result.

It’s hard to believe and even more to say that it wasn’t done with a layout generator. This layout was done by hand, on a code editor. I didn’t have an idea what I wanted this new homepage to look like so I stayed in front of VSCodium and tested several ideas on the stop.

It started with a two column layout where the sidebar was at the left. Ah yes, I should first link to Kalechip’s flexbox layout. Without it, this project wouldn’t have been possible. Back to topic, these two columns were similar to the layout on my status.cafe. I forget what sections that sidebar had. Hmm, I think it was the status.cafe embed and the social media icons. I tested the sidebar without any borders and just separated it with a dotted line. Didn’t like it.

Eventually, I considered using flexbox on the whole file as well as the newsfeed and changelog, similar to my current homepage on my NSFW site. I believe by that point I moved the sidebar to the right.

Oh, a change I wanted to implement going to this revamp was removing the iframe displaying the guestbook. I had taken inspiration from Azure Mist’s site. Then I saw another site using a sign the guestbook button and wanted to use that. It took some work but I found a button I liked. There aren’t that many! (I think). Anyways, that was one of the initial changes I made on the page. In addition, I added a Newsfeed section which is inspired by nami’s site. Mine is an archive of toots (Mastodon posts). I also created an archive with all updates from the past year, toots and site updates. I had already done this on my NSFW site so I just copied the code over. Very convenient!

In hindsight, this ordeal can be divided into two sections: HTML and CSS. The new sections are HTML and the layout is CSS.

For the layout, I struggled with the number of columns. I was sure I needed at least one sidebar but I didn’t like how it looked. There’s just something about the lack of symmetry that makes them unacceptable as part of my space. I don’t think I got the idea of making my neighborhood into a sidebar until way late into the process. I think it was Aid’s site that led me to try that as well as aBunnsLife three column layout.

So I went from a left sidebar to… wait I actually started from a right sidebar to a left sidebar because I didn’t like how my eyes flowed from the right sidebar when I had to read from left to right. So I moved the sidebar but didn’t like the look either. After some agonizing, I went for the three column layout and when it clicks, it clicks. I had found the golden ticket! That was IT. The flexbox for the newsfeed and changelog… Oh my god, I also tried to put the changelog on the sidebar but the matching styling on two different places looked horrid. It was then that I tried putting them side by side which was a struggle. I ended up scrapping that idea altogether and just had them one after the other. That in turn also made the older updates button make sense because it leads to a page related to both blocks.

The buttons gave me a bit of grief. I considered mimicking petrapixel and her button beside her intro but didn’t dare. The sidebar would have been a good option but after I added the ones I intended to (People’s Pledge and validators) I realized they were all the same size so they should go together. Thud I switched Responsive Web Directory’s 88x16 with an 88x31. I moved them to the bottom of the main section and BAM, the pieces fell to place. Debtdeath’s mobile friendly button was a last minute addition. I worked really hard to make this site responsive and I wanted others to know! Although it was mostly because I had seen some sites that say their sites are best view on a desktop. Well, mine isn’t! 😂

While not related to this project, I did touch on another page. I wanted to add flexbox to my About page but it didn’t work. I couldn’t figure out why so I gave up. At least I added semantic tags so that’s a win on my book! (´ ∀ ` *) .

What else~? I think this is a good place to shout out the several personal sites I looked at that haven’t mentioned yet. pomnavi, Oaaky’s World, The Museum of Xandra.

After I had my base layout, I tried several ways to display each section. I was vehement about keeping it minimal so I tried going borderless but eventually settled on zhongvie’s card style. It was tough to mimic that style with a much smaller color palette but somehow I managed. The hellbent on giving a background with that specific for each subtitle, another nod to my status.cafe design. Also the shadow gives it the slightest bit of a pop to an otherwise minimal card design and I think it looks really pretty on dark mode (≧◡≦) ♡. Now that I had caved to the need of using borders, I changed the styling of the text webrings to a dashed border and removed the background.

I think that’s all I have to say about this undertaking. Thanks for reading!