feat: style blog

[deer]

closes #12

I've finally learned enough in order to actually sort this out.

[deer]

I'll create another PR to pull the non-style changes out of this.

[deer]

For anyone who encounters this, the way to style the primary part of the blog is in your tailwind.config.ts:

import { type Config } from "tailwindcss";
import { safelist } from "fresh_blog/mod.ts";
import colors from "tailwindcss/colors.js";

export default {
  darkMode: "class",
  content: [
    "{routes,islands,components}/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        light: {
          background: colors.white,
          foreground: colors.black,
          mutedBackground: colors.gray[200],
          mutedForeground: colors.gray[700],
        },
        dark: {
          background: colors.black,
          foreground: colors.white,
          mutedBackground: colors.pink[700],
          mutedForeground: colors.gray[400],
        },
      },
    },
  },
  safelist: safelist,
} satisfies Config;

If you want to style the generated markdown, then you'll need to add something like this to your styles.css:

@layer base {
  #markdown-body[data-color-mode="dark"] {
    --color-canvas-default: #000000;
    --color-fg-default: #ffffff;
  }
}

This particular example is forcing the markdown in dark mode to match the background/foreground in my theme.