styles.css

@import "tailwindcss";

@config "./tailwind.config.js";


@theme {
  --spacing: 0.25rem;
  /* https://modernfontstacks.com/ */
  --font-sans: "Nunito-Medium", "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif;
}

@layer base {
  /* Base Theme (Light Mode by Default) */
  :root {
    --color-primary: #609;
    --color-secondary: chartreuse;
    --color-background: mintcream;
    --color-foreground: #001;
    --color-thumbnails: rgba(255, 255, 255, .85);
    --color-stripes: rgba(127, 255, 0, 0.85);
    --color-hiliteb: #a0f;
    --color-hilitef: mintcream;
    --tw-prose-links: #609;
  }

  /* Dark Mode */
  .dark {
    --color-primary: chartreuse;
    --color-secondary: #609;
    --color-background: #001;
    --color-foreground: mintcream;
    --color-thumbnails: rgba(102, 0, 153, .85);
    --color-stripes: rgba(102, 0, 153, .85);
    --color-hiliteb: yellow;
    --color-hilitef: #222;
    --tw-prose-links: chartreuse;
  }

  @font-face {
    font-family: 'Nunito-Medium';
    src: url('/fonts/Nunito-Medium.woff2') format('woff2'), url('/fonts/Nunito-Medium.ttf') format('truetype');
    font-display: swap;
  }

  @font-face {
    font-family: 'Nunito-Bold';
    src: url('/fonts/Nunito-Bold.woff2') format('woff2'), url('/fonts/Nunito-Bold.ttf') format('truetype');
    font-display: swap;
  }

  @font-face {
    font-family: 'Rubik';
    src: url('/fonts/Rubik-SemiBold.woff2') format('woff2'),
         url('/fonts/Rubik-SemiBold.ttf') format('truetype');
    font-display: swap;
  }

  h1 { font-family: 'Nunito-Bold', sans-serif; font-weight: bold; }

  header, h2, h3 { 
    color: var(--color-primary) !important;
    font-family: 'Rubik', sans-serif; font-style: italic;
  }

  #id-mainContent {
    a, h2, h3 {
      color: var(--color-primary);
      --tw-prose-links: var(--color-primary);
    }
  }

  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background-color: var(--color-primary); }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--color-primary); }

  * { scrollbar-color: var(--color-primary) transparent; }

  /**
   * Smooth the transition between pages in browsers that supports it. 
   * https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition
   */
  @view-transition { navigation: auto; }
}

@layer utilities {
  /** Debugging Helpers */
  .db-r { box-shadow: inset 0 0 0 4px rgba(255 0 0 / .85); background: repeating-linear-gradient(  0deg, rgba(255 0 0 / .5) 0, rgba(255 0 0 / .5) 1px, transparent 0, transparent 50%) top left / 10px 10px; }
  .db-g { box-shadow: inset 0 0 0 4px rgba(0 255 0 / .85); background: repeating-linear-gradient( 45deg, rgba(0 255 0 / .5) 0, rgba(0 255 0 / .5) 1px, transparent 0, transparent 50%) top left / 10px 10px; }
  .db-b { box-shadow: inset 0 0 0 4px rgba(0 0 255 / .85); background: repeating-linear-gradient(-45deg, rgba(0 0 255 / .5) 0, rgba(0 0 255 / .5) 1px, transparent 0, transparent 50%) top left / 10px 10px; }

  .quick-pulse { animation: pulse .2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
}

/**
 * Display Facets Bar or Select for Groups navigation, according to the container width.
 * TODO: remove the "@container" warning. It seems to be coming from VSCode's CSS server which TW uses.
 */
@layer components {
  /** Use the preact component wrapper to measure container size. */
  .cl-facetsMain {
    container-type: inline-size;
    container-name: facets;
  }

  @container facets (max-width: 480px) {
    .cl-facetsWrapper { @apply flex-col; }
    .cl-facetsBar { @apply hidden; }
    .cl-facetsSelect { @apply flex; }
  }

  /** If there's enough width, display the sidebar. */
  @container facets (min-width: 480px) {
    .cl-facetsWrapper { @apply flex-row; }
    .cl-facetsBar { @apply block; }
    .cl-facetsSelect { @apply hidden; }
  }
}

/**
 * Responsive grid layout configuration.
 */
@layer components {
  /* 3x3 grid. */
  .grid-wrapper {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
  }
  .grid-facets { grid-area: F; overflow: hidden; overflow-y: auto; }
  .grid-main { grid-area: G; overflow: hidden; overflow-y: auto; }
  .grid-info { grid-area: I; overflow: hidden; overflow-y: auto; }

  /* portrait-narrow */
  @media (orientation: portrait) and (max-width: 639px) {
    #debug::after { content: 'portrait-narrow'; }
    .grid-wrapper {
      grid-template-areas: 'F F F'
                           'G G G'
                           'I I I';
      grid-template-rows: auto 1fr auto;
      .grid-facets { max-height: 35dvh; }
      .grid-info { max-height: 18dvh; }
    }
  }

  /* portrait-wide */
  @media (orientation: portrait) and (min-width: 640px)  {
    #debug::after { content: 'portrait-wide'; }
    .grid-wrapper {
      grid-template-areas: 'F F I'
                           'G G G'
                           'G G G';
      grid-template-rows: auto auto 1fr; /* Grow middle row. */
      grid-template-columns: auto auto 1fr; /* Grow middle column. */
      .grid-facets { min-width: max(20rem,35dvw); }
      .grid-main { min-height: 60dvh; }
    }
  }

  /* landscape-narrow */
  @media (orientation: landscape) and (max-width: 1719px) {
    #debug::after { content: 'landscape-narrow'; }
    .grid-wrapper {
      grid-template-areas: 'F G G'
                           'F G G'
                           'F I I';
      grid-template-columns: auto 1fr auto; /* Grow middle column. */
      grid-template-rows: auto 1fr auto; /* Grow middle row. */
      .grid-facets { min-width: min(20rem,35dvw); }
      .grid-info { max-height: 30dvh; }
    }
  }

  /* landscape-wide */
  @media (orientation: landscape) and (min-width: 1720px) {
    #debug::after { content: 'landscape-wide'; }
    .grid-wrapper {
      grid-template-areas: 'F G I'
                           'F G I'
                           'F G I';
      grid-template-columns: auto 1fr auto; /* Grow middle column. */
      grid-template-rows: auto 1fr auto; /* Grow middle row. */
      .grid-facets { min-width: 32rem; }
      .grid-info { width: 20dvw; }
    }
  }
}