astro attempt

1. You have to install a bunch of shit - https://docs.astro.build/en/tutorial/1-setup/1/ I'm following this tutorial
2. I already forgor how I installed it
3. Opened up VS Codium
4. Opened up terminal
5. ran ``npm create astro@latest`` as per tutorial
6. gave it a folder to build in ``Z:\sites\big-mountain-fudgecake``
7. said yes to everything like installing dependencies and initializing git
8. choose minimal theme
9. ok the folder is created. open that in vscode

1. run ``npm run dev`` in the terminal to preview your gay site
2. your site preview should be on ``http://localhost:4321/`` by default
3. find ``src/pages/index.astro`` to edit your front page
4. edit it
5. save
6. use the git panel to upload to your github acct lol
7. log into vercel to make a new page
8. deploy that gay shit
9. link domain via porkbun…
10. wait for it to generate SSL certificate
11. ok it's live: https://fudgecak.scumsuck.com/
12. make a new page in ``pages`` called ``about.astro``
13. type some shit in there, copy/paste what was in index.astro
14. Did the markdown tutorial i already know that
15. on the "dynamic content" part so I can add their band roles…
16. doing components so i can make the nav and footer
17. blah blah i dont want a blog tags i just want the RSS using the blog as a RSS feed lol
18. ok it works
19. Skipping the shit about islands, going to the part abt light/dark themes
20. uhh but i want to do the simple one click toggle with dark/light color-scheme meta…
21. whatever I'll learn that later
22. upload dat shit to git (i should get off github some time)
23. it's up i guess https://fudgecak.scumsuck.com/about/

Stylize it tomorrow

I'm copying this guide: Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript by Henry Bley-Vroman

I am specifically using this guide because it uses the default light/dark css themes that don't require any CSS, and allows the user to override it if they want to choose another theme.

I specifically want the ability to change background images, not just background color. I want the default mode to be “dark mode” so there's no “FART”¹⁾. And I want the ease-in-ease-out color transitions to be optional. So this is in my global.CSS:

:root {
  /* dark style, dark = default */
  color-scheme: var(--color-scheme, dark);
  --bg: url('/img/bg.jpg');
  transition-duration: 200ms;
  transition-property: background, background-color, color;

  /* page preference is "dark" */
  &:has(#color-scheme option[value="light"]:checked) {
    --color-scheme: light;
    /* any additional dark styles */
    --bg: url('/img/bg-light.jpg');
  }
    
  /* page preference is "system", and system preference is "dark" */
  @media (prefers-color-scheme: light) {
    &:has(#color-scheme option[value="system"]:checked) {
      --color-scheme: light;
      /* any additional dark styles, again */
    }
  }

 @media screen and (prefers-reduced-motion: reduce), (update: slow) {
    transition-duration: 0s;
  }
}

And this is in my Toggle.astro, which is contained in my SidebarLeft.astro component and makes up my navigation.

/*
 * If a color scheme preference was previously stored,
 * select the corresponding option in the color scheme preference UI
 * unless it is already selected.
 */
function restoreColorSchemePreference() {
  const colorScheme = localStorage.getItem(colorSchemeStorageItemName);

  if (!colorScheme) {
    return;
  }

  const option = colorSchemeSelectorEl.querySelector(`[value=${colorScheme}]`);

  if (!option) {
    localStorage.removeItem(colorSchemeStorageItemName);
    return;
  }

  if (option.selected) {
    return;
  }

  option.selected = true;
}

/*
 * Store an event target's value in localStorage under colorSchemeStorageItemName
 */
function storeColorSchemePreference({ target }) {
  const colorScheme = target.querySelector(":checked").value;
  localStorage.setItem(colorSchemeStorageItemName, colorScheme);
}

const colorSchemeStorageItemName = "preferredColorScheme";

const colorSchemeSelectorEl = document.querySelector("#color-scheme");

if (colorSchemeSelectorEl) {
  restoreColorSchemePreference();

  colorSchemeSelectorEl.addEventListener("input", storeColorSchemePreference);
}