tailwind.css

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

pre {
  /* this is to avoid background colour in mermaid diagrams */
  --tw-prose-pre-bg: rgba(255, 255, 255, 0);
}

.paginator-text {
  @apply text-gray-600 font-bold py-2 px-4;
}

.post-tag {
  @apply inline-block text-xs rounded-full py-2 px-4 mt-1 mr-1 bg-gray-300 dark:bg-gray-500;
}

.header-anchor {
  text-decoration: none!important;
}

h1 > a.header-anchor {
  font-weight: 800;
}

h2 > a.header-anchor {
  font-weight: 700;
}

html {
  background-color: rgb(255, 252, 240); /* alabaster */
}

html.dark {
  background-color: rgb(0, 0, 0);
}

html mark {
  background-color: yellow;
  color: var(--tw-prose-body);
}

html.dark mark {
  background-color: rgba(238, 255, 0, 0.24);
  color: var(--tw-prose-body);
}

/* Shiki alternate between light and dark colour themes */
html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

/* Shiki code line diffs */
.shiki span.line.diff.add,
.shiki span.line.diff.add span
{
  background-color: rgba(16, 185, 129, 0.14) !important
}

.shiki span.line.diff.remove,
.shiki span.line.diff.remove span
{
  background-color: rgba(244, 63, 94, 0.14) !important
}

/* Copy code buttons on code blocks */
/* https://junges.dev/2-how-to-add-github-copy-to-clipboard-button-on-your-docsblog */
pre[class*="shiki"] {
  position: relative;
  margin: 5px 0;
  padding: 1.75rem 0 1.75rem 1rem;
}

pre > .button-copy-code {
  position: absolute;
  top: 32px;
  right: 16px;
}

@media only screen and (max-device-width: 480px) {
  pre > .button-copy-code {
    display: none;
  }
}