Small Web September Check-In 2: Recs and Resources

[enchantedsleeper]

Our second Small Web September check-in point is here!

How is everyone getting on so far with their SWS-ing (hat tip to lovesgaze for making SWS into a verb 😂). Is the code (or blogging, modding, documentation, etc.) behaving as it should? Have you discovered any cool new tricks or come across any great sites you’d like to share?

The theme of this check-in is recs and resources! There are lots of great guides, tutorials and examples out there to help with our small webbing. So, I thought we could share some of our favourites in the comments - along with what you’ve been up to since our last check-in, if you feel like sharing it!

Here’s some examples of things you could share:

• ‘How to code X feature/design element’ tutorials
• Cool templates or layouts
• Gif, blinkie, button or banner-maker tools or websites
• Directories, webrings or blogrolls for anything small web-related
• Communities (like this one! – but they can be anywhere, not just on Dreamwidth) for small web support, resources or discussion
• Inspiring examples of sites, blogs, or other small web projects that you’ve come across
• Any round-ups of links like these or anything else you’ve found helpful!

A bonus discussion-starter (optional, so no pressure to answer this!): What has been the most useful small web resource you’ve found so far? Or, is there a resource that you really wish existed, but doesn’t?

As a reminder, this is the second of five ‘check-in’/comment points that will be published during the event – you can check out the schedule and dates for these posts in the event intro post. There’s no cut-off point for leaving comments on these, so you can add something at any time – you also don’t need to comment on every one or do them in order! The themes are a loose guide, but all discussion is welcome.

For the previous check-in/goals post, check out: Small Web September Kick-Off/Check-In 1: Goals

Comments

[enchantedsleeper]

I used the contrast checker tool recently to make sure that my fic pages still had good contrast after fiddling with the background and text colours slightly. It's a great tool to make sure any aesthetic changes you make are still accessible!

added a dark mode to the fics site and a light mode to the craft site, toggled based on system/browser preference (was NOT on the todolist)

I really want to implement this! Though, ideally it'll be as a toggle on fic (and meta) pages that people can switch back and forth independent of browser preference. Question, did you have to set an alternate colour scheme for your site to act as a dark/light mode for it to work? I had a go at implementing the one-line CSS/HTML that's meant to accomplish this but it didn't work, and I'm wondering if that's why...

[le_gaosaure]

Nice to know that the contrast checker is useful ♥

As for the dark/light mode:
- if you want a toggle, you'll have to use JavaScript. I personally decided I wouldn't put anything I couldn't code from scratch on my site, which is why I went with the system/browser preference thing given it works with CSS only.
- to make this work, I used CSS variables for all the colors in my theme (it can work with images too if you have some), and defined another value for each variable when the mode is not the default one. For example, on my fic site the default theme is the "light" one, so I wrote this in my CSS:

:root {
--bgcolor: #D9D9D9;
--textcolor: #424242;
--linknewcolor: #0000E0;
--linkvisitedcolor: #551A8B;
}

@media (prefers-color-scheme: dark) {
:root {
--bgcolor:#424242;
--textcolor:#D9D9D9;
--linknewcolor:#91BFFF;
--linkvisitedcolor:#CDADF0;
}
}

The "root" element says that the variables work everywhere in the HTML pages. If your default theme is the "dark" one, use "light" in the media query =) Then wherever I used a color in my CSS, instead of using a color name or value I used var(--variable), for example

a:link {
color:var(--linknewcolor);
}

Hope this helps?