chiya/assets/css/app.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "./hljs.css";
@import "./lightbox.css";
@import "./tablesort.css";

/*
  The base layer is for things like reset rules or default styles applied to plain HTML elements.
*/
@layer base {
  :root {
    --color-foreground: 15 23 42;
    --color-background: 241 245 249;
  }

  :root[data-mode=dark] {
    --color-foreground: 241 245 249;
    --color-background: 15 23 42;   
  }

  html {
    font-family: 'Inter', sans-serif;
    font-feature-settings: "case", "cpsp", "frac", "salt", "ccmp", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv09", "cv10", "cv11";
  }

  body#site-body {
    @apply bg-gradient-to-br from-background from-50% to-rose-100 dark:to-rose-950 text-foreground;
  }

  .stack > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  :root .prose {
    @apply prose-inhji;
  }

  :root[data-mode=dark] .prose {
    @apply prose-invert;
  }
  /* https://stackoverflow.com/questions/5379752/css-style-external-links */
  a[href]:not(:where(
    /* exclude hash only links */
    [href^="#"],
    /* exclude relative but not double slash only links */
    [href^="/"]:not([href^="//"]),
    /* domains to exclude */
    [href*="//inhji.de"],
    /* subdomains to exclude */
    [href*="//cloud.inhji.de"],
  )):after {
    content: '↬';
  }


  /*
   * ============= SITE LAYOUT =============
   */

  /* === SITE HEADER === */

  #site-header {
    @apply sticky top-0 block px-3 py-6 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white print:hidden;

    & nav ul {
      @apply flex;
    }

    & a {
      @apply p-3 rounded transition border border-transparent hover:border-white; 
    }

    & #site-title {
      @apply font-bold uppercase;
    }
  }

  /* === PRIMARY SIDEBAR === */

  #primary-sidebar {
    @apply col-span-1;
    @apply prose-a:no-underline;

    & nav {
      @apply flex justify-between md:flex-row lg:flex-col mb-6 lg:mb-0;
    }

    & h3 {
      @apply m-0;
    }

    & a.active {
      @apply text-primary-500;
    }
  }

  /* === SITE CONTENT === */

  #site-content {
    @apply grid grid-cols-1 lg:grid-cols-5 gap-0 lg:gap-12;
    @apply mt-6 sm:mt-12 px-6 sm:px-0;

    #content-wrapper {
      @apply col-span-4;
    }

    #secondary-sidebar {
      @apply col-span-1;
    }
  }

  /* === SITE FOOTER === */

  #site-footer {
    @apply p-8 mt-8 max-w-none bg-foreground/20 border-t border-foreground/10;
  }

  /* === CONCERNING MULTIPLE LAYOUT BLOCKS === */

  #site-content, #site-footer, #primary-sidebar, #secondary-sidebar {
    @apply hover:prose-a:text-primary-600 hover:prose-a:transition;
  }

  /*
   * ============= PAGE LAYOUT =============
   */

  /* === PAGE HEADER === */

  header.page-header { 
    @apply border-b border-foreground/50 mb-6 prose max-w-none;
  }

  header.page-header h1 {
    @apply text-3xl leading-loose font-bold;
  }

  header.page-header p {
    @apply mb-3;
  }

  /* === PAGE GRID === */

  section.page-grid {
    @apply grid grid-cols-1 md:grid-cols-3 gap-6;

    > section {
      @apply col-span-1 md:col-span-2 last:md:col-span-3;
    }

    > aside {
      @apply print:hidden;
    }
  }
}

/* 
  The components layer is for class-based styles that you want to be able to override with utilities.
*/
@layer components {
  .note {
    .note-link {
      @apply text-center text-neutral-900 dark:text-neutral-100;
    }
  }

  .divider {
    @apply flex text-primary-500 items-center my-8 w-full mx-auto last:hidden;
    @apply before:flex-1 before:content-[''] before:bg-neutral-500/25 before:p-[0.5px] before:mr-2;
    @apply after:flex-1 after:content-[''] after:bg-neutral-500/25 after:p-[0.5px] after:ml-2;
  }

  .dot {
    @apply before:content-['·']
  }

  .tag-bar {
    & .letter {
      @apply text-neutral-900 dark:text-neutral-100 capitalize border rounded text-sm px-2 py-1 inline-block mb-2;
    }

    & li {
      @apply mb-2;
    }

    & a {
      @apply text-neutral-900 dark:text-neutral-100 border rounded text-sm px-2 py-1 inline-block mb-2 transition;
    }

    & .count {
      @apply text-sm font-mono rounded-full py-0.5 px-1 align-middle;
    }
  }

  .pagination {
    @apply flex justify-between mt-6;

    & .pagination-previous, & .pagination-next {
      @apply block py-2 px-3 bg-neutral-700 text-white rounded;
    }

    & .pagination-previous.disabled, & .pagination-next.disabled {
      @apply bg-neutral-500;
    }

    & .pagination-list {
      @apply hidden;
    }
  }

  /* === CARD LIST (ADMIN) === */

  .card-list {
    @apply flex flex-col gap-3 mt-6;
  }

  /* === CARD (ADMIN) === */
  .card {
    @apply bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 p-3 rounded;

    & header {
      & h2 {
        @apply text-xl leading-normal;
      }
    }

    & footer {
      @apply flex gap-3 text-sm;
    }
  }


}

/*
  The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.
*/
@layer utilities {
  .hljs {
    background: transparent !important;
  }

  a.invalid {
    @apply line-through;
  }
}