blog.hatebit.org/theme/css/main.css

@import "tailwindcss";

@theme {
  --font-mono: "Space Mono", "monospace";
  --font-sans: "Metropolis", "sans-serif";
}

@utility border-b-3 {
  border-bottom-width: 3px;
}

@utility container {
  @apply mx-auto px-4;
}

/* ************************************************************************* */
/* Fonts */

@layer base {
  @font-face {
    font-family: "Metropolis";
    src: url("../fonts/metropolis/Metropolis-ExtraLight.otf");
    font-style: normal;
    font-weight: 200;
  }

  @font-face {
    font-family: "Metropolis";
    src: url("../fonts/metropolis/Metropolis-Regular.otf");
    font-style: normal;
    font-weight: 400;
  }

  @font-face {
    font-family: "Metropolis";
    src: url("../fonts/metropolis/Metropolis-Bold.otf");
    font-style: normal;
    font-weight: 700;
  }

  @font-face {
    font-family: "Space Mono";
    src: url("../fonts/space-mono/SpaceMono-Regular.ttf");
  }
}

/* ************************************************************************* */
/* Base Styles */

html,
body {
  @apply h-full w-full;
}

body {
  @apply bg-zinc-900 flex flex-col font-sans text-zinc-50;
}

main {
  @apply flex-1 pb-20 pt-16;
}

h1 {
  @apply text-4xl;

  &::after {
    content: ".";
    @apply font-bold ml-px text-amber-600;
  }
}

h2,
h3,
h4 {
  @apply mb-4 mt-8;

  &::before {
    @apply mr-2 text-amber-600;
  }
}

h2 {
  @apply text-2xl;

  &::before {
    content: "#";
  }
}

h3 {
  @apply text-xl;

  &::before {
    content: "##";
  }
}

h4 {
  @apply text-lg;

  &::before {
    content: "###";
  }
}

a:hover {
  @apply bg-amber-600;
}

/* ************************************************************************* */
/* Header */

header {
  @apply font-mono py-4;

  .container {
    @apply flex items-center justify-between;

    .title {
      @apply text-2xl;
    }

    a {
      @apply border-amber-600 border-b-3 px-px;

      &:not(:first-of-type) {
        @apply ml-1;
      }
    }
  }
}

/* ************************************************************************* */
/* Footer */

footer {
  @apply font-mono py-8 text-sm;

  .container {
    @apply flex items-center justify-between;

    .cc {
      @apply flex-1;

      a {
        @apply border-amber-600 border-b-2 px-px whitespace-nowrap;
      }
    }

    .social {
      @apply flex flex-1 items-center justify-end;

      a:not(:first-of-type) {
        @apply ml-3;
      }

      img {
        @apply bg-zinc-50 h-6 ring-3 ring-inset ring-zinc-900;

        &:hover {
          @apply bg-zinc-900;
        }
      }
    }
  }
}

/* ************************************************************************* */
/* Post List */

.post-list {
  @apply mt-8 text-lg;

  li {
    @apply flex;

    .date {
      @apply font-mono mr-3 text-zinc-400;
    }

    .title {
      @apply pt-px;

      &::before {
        content: "#";
        @apply mr-1 text-amber-600;
      }

      a {
        @apply px-px py-1;
      }
    }
  }
}

/* ************************************************************************* */
/* Articles */

.article-meta {
  @apply font-mono text-lg text-zinc-400;
}

article {
  @apply font-light mt-8 text-lg;

  blockquote {
    @apply p-3;

    p {
      &::before {
        content: "❝";
        @apply mr-2 text-amber-600;
      }

      &::after {
        content: "❞";
        @apply ml-2 text-amber-600;
      }
    }
  }

  table {
    @apply border border-zinc-50 my-6 text-base w-full;

    th {
      @apply border-b border-zinc-50 px-2 py-1;
    }

    td {
      @apply px-2 py-px;
    }
  }

  ol {
    @apply list-decimal list-inside mb-4;
  }

  ul {
    @apply list-disc list-inside mb-4;
  }

  strong {
    @apply font-bold;
  }

  a:not(.toclink) {
    @apply border-b-2 border-amber-600 px-px;
  }

  p {
    @apply leading-6 mb-4;

    & > code {
      @apply font-mono mx-1 text-sm text-zinc-400;
    }
  }

  .highlight {
    @apply font-mono my-6 px-3 py-2 overflow-x-scroll text-sm;
  }
}

.toc {
  @apply mb-8;

  .toctitle {
    @apply block mb-4 mt-8 text-2xl;

    &::before {
      content: "#";
      @apply mr-2 text-amber-600;
    }
  }

  ul {
    @apply mb-0;

    li {
      @apply mb-1;

      a {
        @apply px-px py-1;
      }
    }
  }

  a + ul {
    @apply ml-4 mt-2;
  }
}

.footnote {
  @apply mt-8 text-base;

  ol {
    @apply list-decimal list-inside pt-2;

    li {
      @apply mt-2;

      p {
        @apply inline-block mb-0;
      }
    }
  }
}

.neighbours {
  @apply flex items-center justify-between mt-16 w-full;

  div {
    @apply flex-1;

    a {
      @apply flex items-center;

      span {
        @apply text-amber-600 text-4xl;
      }

      &:hover span {
        @apply text-zinc-50;
      }
    }

    &:first-of-type a {
      @apply pr-4;

      span {
        @apply ml-2 mr-4;
      }
    }

    &:last-of-type a {
      @apply justify-end pl-4 text-right;

      span {
        @apply ml-4 mr-2;
      }
    }
  }
}