visbug-lib/app/demo/layout.css

<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a> <a href

main {
  --card-size: 70vw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-size), 1fr));
  grid-auto-rows: minmax(var(--card-size), max-content);
  grid-auto-flow: dense;
  gap: 1rem 2rem;
  padding: 1rem 2rem;

  @media (min-width:480px) {
    --card-size: 35vw;
  }

  @media (min-width:768px) {
    --card-size: 20vw;

    & > article {
      &[span2x2] {
        grid-row: span 2;
        grid-column: span 2;
      }

      &[span3x1] {
        grid-column: span 3;
      }

      &[span2x1] {
        grid-column: span 2;
      }

      &[span1x2] {
        grid-row: span 2;
      }

      &[span1x1] {
        grid-row: span 1;
        grid-column: span 1;
      }
    }
  }

  @media (min-width:1024px) {
    --card-size: 16vw;
  }

  @media (min-width:1600px) {
    --card-size: 15vw;
  }
}

[image-grid] {
  display: grid;
  gap: .5rem;
  height: 100%;
  align-items: space-between;
  justify-content: space-between;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;

  & > div:first-child {
    grid-column: span 2;
  }

  & img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center center;
  }
}

[text-styles] {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: .5rem;

  & :matches(h1,h2,h3,h4,h5,h6) {
    margin: 0;
  }
}

[color-grid] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .5rem;

  & > div {
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    &:not(:first-of-type) {
      color: white;
    }
  }
}

[stop-light] {
  display: grid;
  align-items: center;
  justify-content: space-around;

  & > .filled-circle {
    width: 7rem;
    height: 7rem;
  }
}

[ordered-numbers] {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(5, 5rem);
  justify-content: space-around;

  & > .filled-circle:nth-child(1) { background: hsl(200, 50%, 50%); }
  & > .filled-circle:nth-child(2) { background: hsl(225, 50%, 50%); }
  & > .filled-circle:nth-child(3) { background: hsl(250, 50%, 50%); }
  & > .filled-circle:nth-child(4) { background: hsl(275, 50%, 50%); }
  & > .filled-circle:nth-child(5) { background: hsl(300, 50%, 50%); }
}

nav {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;

  &[margin] {
    grid-auto-flow: row;
  }

  & > a {
    text-align: center;
    margin: 5px;
    border: 1px solid var(--darkest-grey);
    border-radius: .25rem;
  }
}