blog.z0x.ca/src/styles/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'Geist';
  src: url('/fonts/GeistVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMonoVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 80.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 80.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 80.1%;
    --accent-foreground: 0 0% 9%;
    --additive: 112 50% 36%;
    --additive-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --additive: 112 50% 36%;
    --additive-foreground: 0 0% 9%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }

  *,
  *::before,
  *::after {
    @apply border-border;
  }

  html {
    color-scheme: light;
    @apply bg-background text-foreground;

    &.dark {
      color-scheme: dark;
    }

    ::-webkit-scrollbar-corner {
      @apply bg-transparent;
    }
  }

  .disable-transitions,
  .disable-transitions * {
    @apply !transition-none;
  }
}

@layer components {
  article {
    @apply prose-headings:scroll-mt-20 prose-headings:break-words prose-p:break-words prose-a:!decoration-muted-foreground prose-a:underline-offset-[3px] prose-a:transition-colors hover:prose-a:!decoration-foreground prose-pre:!px-0 prose-img:mx-auto;

    .katex-display {
      @apply overflow-x-auto overflow-y-hidden py-4;
    }

    /* Removes background from <mark> elements */
    mark {
      @apply bg-transparent;
    }

    /* Blanket syntax highlighting */
    code[data-theme*=' '] {
      span {
        color: var(--shiki-light);
      }

      .dark & span {
        color: var(--shiki-dark);
      }
    }

    /* Inline code */
    :not(pre) > code {
      @apply relative rounded bg-muted/50 px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium;
    }

    /* Code blocks */
    figure[data-rehype-pretty-code-figure] {
      @apply relative;

      /* Code block titles */
      [data-rehype-pretty-code-title] {
        @apply break-words rounded-t-xl border-x border-t px-4 py-2 text-sm font-medium text-foreground;

        /* Remove top margin from code block if a title is present */
        & + pre {
          @apply mt-0 rounded-t-none;
        }
      }

      /* Code block styles */
      pre {
        @apply static max-h-[600px] overflow-auto rounded-xl border bg-secondary/20 py-4 text-sm leading-loose;

        /* Code block content */
        > code {
          @apply whitespace-pre-wrap;
          counter-reset: line;

          /* For code blocks with line numbers */
          &[data-line-numbers] {
            > [data-line]::before {
              counter-increment: line;
              content: counter(line);
              @apply mr-4 inline-block w-4 text-right text-muted-foreground;
            }
          }

          /* For each line in the code block */
          > [data-line] {
            @apply px-4;
          }

          /* Highlighted lines */
          [data-highlighted-line] {
            @apply bg-foreground/10;
          }

          /* Highlighted characters */
          [data-highlighted-chars] > span {
            @apply bg-muted-foreground/40 py-[7px];
          }

          /* Diff lines */
          .diff {
            &.add {
              @apply bg-additive/15;
            }
            &.remove {
              @apply bg-destructive/15;
            }
          }

          /* Copy button */
          > button:has(> span) {
            @apply right-0.5 top-[3px] m-0 size-8 rounded-md bg-background p-1 backdrop-blur-none transition-all;
          }
        }
      }
    }
  }
}