coryd.dev-eleventy/tailwind.css

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

body {
  --pagefind-ui-primary: theme(colors.blue.600);
  --pagefind-ui-text: theme(colors.gray.800);
  --pagefind-ui-background: theme(colors.white);
  --pagefind-ui-border: theme(colors.gray.200);
  --pagefind-ui-tag: theme(colors.gray.200);
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: sans-serif;
}

body,
html {
  @apply font-sans;
  color: theme(colors.gray.900);
}

.pagefind-ui__form mark {
  color: theme(colors.white) !important;
  background: theme(colors.blue.600) !important;
}

.pagefind-ui__form .pagefind-ui__result-link {
  color: theme(colors.blue.600) !important;
  @apply !ease-in-out;
  @apply !duration-300;
}

.pagefind-ui__form .pagefind-ui__result-link:hover,
.pagefind-ui__form .pagefind-ui__result-link:focus,
.pagefind-ui__form .pagefind-ui__result-link:active {
  color: theme(colors.blue.600) !important;
}

::-moz-selection {
  color: theme(colors.white);
  background: theme(colors.blue.600);
}

::selection {
  color: theme(colors.white);
  background: theme(colors.blue.600);
}

.active,
.active svg {
  color: theme(colors.blue.600);
}

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

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

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

a,
.prose a {
  color: theme(colors.blue.600);
  @apply ease-in-out;
  @apply duration-300;
}

a:hover,
a:focus,
a:active,
.prose a:hover,
.prose a:focus,
.prose a:active {
  color: theme(colors.blue.800);
}

p > a,
span > a,
blockquote > a,
li > a {
  text-decoration: underline !important;
}

code {
  @apply font-mono;
  @apply text-gray-50;
  padding: 0.25rem;
}

pre {
  border: 1px solid theme(colors.gray.700);
  border-radius: 0 !important;
  @apply scrollbar-thin;
  @apply scrollbar-thumb-blue-600;
  @apply scrollbar-track-blue-100;
}

.pill--button {
  @apply !appearance-none;
  @apply font-semibold;
  @apply py-2;
  @apply px-4;
  @apply mr-1;
  @apply mb-3;
  @apply rounded-full;
  @apply text-white;
  @apply transition-colors;
  @apply ease-in-out;
  @apply duration-300;
  background-color: theme(colors.blue.600) !important;
}

.pill--button.pill--button__small {
  @apply py-1;
  @apply px-2;
  @apply mr-2;
  @apply mb-2;
  @apply text-sm;
  @apply inline-block;
}

.pill--button:hover,
.pill--button:active,
.pill--button:focus {
  background-color: theme(colors.blue.800) !important;
}

[data-tablericon-name] {
  stroke-width: 1.4;
}

.icon--bold > svg {
  stroke-width: 2;
}

.link--icon > svg {
  color: theme(colors.gray.700);
  @apply ease-in-out;
  @apply duration-300;
}

.link--icon:hover > svg {
  color: theme(colors.blue.600);
}

.icon--spin > svg {
  @apply animate-spin;
}

.icon--inline > svg {
  @apply inline;
}

.pagefind-ui__search-input {
  @apply !w-full;
  @apply !outline-none;
  @apply !bg-white;
  @apply !rounded-sm;
  @apply !border;
  @apply !border-blue-600;
  @apply !transition-colors;
  @apply !ease-in-out;
  @apply !duration-300;
}

.pagefind-ui__search-input:focus {
  @apply !border-blue-800;
}

@media (prefers-color-scheme: dark) {
  body {
    --pagefind-ui-primary: theme(colors.blue.400);
    --pagefind-ui-text: theme(colors.white);
    --pagefind-ui-background: theme(colors.gray.900);
    --pagefind-ui-border: theme(colors.gray.700);
    --pagefind-ui-tag: theme(colors.gray.700);
  }

  a,
  .prose a {
    color: theme(colors.blue.400);
  }

  a:hover,
  a:focus,
  a:active,
  .prose a:hover,
  .prose a:focus,
  .prose a:active {
    color: theme(colors.blue.200);
  }

  .link--icon svg {
    color: theme(colors.gray.200);
  }

  .link--icon:hover svg {
    color: theme(colors.blue.200);
  }

  .pagefind-ui__form mark {
    background: theme(colors.blue.400) !important;
  }

  .pagefind-ui__form .pagefind-ui__result-link {
    color: theme(colors.blue.400) !important;
  }

  .pagefind-ui__form .pagefind-ui__result-link:hover,
  .pagefind-ui__form .pagefind-ui__result-link:focus,
  .pagefind-ui__form .pagefind-ui__result-link:active {
    color: theme(colors.blue.600) !important;
  }

  ::-moz-selection {
    background: theme(colors.blue.400);
  }

  ::selection {
    background: theme(colors.blue.400);
  }

  .active,
  .active svg {
    color: theme(colors.blue.400);
  }

  pre {
    @apply scrollbar-thumb-blue-400;
  }

  .pill--button {
    color: theme(colors.white);
    background: theme(colors.blue.400);
  }

  .pill--button:hover,
  .pill--button:active,
  .pill--button:focus {
    background: theme(colors.blue.200);
  }

  .pagefind-ui__search-input {
    @apply !border-blue-400;
    @apply !bg-gray-900
  }

  .pagefind-ui__search-input:focus {
    @apply !border-blue-200
  }
}