coryd.dev-eleventy/tailwind.css

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

/*noinspection Annotator*/
::-moz-selection {
  color: theme(colors.white);
  background: theme(colors.purple.400);
}

/*noinspection Annotator*/
::selection {
  color: theme(colors.white);
  background: theme(colors.purple.400);
}

.toggle-light {
  @apply inline;
}

.dark .toggle-light {
  @apply hidden;
}

.toggle-dark {
  @apply hidden;
}

.dark .toggle-dark {
  @apply inline;
}

.icon-inline svg {
  @apply inline;
}

.active {
  color: theme(colors.purple.600) !important;
}

.dark .active {
  color: theme(colors.purple.400) !important;
}

.active:hover,
.active:active,
.active:focus {
  color: theme(colors.purple.500) !important;
}

.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.purple.600);
}

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

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

code {
  @apply text-gray-50;
  border-radius: .25rem;
  padding: .25rem;
}

pre {
  border: 1px solid theme(colors.gray.700);
}

.dark code,
.dark pre {
  @apply bg-gray-900;
}

.tag--button {
  @apply font-semibold;
  @apply py-2;
  @apply px-4;
  @apply mr-4;
  @apply mb-4;
  @apply rounded-full;
  @apply text-white;
  background: theme(colors.purple.600);
}

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

.dark .tag--button {
  color: theme(colors.gray.900);
  background: theme(colors.purple.400);
}

.tag--button:hover,
.tag--button:active,
.tag--button:focus {
  background: theme(colors.purple.500);
}