glossary.css

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

@layer components {
  html {
    @apply min-h-full;
  }

  body {
    @apply antialiased bg-gray-100 dark:bg-gray-900 print:bg-white min-h-full;
  }

  div#glossary-page-container {
    @apply min-h-screen mb-10 print:mb-0 text-gray-900 dark:text-gray-100 print:text-black;
  }

  div#glossary-page-container header {
    @apply pt-6 pb-4 mx-auto px-4 sm:px-6 lg:px-8 print:px-0 print:max-w-prose;
  }

  h1#glossary-page-title  {
    @apply text-3xl font-bold leading-tight;
  }

  div#glossary-page-container main {
    @apply mx-auto px-6 lg:px-8 print:px-0 print:max-w-prose;
  }

  div#glossary-page-about {
    @apply pb-3 max-w-prose;
  }

  div#glossary-page-about ul {
    @apply pt-4 ml-1 list-disc list-inside;
  }

  div#glossary-page-container[data-enable-markdown-based-syntax="true"] div#glossary-page-about:not([data-markdown-rendered="true"]) {
    @apply font-mono whitespace-pre-wrap;
  }

  article#glossary-page-items dl {
    @apply grid print:block print:space-y-5 gap-5 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4;
  }

  article#glossary-page-items dl > div {
    @apply bg-white dark:bg-gray-800 print:bg-white border dark:border-gray-700 print:border-none rounded-lg print:px-0 px-4 py-4 print:py-0;
  }

  article#glossary-page-items dl dt {
    @apply font-semibold print:font-normal text-gray-600 dark:text-gray-200 print:text-black;
  }

  article#glossary-page-items dl dt dfn {
    @apply not-italic print:italic scroll-mt-24;
  }

  article#glossary-page-items dl dd {
    @apply mt-1 print:mt-0 py-2 print:py-0 text-gray-600 dark:text-gray-300 print:text-black;
  }

  article#glossary-page-items dl dd a {
    @apply text-gray-600 dark:text-gray-300 print:text-black;
  }

  article#glossary-page-items dl dd.related-terms {
    @apply print:mt-2;
  }

  a {
    @apply hover:underline text-indigo-600 dark:text-amber-300 print:text-black;
  }

  dfn:target {
    @apply bg-amber-100 dark:bg-pink-900;
  }

  dt span.silcrow {
    @apply ml-1.5 select-none;
  }

  dt span.silcrow a {
    @apply text-inherit no-underline text-gray-500 dark:text-gray-400 font-normal;
  }

  /* Start of trick for autogrowing textareas
     https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */

  .grow-wrap {
    @apply grid;
  }

  .grow-wrap::after {
    @apply whitespace-pre-wrap invisible;
    content: attr(data-replicated-value) " ";
  }

  .grow-wrap > textarea {
    @apply resize-none overflow-hidden;
  }

  .grow-wrap > textarea,
  .grow-wrap::after {
    @apply shadow-sm w-full rounded-md border;
    grid-area: 1 / 1 / 2 / 2;
  }

  /* End of trick for autogrowing textareas */
}

/* overpass-100 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 100;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-200 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 200;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-300 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-regular - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-500 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-600 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-700 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-800 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-900 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 900;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-100italic - latin */
@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 100;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-100italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-200italic - latin */
@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 200;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-200italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-200italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-300italic - latin */
@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 300;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-italic - latin */
@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-500italic - latin */
@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 500;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-600italic - latin */
@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 600;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-700italic - latin */
@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-800italic - latin */
@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 800;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* overpass-900italic - latin */
@font-face {
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 900;
  src: local(''),
       url('https://glstatic.net/fonts/overpass-v10-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://glstatic.net/fonts/overpass-v10-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}