@ou-imdt/css/src/layout/basic-layout.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

[data-layout="basic"],
:host[data-layout="basic"] {
  --rad: 5px;
  --pad: 1.5ch;
  --min-bar-height: 3.3rem;

  display: grid;
  gap: 1ch;
  width: 100%;

  & details {
    margin: 0;
  }

  & .options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  & .help {
    border-radius: var(--rad);

    &>summary {
      --summary-padding: var(--pad);
      padding-block: var(--pad);
      padding-inline: var(--pad);
    }
  }

  & details.menu {
    &>summary {
      --summary-padding: var(--pad);
      padding-block: var(--pad);
      padding-inline: var(--pad);
      padding-inline-start: calc(var(--pad)*3);
      display: grid;
      grid-template-columns: 1fr auto;
      min-height: var(--min-bar-height);
      align-items: center;
    }

  }

  & .menu:not(details) {
    min-height: var(--min-bar-height);
    display: grid;
    /* grid-template-columns: 1fr repeat(var(--action-count, 4), auto); */
    align-items: center;
    font-weight: bold;
    padding-block: 0.5ch;
    padding-inline: var(--pad);
  }

  & .widget:not(:empty) {
    display: grid;
    place-items: center;
    min-height: 100px;
  }

  & .controls {

    & ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5ch;

      li:first-child {
        flex: auto;
      }
    }

  }

  & .reveal {

    &[aria-hidden],
    &[tabindex="-1"] {
      display: none;
    }

    &:not(:empty) {
      padding: 1ch;
    }
  }

  .feedback {
    border-radius: var(--rad);
    padding: var(--spacing);
    display: grid;
    align-items: center;
    height: 5ch;
    overflow-y: auto;
  }
}

/* TODO: Implement container query method outlined here: https://www.stefanjudis.com/notes/the-death-of-custom-media-queries/ */

/* TODO: Auto implement the iOS fix for small screens when implementing container query fix */


@media screen and (max-device-width: 545px) {

  /* Apparently iOS thinks it smart and tries to auto resize text if it thinks it's going to be too small on small screens. Often this leads to unpredictably varying font sizes on the same screen - which is A-okay in apples book! 😭. Use this snippet to tell it it's very, very wrong and to just stop. */
  body {
    -webkit-text-size-adjust: 100%;
  }
}


@media screen and (min-width: 545px) {
  [data-layout="basic"] {
    .menu:not(details) {
      grid-template-columns: 1fr repeat(var(--action-count, 4), auto);
    }
  }
}