I haven't had as much time to work on the site over the last week, but I've been putting my new css skills to use for work. So this isn't really an update but just a sort of journal post.

I manage my employer's wordpress using the Elementor plugin. However I've learned that so much of elementor's coding is really bloated. Instead of having a single css file, it creates a file for every post/page, and it's difficult to make bulk changes.

My current task is to migrate/set up landing pages in subdomains, and most of them will follow the same layout but have different colors based on the brand the page is associated with, I'm trying to avoid style rules on the widgets themselves, unless it's a universal rule that would work for all brands. I've found that just giving widgets and containers css id's and classes is giving me a lot of power by setting global css rules for the whole site that I can replicate.

One really fun thing I'm getting to use is nested variables (not sure if "nested" is the right term here, maybe aliases?) where I have a section to identify a brand's colors, then a section to define variables that point to the colors. Like...

/* Define brand color alias variables */ 
:root {
    --hazelbug-dark-purple: #172041;
    --hazelbug-pink: #e4a5d1;
}

/* Define theme variables with aliases */
:root {
    --body-color: var(--hazelbug-dark-purple);
    --accent-color: var(--hazelbug-pink);
}

/* Use variables in stylesheet */
a {
    color: var(--body-color);
}
a:hover {
    background-color: var(--accent-color);
}
    

There's also some other really useful ways to use variables like with text sizing where you can set a text size for your whole document and then reference that size with rem values.

My next personal site changes will probably involve a stylesheet overhaul to avoid repeated and potentially conflicting rules. I want to have a core file in my main directory that is referenced in others, and through this I can employ variables more neatly.