Hnnghhhh. Things are what they are but that doesn't stop me cursing myself for being so stupidly careless

Is it too much to ask for people to sleep earlier so night people (me) can have some gd peace and quiet

I know. Unfortunately I'm a wuss when it's too cold out orz Will just be intermittently perishing until spring

First run in a month and half and feel like I'm going to have a heart attack. This is fine

Ever start something and then realize it looks exactly like something else. Yeah. That's fun.

bro wake up, another official album dropped. a timestamped favorite

I'm angry this was omitted from the official soundtrack. The synnnth

Challenge level: legendary. Words so obscure they don't even have english equivalents: eunoia.world/

I just think aliens should have alien names

One div's blend mode is another div's why-the-heck-isn't-it-working-it's-literally-the-exact-same-thing

Popping in to add that the font-familys were breaking the code because you don't have them applied to a specific selector. For best practice, I'd suggest wrapping them, and all such kinds of notes, in a /* */ the same way you did for that FONTS section header. That'll mark everything between the asterisks as something to ignore instead of leaving them floating and interfering with whatever css you might try to put after—as happened with the scrollbar—and is what Idindin meant by commenting them out.

Incoming wall of text

CSS shorthands

Spacing. Fossa mentioned margin: 0 auto, but you can set specific values for every side, not just symmetrically. Padding uses the same shorthand. margin: 0 auto 30px translates to 0 margin-top, horizontally centered, 30px margin-bottom.

Or margin: 0 10px 20px 30px which translates to 0 top, 10 right, 20 bottom, 30 left.

Other basic ones include...

Font. Instead of separate declarations for font-size: 12px, line-height: 1.5em, font-family, you can do
font: 12px/1.5em georgia, serif. You can include weight and style too with font: bold italic 12px/1.5em georgia, serif. Font-size and font-family are the only two that have to be included for it to work.

Background image, position and size: background: url() center / cover

Fallbacks for variables

color: var(--accent, #000). If --accent isn't defined, then it'll use #000, or whatever you decide to put there. But you can also use another variable for your fallback by doing var(--accent, var(--backupAccent). Small thing, but nifty for things like image areas on profile pages

Standard CSS to Proboards newclasses hack

If you ever feel exceptionally lazy about converting your code to newclass, you can skip 99% of the css conversion by wrapping everything into one newclass. How it works is that [*newclass=.class] is output as <style> .class { and [/newclass] is output as } </style>.

Step one: take your css and run it through here to remove all line and paragraph breaks.

Step two: With that remaining mega block of css, take your very first selector and format it as [*newclass=.yourclass]. Then go to your very last selector and replace its closing } with [/newclass]. You should end up with something like [*newclass=.one] ... } .two {...} .three {...[/newclass].

Step three: profit.

This is also how you set custom keyframe animations in PB. Unfortunately, @import won't work though if you're thinking of importing an external style sheet; I've tried.

width: fit-content

Take a template with two sections side by side. Rather than setting a width for each section and then calculating how big to make the outer div, slap a width: fit-content on the outer div and it'll automatically be as big as it needs to be to fit those sections—handy for cutting down the math and if you later want to resize those columns.

Naming your grid areas with grid-template-areas

For after you've set your columns/rows. Once you've named them, use those names to position child divs. It sidesteps all the column/row numbering and it's super convenient for responsive design. Say you have a template consisting of a header with a two-column section below. Part of that would look like:

.table {
grid-template-columns: 1fr 1fr;
grid-template-areas: 'header header'
'colA colB'; }

.header { grid-area: header; }

Maybe on mobile you want to reorganize it so that the two columns stack in reverse order and the header is now a footer for some reason. Or maybe it's not responsive at all but you just want to rearrange things halfway through coding. All you need to do is reconfigure it like so:

.table { 
.grid-template-columns: 1fr;
.grid-template-areas: 'colB'
'colA'
'header'; }

and voila. That's it.