Supposedly, studies say that the ideal width for paragraphs of text is somewhere between 50 and 70 letters wide.

https://baymard.com/blog/line-length-readability

#Wip #Webdev #Design #project_Website

Hugo can automatically generate a table of contents for a page. I've always wanted to do that thing where it sticks to the side and follows you down the page. Stretching the tutorial to the full width of the page would make the paragraphs uncomfortably wide anyway, so I might as well limit its width and use the extra space for the table of contents.

↘ Contains:
#Wip #Webdev #NSFW #Porn #Hentai #Hugo #Design #Css #project_Website

Now to add the background stripes, the paper "stack", and a programming font so you can tell Zeros apart for the letter O

#Wip #Webdev #Css #project_Website

Holy crap, this CSS border-image is so much easier! And I can easily add the background stripes with a single background gradient.

#Wip #Webdev #Svg #Css #project_Website

I could copy and paste everything, but if I want to edit ot later, I'd have to go in and modify the copy too. But it turns out SVG has the ability to mirror things without pasting the same thing twice. This is also super-efficient.

#Wip #project_Website

Now let's create an SVG image like that. Why? Because vector images have infinite detail and ridiculously tiny filesizes. We're talkin' 1KB. They're so small you could fit a thousand of these on an old floppy disk. Even a dial-up modem wouldn't break a sweat loading this.

#Wip #Webdev #Svg #project_Website

Wait... couldn't I just use a border-image? I could combine the SVG parts into a single image, duplicate it, and leave the top bottom and middle blank, so it only draws the border on the left and right edges.

#Wip #Webdev #Css #project_Website

My old site displays code like this. It might look nice, but behind the scenes it's a messy clusterfuck of separate SVG images added as multiple backgrounds and position using finicky percentages. I wanna re-create this... but not like that.

#Wip #Webdev #Css #project_Website

Okay, so apparently I CAN skip the :not() CSS selector because it doesn't matter if some additional images are also floating left. They end up in the same place anyway.

Which means... this suddenly works with browsers from 10 years ago. Epic compatibility achieved!

#Wip #project_Website

That video was literally one minute long, and I already had half of the page done! ... And here's the result after instantly exporting it to HTML. It looks pretty good, doesn't it?

Okay, okay... I did add ONE line to the HTML afterwards. To import the CSS file. But Hugo can automate that.

↘ Contains:
#Wip #Webdev #NSFW #Porn #Hentai #Markdown #Hugo #Html #project_Website

So maybe you're wondering why I'm going to all this trouble just to use MarkDown. What so great about it? Well... look at this video. This is how fast you can throw together a page with MarkDown!

↘ Contains:
#Wip #Video #NSFW #Porn #Hentai #Markdown #project_Website

Okay, I can coerce MarkDown to put the video inside the paragraph tag with the text by putting text just before the video. Such as a stray period. Another slightly ugly hack. From there my CSS can treat it just like an image.

Actually, if I want to be extra-sneaky, I could use a non-breaking-space instead of a period. But somehow the space actually looks more noticeable... at least to me.

#NSFW #Wip #Markdown #project_Website

... Aaaaaaand this part doesn't. Apparently MarkDown doesn't wrap everything inside paragraph tags. Any HTML you add manually such as videos are just included as-is without being wrapped.

#NSFW #Wip #Markdown #project_Website

#NSFW #Wip #project_Website

And sure enough. That works.

#NSFW #Wip #project_Website

I could add extra tags to my markdown by just italicizing a period or something. Kind of a hack, but easy to do.

#Wip #project_Website

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.

#Wip #project_Website

... 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.

#NSFW #Wip #project_Website

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.

#NSFW #Wip #Webdev #Markdown #Html #project_Website

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.

#Wip #project_Website