blog/themes/paper/assets/app.css

/*
 * Paper
 * A simple, clean, flexible Hugo theme
 * https://github.com/nanxiaobei/hugo-paper
 * Designed by 南小北 https://lee.so/
 */

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

@layer base {
  html,
  body {
    @apply h-full;
  }

  html {
    --bg: transparent;
  }

  body {
    -webkit-tap-highlight-color: transparent;
    background: var(--bg);

    @apply dark:bg-black/90;
  }
}

@layer components {
  .btn {
    @apply rounded-full bg-black px-7 py-4 text-sm text-white no-underline shadow duration-100 active:scale-95 dark:bg-white dark:text-black;
  }

  .link {
    @apply duration-200 hover:text-black dark:hover:text-white;
  }
}

@layer utilities {
  .not-ready * {
    @apply !transition-none;
  }

  .prose {
    @apply break-words;
  }

  .btn-menu::before,
  .btn-menu::after {
    @apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
  }

  .nav-wrapper {
    background: var(--bg);
  }

  .open {
    @apply overflow-hidden;
  }

  .open .btn-menu::before {
    @apply w-6 translate-y-[5.5px] rotate-45;
  }

  .open .btn-menu::after {
    @apply w-6 -translate-y-[5.5px] -rotate-45;
  }

  .open .nav-wrapper {
    @apply top-0;
  }

  article {
    @apply text-lg leading-[1.8] text-black dark:text-white;
  }

  article blockquote {
    @apply !border-l-[3px] !border-black dark:!border-white;
  }

  article code {
    @apply inline-block !text-sm !leading-6;
  }

  article .highlight {
    @apply my-8;
  }

  article .highlight pre {
    @apply my-0;
  }

  article .highlight > div {
    @apply rounded-md bg-[--tw-prose-pre-bg];
  }

  article .highlight > div table {
    @apply my-0 table-fixed;
  }

  article .highlight > div table tr {
    @apply flex;
  }

  article .highlight > div table tr td {
    @apply p-0;
  }

  article .highlight > div table tr td pre {
    @apply !bg-transparent;
  }

  article .highlight > div table tr td:first-of-type pre {
    @apply pr-[4px];
  }

  article .highlight > div table tr td:first-of-type pre code span {
    @apply !mr-0 block min-w-[18px] !p-0 text-right text-white/40;
  }

  article .highlight > div table tr td:last-of-type {
    @apply overflow-auto;
  }
}