Hmm... that gold "items" icon at the top contrasts very nicely against the green. What if I used that color? It's not as bright as white, but it could work for links if I keep them underlined. The gold also looks good as a title color. In fact, it looks great against both colors. I guess my website has a 3rd color now. (I count beige as a "neutral" tone.)
No wonder that gold color looks so good. It's an "analogous" color, which means it's near both of those other colors on the color-wheel. Therefore it looks good next to both of them.
I plan to organize the CSS by having each file represent individual things on the page, but not the page itself. So any page with a gallery on it will link to the gallery CSS and the thumbnail CSS. But most of the website's appearance is the same everywhere, so most of the details are in the website's global CSS file. The seperate files are mostly just minor adjustments. That's the key using CSS. Keep the design consistent and only load what you need.
Some people might be annoyed by lots of animation, but that's a thing that CSS can check for.
As a rule of thumb, I try to make my website backward compatible with older web browsers instead of just the newest (and expensive) devices. I still have a 10 year old phone kicking around that runs Android 4. The phone still works perfectly, so I'll test it against that.
Ooh nice! Google Chrome for Android 4 can handle CSS Grid. That was the only potential compatibility issue I was worried about. I guess I can just make my site however I want.
I decided to switch to a vector font after all, because the pixel font's native size was too small to read comfortably, and increasing the size made it blurry. At that point I'm better off using a vector font.
I'm having tons of fun re-creating my fancy thumbnails with the new style, but... it's 5:00 in the morning. Maaaaybe I should consider eating or sleeping.
So I'm figuring out the navigation links at the top of the website, and trying to figure out if I could seamlessly turn them into a side-bar when the website gets wide enough.
After messing around with Flexbox and CSS Grid for awhile, I remembered something. Floats! They make text flow around pictures. But since anything that's "inline" will flow like text, I could make the navigation links "flow" around the entire website.
... I can't decide if this is really clever or really stupid.
I'm leaning toward... "stupid"
The website's width changes instantly when you tilt your phone to landscape mode, so I don't actually need a transition. I could just use a breakpoint. Besides that would give me more control over the appearance.
But I also have another idea...
I could break the navigation into 2 lists and have the "extra" list appear on wide screens. But that means phones would see fewer links for the sake of a cleaner layout.
Nothing motivates me like adjusting things. Writing the CSS for this website is getting dangerously addicting. I've stayed up til 5:00 in the morning more than once now.
God damn I love animation!
Don't worry, the sidebar also respects the user's "reduced-motion" preference, so all the fancy animation is optional. That also includes all the backgrounds that slide over each other.
Even with a page-generator, I don't want it to just paste the navigation onto every single page. If I change the navigation I'd have to replace ALL the pages and reupload them. Instead I think I'll just put iframes on every page. Links inside them should be able to change the parent page by using target="_top"
Now the question is whether I can make them look seamless. Can iframes have transparent backgrounds? I don't remember.
Apparently they're already transparent by default... but only IF their page loads successfully. Failing to load a page displays a browser-generated error page with a solid color.
Hmm... it doesn't look like there's any way for CSS to hide iframes that fail. I thought I could be clever and detect a default SPAN tag inside the iframe tags, but that only displays on VERY OLD browsers that don't support iframes. And I don't want to rely on JavaScript.
But maybe there's a design solution.
Many websites have banners, colored rectangles stretching across the entire page.
A failed iframe looks like a solid background color with error text in the middle.
But what if you could not see the middle?
A narrow iframe with no scrolling, would just show the solid color at the top.
Just like a banner.
I can disguise failed iframes as banners!
It seems to be a lot simpler to lay out 2 iframes than to have the actual header and navigation links all on the same page. Then again, maybe that's just because this is my 2nd time doing this and the technique is still fresh in my mind?
Hmm... somehow the new website looks "flat" compared to the old one. The old website's blurry background helps the stuff in the foreground stand-out but it also creates a sense of depth.
Sure enough, adding a slight blur to the new website's background makes the buttons and things "pop" forward just a bit.
See that space on the right? That gives touchscreen users a spot to drag their thumb to scroll the page. You need that if other parts of the page can scroll too, such as textboxes with stories in them.
Now to figure out how the project pages will look. Games, pictures, tutorials, stories. Some of these can share the same layout, but some are different. When I'm trying to come up with ideas, messing around with tools tends to distract me. I think better with pencil and paper.
I was also looking at a picture of my old website from 2012. This old 2-panel layout might not be practical on smart phones, but I always liked the way it looked. Maybe I'll try something like this again for large screens.
These ugly sketches are the most important work I've done on this site. They're plans. The best tools in the world are useless if you don't know what you're trying to make.
I think I have a good idea of what I want to do now. Putting information underneath a picture tends to look nicer, but a text story should have the information at the top so you can scroll the page normally to see the entire story. Tutorials would work in a similar way.
The website I currently have online puts the information on the side when possible, but that leaves this big gap on the side when you're reading. I want to avoid that.
Alright, I did the basic layout for a "visual" project. I still need to add styles to some of the informaiton itself like the controls, pairings, updates, license, etc...
It turns out that CSS Grid isn't quite the silver bullet I expected. I still had to wrap the information to create these 3 parts. But the rest was all CSS.
The reason why those Download icons on my site are so far apart is because I set a minimum touch-size for all the buttons so you can easily tap them on a touch-screen. There's a rule-of-thumb that buttons on a touch-screen should be at least 0.4" inches in size to make it easy to tap. It looks slightly bloated on the screen, but I tested this on my phone and it seems to be true. I definitely wouldn't want to go smaller.
https://adrianroselli.com/2019/06/target-size-and-2-5-5.html
Some of my projects have a lot of downloads. There's no guarantee that all of them will comfortably fit inside a thumbnail. But that's not a problem. Just display one, and reveal the rest when you hover over it.
Maybe I should animate the rest of them flying out to the right, from the single icon.
Girl in a sexy pose I've sorted out the game controls, pairings, and license.
I even figured out a CSS trick to recolor the background images for the license permissions. The trick is to give something multiple background images. Set those images to be a gradient and a grayscale image. Then set the "background-blend-mode" so that the gradient has "color" blending and the grayscale image can be "normal". The gradient overlaps the grayscale image, which means the color of the gradient gets applied to the image behind it.
Girl in a sexy pose Text projects don't give you anything visual to look at, so I display the thumbnail image next to the main information. Of course, on smaller screens showing it is not a priority. But on wide screens there's room to fit things next to each other, so I added a few CSS breakpoints. And if you want to test a website on REALLY tiny screens, just open Chrome's "Reading List" sidebar and shrink the window. It will probably look ugly, but the important thing is that it's still useable.
Hmm... my thumbnail gallery needs a background. I can't just have them floating against nothing.
This dark emerald looks really nice, but it doesn't match anything.
I just can't ignore it. The new website STILL looks flat. There's just something excellent about the old website's background. It's not just blurry but also large, so it contrasts and makes everything stand out. There's a reason why I have kept using it for the past few versions of my website for over a decade.
If this background is so great, where did it come from? Well that's kind of a funny story. I saw some awesome artwork, but I didn't want to steal it, so I kinda... "derived" it into something super abstract.
But part of me wants to use pixel-art everywhere. As a test let's try a background from Final Fantasy 6. Normally you want to avoid ever blurring pixel-art, but as a background it does create the right contrast. But the blurry pixels look tacky.
If I'm changing the background anyway, maybe I can just use the old one for the thumbnails.
Let's try adapting the old background to the new color scheme. Hmm... the Chrono Trigger beige colors makes the whisp pattern look like a sea of jizz. Gross. I don't like it. Brown and green are still a better color combination.
Pure green looks too... artificial. But I want to avoid adding yellow to the greens because yellowish-green only looks good on plants.
So let's shift the colors in the other direction toward blue. Yes! This looks very nice against the reddish-browns. I think this finally looks like an improvement over the old site. It's hard to compete against myself. That guy had a 10 year head-start!
So I had this whole clever thing going with the comic pages displaying inside an iframe, autosizing the images to fit, with anchor links to scroll-advance the page by just clicking on them. But I figured I still needed to add proper navigation links to each page.
But then I realized something obvious. Just put everything on the SAME PAGE. You don't need navigation links if you can just scroll. After all, if it works for text stories it will work for comics. This isn't a "story" layout, it's a "scrolling" layout.
It would be different if the comics had hundreds of pages.
NSFW (licking pussy) I do use iframes for RSS feeds. I did that on my old website too. Originally it was because I was storing all the update announcements on Twitter and my old website was pulling them in and displaying them. Later I switched to using RSS Feeds so I wasn't relying on any external websites that might go down later. An iframe gives me a lot of flexibility. I tend to add updates independently from the projects themselves.
Another reason why I store my website's project updates as RSS feeds is because it's a standard format. Anything can read it. Not just my website. There's also a clever trick you can use to make a browser display a feed like a webpage instead of a bunch of text. Use an XSLT stylesheet. It's basically a real-time templating language that everybody has forgotten about. Every browser already supports it.
Nude woman, Furry This new blog design for my site is looking classy. Same old pages with a new coat of paint.
Those Hash marks are anchor links. You can right-click them to get a link that will jump to that exact spot on the page. My old site has them too. Normally each one is only visible when you hover over a heading or paragraph. I got the idea from GitHub. Later on I'll change these to use little "linked chain" icons.
Humbird0 Makes NSFW
@humbird0@aethy.comNaked girl I'm also starting to design CSS for my old tutorials. I have intentionally tried to keep their HTML simple over the years in order to make redesigns like this easier. But I still occassionally threw in a few unique tags here and there. For now I'll just make them bright red and figure out how I want them to look later.
One of the reasons I want to try a static site generator is so I can write these things easily using MarkDown and the generator will convert it into HTML for me. One way to ensure the HTML stays simple is to have something else write it for you.
NSFW (licking pussy) I plan to give the thumbnails 2 clickable areas. Clicking the image just displays the picture directly, and the "more Info" button takes you to a page talking about the picture. People might naturally click on the picture, but it might not be obvious that these are 2 different links. One way to show what's clickable is to highlight things when you hover over them.
Not gonna lie. I'm starting to feel a little burned out from working on this thing for 2 weeks straight. It's fun, but another project might be a good change of pace.
Girl in a sexy pose After way too many failed attempts I finally figured out how I want to handle random window sitters. Making a picture sit on top of a window is easy, but the "random" part took hours to figure out.
CSS does not do "random". Not even a little bit. But it CAN do staggered rules, which sometimes overwrite parts of one pattern with another pattern, breaking it up enough to look convincingly random. I might throw in some optional JavaScript to randomize the --seed CSS variable to make every page look different. The idea is that I'll still have a convincing effect if JavaScript fails to run.
I just realized I could have used separate images. The CSS Sprite trick I'm using is completely uneccessary. All of the "randomness" actually comes from those nth-child() selectors. Nothing else.
I finished adding the window sitters. Making little scenes looks much more interesting than having individual characters just sitting there. Sometimes it looks a little too busy when a tutorial has all of its steps collapsed, but most of the time they're spaced apart well. I decided to use a CSS sprite after all because that lets me shuffle them all using a single CSS variable and a tiny amount of JavaScript. I kept them tame because I want the spicy stuff to have content labels to warn people before they see anything.
Girl in a sexy pose I decided to figure out the disclaimer. The behavior is similar to my old website. Push the page down, and disappear when you click on it. The difference is that this is 100% CSS. I might add some optional JavaScript later to prevent displaying it if you've already seen it.
Girl in a sexy pose The trick is to overlap it with an invisible checkbox. When you click the checkbox, CSS hides the iFrame next to it... and also the checkbox itself.
The + selector allows CSS to detect things that are next to each other. For example...
.checkbox:checked + .disclaimer{}
This will affect the disclaimer when the checkbox is ON
As for the design... it's counter-intiutive, but it's actually less annoying to push the entire website down, than to overlap anything. Overlapping is basically a pop-up, which is annoying because it gets in the way of seeing or clicking things. Since a disclaimer can't realistically filter visitors anyway, just make it noticeable but unobtrusive. It's just a heads-up warning.
But I don't want it there permenently "polluting" the page's design either, so clicking gets rid of it. CSS has no way of detecting repeat visits, so I'd need JavaScript to keep it from showing up again next time. But the worst case is if JavaScript can't run, the disclaimer just displays normally. Nothing breaks.
I might have gotten ahead of myself. Although I was able to make my existing blog posts and tutorials look good on the new website, I completely forgot that I wanted to use MarkDown to create these. That's part of the reason why I'm making my new website this way. Hugo will automatically convert MarkDown files into HTML when it generates a website.
MarkDown generates much simpler HTML. It puts everything inside paragraph tags, even images. I don't get to wrap things in span tags with special class names (without making the MarkDown very ugly.) Is it possible for me to create equally nice results with what MarkDown creates?
Masturbating woman Well let's see what I need to accomplish.
- Headers
- Text by itself
- Images next to text
- Full-width images
- Sets of images
Making sets of images automatically arrange themselves like Twitter is tricky. When there's an odd amount of pictures I want the last one to fill the width. But at the same time I don't want images to expand when they're next to text. The hard part is that CSS can't detect the text as a separate thing if it's not wrapped separately. But using some weird flexbox wrapping logic I somehow made it work anyway. There's just one problem... this only works on the latest versions of Google Chrome and completely breaks on Firefox.
The problem is that the :has() keyword in CSS is still too new and experimental.
Unacceptable!
We're floatin baby!
I got it to work using floats and even weirder CSS logic. This will work in browsers from 2 years ago. If I wasn't relying on that :not() keyword, this would work in browsers from 10 years ago. Even so I count myself lucky that I got it working at all. This is the price I pay for using MarkDown.
I will also have to be very careful with image margins or the pictures will wrap.
It should be fine.
Do the other websites do it this way? Fuck no. They wrap their tags inside tags with even more tags, burying things 50 layers deep. I'm not even exaggerating.
Porting over the new CSS was easier than I thought. And you can still give them a fake "margin" if you make their width less than 50% and float the odd-images to the right. This works reliably at all window sizes.
Naked girl Let's try rewriting one of my old tutorials in MarkDown and see if it comes out right.
On the left is the original tutorial. In the middle is rewritten markdown. On the right is a simple MarkDown preview.
Naked girl ... Not quite. Huh, why isn't the picture sitting next to the text? It worked in my tests.
On the left is original tutorial on my old website. In the middle is a preview of the tutorial rewritten in MarkDown. On the right is the HTML result generated from the MarkDown.
Oh wait... I added an anchor link in my tests. The CSS was detecting it. That's how it knew the image was not by itself. The CSS was not detecting the text. It was detecting the tag of the anchor link.
@humbird0
I have opinions about disclaimers.
Nevermind the typical boilerplate crap about "under 18" yadda yadda... Instead, I'll take a step back and think about its purpose. What specific problems am I trying to prevent?
There's no point telling people what "the law" is if I don't even know what country they're from. Shaking my cane telling kids to "Git off ma NSFW lawn!" ... is not going to change their minds. Talking down to kids only makes them spiteful. If someone is genuinely new to the concept, I can't realistically cram an entire sex-ed lesson into 2 sentences. My website is for fiction, not education.
So what can a disclaimer accomplish? Since it can't prevent anything, the only useful thing it can do is warn people that a sexy website is gonna be sexy.
And that's not pointless. I choose to have a disclaimer for the same reason I have content labels. I appreciate labels. They help me find things I'm looking for, and avoid things I don't want. That helps everybody.
