docstyle.scss

// file: docstyle.scss
// Style modules for documentation
// This is part of the micro css implementation.

@use "css/base";
@use "css/page";
@use "css/doc";
@use "css/card";
@use "css/code";
@use "css/iot";

// simple content cards with image + text
.plaincard,
.imgcard,
.iconcard {
  position: relative;
  margin: base.$u-gutter base.$u-gutter base.$u-gutter 0;
  width: 100%;
  max-width: 100%;
  background-color: var(--card-back);
  page-break-inside: avoid;

  >h3 {
    margin-top: 0;
  }
}

// card with text only
.plaincard {
  padding: base.$u-gutter2;
  min-height: 6rem;
}

// cards with icon
.iconcard {
  padding: base.$u-gutter base.$u-gutter base.$u-gutter calc(4rem + 2 * base.$u-gutter);
  min-height: 5.4rem;

  svg {
    position: absolute;
    top: base.$u-gutter;
    left: base.$u-gutter;
    height: 4rem;
    width: 4rem;
  }
}

// picture with 4:3 ratio + text
.imgcard {
  padding: base.$u-gutter2 base.$u-gutter2 0 calc(9.6rem + base.$u-gutter2);
  min-height: 7.2rem;

  img {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    width: 9.6rem;
    max-height: 7.2rem;
  }
}