capytal.cc/assets/stylesheets/tailwind.css

@import "tailwindcss";

@theme {
  --font-sans: "Karla", sans-serif;
}

@layer base {
  @font-face {
    font-family: "Cal Sans";
    font-style: normal;
    src: url("/assets/fonts/CalSans.woff2") format("woff2"),
      url("/assets/fonts/CalSans.woff") format("woff"),
      url("/assets/fonts/CalSans.ttf") format("truetype"),
  }

  @font-face {
    font-family: "Karla";
    font-style: normal;
    src: url("/assets/fonts/KarlaVF.woff2") format("woff2"),
      url("/assets/fonts/KarlaVF.ttf") format("truetype"),
      url("/assets/fonts/KarlaMedium.otf") format("opentype");
  }

  @font-face {
    font-family: "Karla";
    font-style: italic;
    src: url("/assets/fonts/KarlaItalicVF.woff2") format("woff2"),
      url("/assets/fonts/KarlaItalicVF.ttf") format("truetype"),
      url("/assets/fonts/KarlaItalicMedium.otf") format("opentype");
  }

  h1 {
    font-size: var(--text-4xl);
    text-align: initial;
    margin-bottom: 1.5rem;
    font-family: "Cal Sans";
  }

  h2 {
    font-size: var(--text-3xl);
    font-family: "Cal Sans";
    margin-top: 1.5rem;
    text-align: initial;
  }

  h3 {
    font-size: var(--text-2xl);
    font-weight: bold;
    margin-top: 1.5rem;
    text-align: initial;
  }

  h4 {
    font-size: var(--text-xl);
    font-weight: bold;
    margin-top: 1.5rem;
    text-align: initial;
  }

  h5 {
    font-weight: bold;
    margin-top: 1.5rem;
    text-align: initial;
  }

  h6 {
    font-weight: bold;
    margin-top: 1.5rem;
    text-align: initial;
  }

  p {
    margin: 0.7rem 0 0.7rem 0;
  }

  a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  a[target="_blank"]::after {
    content: '↗';
  }

  ul,
  ol {
    margin: 0.7rem 0 0.7rem 0;
    margin-left: 1.5rem;
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: list-decimal;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    .anchor {
      opacity: 0%;
      transition-property: opacity;
      transition-timing-function: var(--default-transition-timing-function);
      transition-duration: var(--default-transition-duration);
      text-decoration: none;
    }
  }

  h1:hover,
  h2:hover,
  h3:hover,
  h4:hover,
  h5:hover,
  h6:hover {
    .anchor {
      opacity: 50%;
    }
  }

  table {
    table-layout: auto;
    width: 100%;
    border-radius: 1rem;

    thead {
      background-color: #111;
    }

    th,
    td {
      border: 1px solid #111;
      padding: 0.5rem;
    }
  }

  details,
  pre {
    margin: 1rem 0 1rem 0;
    background-color: #111;
    padding: 1rem;
    border-radius: 0.5rem;
  }

  pre {
    background-color: #111 !important;
  }

  hr {
    color: #181818;
  }

  details {
    border-width: 5px;
    border-style: solid;
    border-color: transparent;
  }

  details[data-callout="note"],
  details[data-callout="summary"],
  details[data-callout="abstract"],
  details[data-callout="tldr"],
  details[data-callout="info"],
  details[data-callout="todo"],
  details[data-callout="tip"],
  details[data-callout="hint"],
  details[data-callout="important"],
  details[data-callout="success"],
  details[data-callout="check"],
  details[data-callout="done"],
  details[data-callout="question"],
  details[data-callout="help"],
  details[data-callout="faq"],
  details[data-callout="warning"],
  details[data-callout="caution"],
  details[data-callout="attention"],
  details[data-callout="failure"],
  details[data-callout="fail"],
  details[data-callout="danger"],
  details[data-callout="error"],
  details[data-callout="bug"],
  details[data-callout="example"],
  details[data-callout="quote"],
  details[data-callout="cite"] {
    background-color: var(--callout-bg, #111);

    summary {
      font-weight: bold;
      color: var(--callout-summary, currentColor);
      list-style: none;
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 2);

      &::-webkit-details-marker {
        display: none;
      }
    }
  }

  details[data-callout="info"],
  details[data-callout="todo"] {
    --callout-bg: --alpha(var(--color-cyan-950) / 50%);
    --callout-summary: var(--color-cyan-500);
  }

  details[data-callout="tip"],
  details[data-callout="hint"],
  details[data-callout="important"] {
    --callout-bg: --alpha(var(--color-teal-950) / 50%);
    --callout-summary: var(--color-teal-500);
  }

  details[data-callout="success"],
  details[data-callout="check"],
  details[data-callout="done"] {
    --callout-bg: --alpha(var(--color-green-950) / 50%);
    --callout-summary: var(--color-green-500);
  }

  details[data-callout="question"],
  details[data-callout="help"],
  details[data-callout="faq"],
  details[data-callout="warning"],
  details[data-callout="caution"],
  details[data-callout="attention"] {
    --callout-bg: --alpha(var(--color-orange-950) / 50%);
    --callout-summary: var(--color-orange-500);
  }

  details[data-callout="failure"],
  details[data-callout="fail"],
  details[data-callout="danger"],
  details[data-callout="error"],
  details[data-callout="bug"] {
    --callout-bg: --alpha(var(--color-red-950) / 50%);
    --callout-summary: var(--color-red-500);
  }

  details[data-callout="example"] {
    --callout-bg: --alpha(var(--color-blue-950) / 50%);
    --callout-summary: var(--color-blue-500);
  }
}