blakerain.com/style/main.css

@import "tailwind.css";

:root {
  --toggle-size: 2rem;
  --primary-color: #13304e;
}

@layer components {
  body {
    @apply bg-white text-neutral-800;
    @apply dark:bg-zinc-900 dark:text-neutral-200;
  }

  .button {
    @apply inline-flex items-center justify-center;
    @apply border border-transparent rounded-md;

    @apply px-4 py-2;
    @apply text-sm;

    @apply text-neutral-200 hover:text-neutral-100;
    @apply disabled:text-gray-400 dark:disabled:text-gray-800;

    @apply bg-primary;
    @apply disabled:bg-gray-200 dark:disabled:bg-gray-600;
    @apply active:bg-primary-light;

    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-opacity-50 focus:ring-primary;
    @apply transition;

    > svg {
      @apply mr-1;
    }
  }

  label {
    @apply font-semibold;
  }

  select,
  input[type="text"],
  input[type="number"],
  input[type="password"] {
    @apply border-primary rounded-md;
    @apply disabled:border-transparent;

    @apply text-neutral-800 placeholder:text-neutral-300;
    @apply dark:text-neutral-200 placeholder:text-neutral-500;
    @apply disabled:text-gray-400 dark:disabled:text-gray-800;

    @apply bg-white dark:bg-zinc-800;
    @apply disabled:bg-gray-200 dark:disabled:bg-gray-600;

    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-opacity-50 focus:ring-primary;
    @apply transition;
  }

  .input-icons {
    @apply relative;

    svg:first-child,
    svg:last-child {
      @apply pointer-events-none absolute top-1/2 -mt-2.5 text-gray-300 dark:text-gray-500;
    }

    svg:first-child {
      @apply left-3;
    }

    svg:last-child {
      @apply right-3;
    }

    select,
    input[type="text"],
    input[type="number"],
    input[type="password"] {
      &.icon-left {
        @apply pl-10;
      }

      &.icon-right {
        @apply pr-10;
      }
    }
  }

  .toggle {
    @apply block relative cursor-pointer;

    width: calc(2 * var(--toggle-size));
    height: var(--toggle-size);

    &.active {
      .toggle-background {
        @apply bg-slate-800 dark:bg-indigo-300;
      }

      .toggle-inner {
        right: 0rem;
      }
    }

    .toggle-background {
      @apply absolute bg-slate-300 dark:bg-gray-600;

      width: calc(2 * var(--toggle-size));
      height: calc(0.5 * var(--toggle-size));
      top: calc(0.25 * var(--toggle-size));

      border-radius: calc(0.5 * var(--toggle-size));

      transition: background-color 0.125s ease-in-out;
    }

    .toggle-inner {
      @apply absolute bg-white;

      width: var(--toggle-size);
      height: var(--toggle-size);
      top: 0;
      right: var(--toggle-size);

      border-radius: calc(0.5 * var(--toggle-size));
      border: 1px solid rgba(0, 0, 0, 0.25);
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);

      transition: right 0.125s ease-in-out;
    }
  }

  .tooltip {
    @apply absolute z-10 w-max max-w-xs min-h-fit p-4;
    @apply text-sm text-center text-neutral-50 whitespace-pre-wrap;
    @apply bg-primary border border-primary rounded-md shadow-md;

    &:after {
      @apply absolute w-0 h-0;
      content: "";
    }

    &.top {
      @apply bottom-full left-1/2 -translate-x-1/2 mb-4;
      &:after {
        @apply top-full left-1/2 -ml-4;
        border-left: 1rem solid transparent;
        border-right: 1rem solid transparent;
        border-top: 1rem solid var(--primary-color);
      }
    }

    &.bottom {
      @apply top-full left-1/2 -translate-x-1/2 mt-4;
      &:after {
        @apply bottom-full left-1/2 -ml-4;
        border-left: 1rem solid transparent;
        border-right: 1rem solid transparent;
        border-bottom: 1rem solid var(--primary-color);
      }
    }

    &.left {
      @apply -top-3 right-full mr-4;
      &:after {
        @apply top-1.5 left-full mr-4;
        border-top: 1rem solid transparent;
        border-bottom: 1rem solid transparent;
        border-left: 1rem solid var(--primary-color);
      }
    }

    &.right {
      @apply -top-3 left-full ml-4;
      &:after {
        @apply top-1.5 right-full ml-4;
        border-top: 1rem solid transparent;
        border-bottom: 1rem solid transparent;
        border-right: 1rem solid var(--primary-color);
      }
    }
  }

  .markdown {
    @apply flex flex-col;
    @apply font-sans font-normal text-lg print:text-base;
    @apply text-neutral-800 dark:text-neutral-300;

    counter-reset: h1-outline-counter;

    &.numbered-headings {
      h1:not(.no-outline) {
        counter-increment: h1-outline-counter;
        counter-reset: h2-outline-counter;

        &:before {
          content: counter(h1-outline-counter) ". ";
        }
      }

      h2:not(.no-outline) {
        counter-increment: h2-outline-counter;
        counter-reset: h3-outline-counter;

        &:before {
          content: counter(h1-outline-counter) "." counter(h2-outline-counter)
            " ";
        }
      }

      h3:not(.no-outline) {
        counter-increment: h3-outline-counter;
        counter-reset: h4-outline-counter;

        &:before {
          content: counter(h1-outline-counter) "." counter(h2-outline-counter)
            "." counter(h3-outline-counter) " ";
        }
      }

      h4:not(.no-outline) {
        counter-increment: h4-outline-counter;
        counter-reset: h5-outline-counter;

        &:before {
          content: counter(h1-outline-counter) "." counter(h2-outline-counter)
            "." counter(h3-outline-counter) "." counter(h4-outline-counter) " ";
        }
      }

      h5:not(.no-outline) {
        counter-increment: h5-outline-counter;
        counter-reset: h6-outline-counter;

        &:before {
          content: counter(h1-outline-counter) "." counter(h2-outline-counter)
            "." counter(h3-outline-counter) "." counter(h4-outline-counter) "."
            counter(h5-outline-counter) " ";
        }
      }

      h6:not(.no-outline) {
        counter-increment: h6-outline-counter;

        &:before {
          content: counter(h1-outline-counter) "." counter(h2-outline-counter)
            "." counter(h3-outline-counter) "." counter(h4-outline-counter) "."
            counter(h5-outline-counter) "." counter(h6-outline-counter) " ";
        }
      }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      @apply w-full font-sans;

      &.with-anchor {
        @apply relative;

        > a {
          @apply hidden absolute top-2.5 -left-10 pr-2;
          @apply text-gray-500 dark:text-gray-400;
          @apply hover:text-gray-400 dark:hover:text-gray-300;

          > svg {
            @apply w-8 h-8;
          }
        }
      }
    }

    h2.with-anchor > a {
      @apply top-1.5;
    }

    h1,
    h2,
    h3,
    h4 {
      + figure {
        @apply mt-3;
      }
    }

    h1 {
      @apply text-5xl print:text-3xl font-normal mt-8 mb-4;
    }

    h2 {
      @apply text-4xl font-normal mt-8 mb-4;
    }

    h3 {
      @apply text-3xl font-normal mt-6 mb-3;
    }

    h4 {
      @apply text-2xl font-normal mt-6 mb-2;
    }

    h6 {
      @apply text-xl font-normal mt-4 mb-2;
    }

    p {
      @apply w-full mb-6 leading-relaxed;
    }

    a:not(.plain) {
      @apply underline text-blue-500 dark:text-blue-200;
      @apply hover:text-blue-600 dark:hover:text-blue-300;
    }

    .footnote {
      @apply mb-6 flex flex-row gap-1 text-base text-gray-500 dark:text-gray-400;

      &:has(+ .footnote) {
        @apply mb-0;
      }

      div.footnote-index {
        @apply leading-relaxed mr-2;

        &:after {
          content: ".";
        }
      }

      p {
        &:last-child {
          @apply mb-0;
        }
      }
    }

    dl,
    ul,
    ol {
      @apply w-full self-start mb-6;

      li {
        @apply break-words mt-2.5 pl-1.5;

        &:first-child {
          @apply mt-0;
        }
      }
    }

    ol {
      @apply list-decimal pl-10;
    }

    ul {
      @apply list-disc pl-10;
    }

    figure {
      @apply w-full mb-6 flex flex-col items-center;

      pre {
        @apply w-full bg-neutral-100 dark:bg-neutral-800 rounded-md p-4 overflow-x-scroll;
        @apply print:border-neutral-800 print:p-2;

        code {
          @apply font-mono leading-snug;
        }
      }

      &.quote {
        @apply relative items-start;

        &:before {
          position: absolute;
          top: 24px;
          left: -44px;
          content: "“";
          font-size: 6rem;

          @apply text-neutral-400 dark:text-neutral-700;
          @apply hidden md:block;
        }

        p {
          @apply italic mb-0;
          @apply text-neutral-600 dark:text-neutral-400;
        }

        cite {
          &:before {
            content: "— ";
          }

          @apply font-sans ml-4;
        }
      }
    }

    figcaption {
      @apply mt-4 font-sans text-sm text-center;
      @apply text-neutral-600 dark:text-neutral-400;
    }

    summary {
      @apply cursor-pointer font-bold bg-neutral-100 dark:bg-neutral-800 p-4 rounded-t-md rounded-b-md;
    }

    details[open] {
      summary {
        @apply rounded-b-none;
      }

      figure pre {
        @apply rounded-t-none;
      }
    }

    div.table {
      @apply mb-6;
    }

    blockquote {
      @apply w-full mb-6 border-l-4 border-l-blue-400 px-8;

      p {
        @apply italic text-neutral-600 dark:text-neutral-400;

        &:last-child {
          @apply mb-0;
        }
      }
    }

    .callout {
      @apply flex flex-col gap-2 rounded-md p-4 text-base mb-6;
      @apply print:border-2 print:p-2;

      > .heading {
        @apply flex flex-row gap-1 font-sans;

        > svg {
          @apply w-[1.2rem];
        }

        > div {
          @apply font-bold;
        }
      }

      > .body {
        p:last-child {
          @apply mb-0;
        }
      }

      &.note {
        @apply bg-blue-200 print:bg-transparent print:border-blue-200 dark:bg-blue-950;

        > .heading {
          @apply text-blue-600 dark:text-blue-500;
        }

        > .body {
          @apply text-black dark:text-white;
        }
      }

      &.tip {
        @apply bg-teal-100 print:bg-transparent print:border-teal-900 dark:bg-teal-900;

        > .heading {
          @apply text-teal-600 dark:text-teal-300;
        }
      }

      &.success {
        @apply bg-green-100 print:bg-transparent print:border-green-900 dark:bg-green-900;

        > .heading {
          @apply text-green-600 dark:text-green-400;
        }
      }

      &.question {
        @apply bg-amber-200/10 print:bg-transparent print:border-amber-500;

        > .heading {
          @apply text-amber-500 dark:text-amber-200;
        }
      }

      &.warning {
        @apply bg-orange-500/10 print:bg-transparent print:border-orange-500;

        > .heading {
          @apply text-orange-600;
        }
      }

      &.danger {
        @apply bg-red-500/25 print:bg-transparent print:border-red-500;

        > .heading {
          @apply text-red-500;
        }
      }

      &.example {
        @apply bg-violet-900/25 print:bg-transparent print:border-violet-900;

        > .heading {
          @apply text-violet-600 dark:text-violet-400;
        }
      }
    } /* .callout */
  } /* .markdown */

  div.table {
    @apply flex overflow-x-scroll;
  }

  table {
    @apply min-w-full border-collapse table-auto;

    thead {
      @apply bg-transparent dark:bg-neutral-800;
      @apply dark:text-white;

      tr {
        th {
          @apply px-6 py-4;

          &.left {
            @apply text-left;
          }

          &.right {
            @apply text-right;
          }

          &.center {
            @apply text-center;
          }
        }
      }
    } /* thead */

    tbody {
      tr {
        td {
          @apply whitespace-nowrap px-6 py-4;

          &.left {
            @apply text-left;
          }

          &.right {
            @apply text-right;
          }

          &.center {
            @apply text-center;
          }
        }
      }
    } /* tbody */

    &.tight {
      thead tr th,
      tbody tr td {
        @apply px-3 py-2;
      }
    }

    &.tighter {
      thead tr th,
      tbody tr td {
        @apply px-1 py-1;
      }
    }

    &:not(.borderless) {
      thead {
        @apply border-b border-neutral-500;
      }

      tbody tr {
        @apply border-b border-neutral-400 dark:border-neutral-600;
      }
    }
  } /* table */
}