laika.helium.css.container.css Maven / Gradle / Ivy

Go to download
*, :after, :before {
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  color: var(--text-color);
  background-color: var(--bg-color);
  font-size: var(--body-font-size);
  line-height: var(--line-height);
  position: relative;
  padding-bottom: 40px;
  margin-top: 0;
}

#container {
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  height: calc(100% - var(--top-bar-height));
  width: 100%;
  overflow-y: auto;
}

main.content {
  display: block;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  min-height: 100vh;
  padding: 15px 15px 45px;
  margin-bottom: 70px;
}

@media (min-width: 576px) {
  main.content {
    padding: 15px 30px;
  }
}

@media (min-width: 1020px) {
  #container {
    left: var(--nav-width) !important;
    width: calc(100% - var(--nav-width));
    transition: left .25s ease-out;
  }
  main.content {
    max-width: var(--content-width);
    padding: 15px 45px;
  }
}

@media (min-width: 1450px) {
  main.content {
    max-width: 1125px;
    padding: 15px 310px 15px 45px;
  }
}