chiya/assets/css/app.css

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

@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 {
  html {
    font-family: 'Inter', sans-serif;
    font-feature-settings: "case", "cpsp", "frac", "salt", "ccmp", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv09", "cv10", "cv11";
    @apply text-slate-800;
  }

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

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

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

  #site-header {
    @apply block px-3 py-6 bg-gradient-to-r from-slate-900 to-slate-950 text-white print:hidden;

    & nav ul {
      @apply flex;
    }

    & a {
      @apply p-3 rounded hover:bg-primary-700 transition; 
    }
  }

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

  #primary-sidebar {
    @apply col-span-1;

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

    & .menu {
      @apply flex-1;
    }
  }

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

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

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

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

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

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

  header.page-header { 
    @apply border-b border-slate-300 mb-6;
  }

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

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

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

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

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

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

/* 
  The components layer is for class-based styles that you want to be able to override with utilities.
*/
@layer components {
  .divider {
    @apply flex items-center my-8 before:flex-1 after:flex-1 before:content-[''] after:content-[''] before:p-[0.5px] after:p-[0.5px] w-full mx-auto last:hidden;
  }
}

/*
  The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.
*/
@layer utilities {
  
}