---
---

@import "default";
@import "prismjs/themes/prism-okaidia";

/*
 * Set background to grey so that it blends in
 */
pre[class*="language-"] {
  background: $erlang-grey;
}

/*
 * This sets the content of the code example to be put in the center.
 * This makes it look better on small screens.
 *
 * Ideally this would have been controlled by margin-auto and width-auto in the styling of the
 * <pre>, but as the prism layout is applied after other css things we need to change the layout here
 */
pre[class*="language-"] {
  @include m(auto);
  width: fit-content;
}

.token.variable {
  color: #eea654;
}

.token.comment {
  color: #aab4be;
}

.banner {
  display: grid;
  grid-template-columns: 400px auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "slogan example"
    "download example";

  .slogan {
    place-self: center;
    grid-area: slogan;
  }

  .download {
    grid-area: download;
    @include pb(3);
  }

  .example {
    grid-area: example;
    .large {
      height: 100%;
    }
    .small {
      display: none;
    }
  }
}

/* smaller than xl */
@include media-breakpoint-down(xl) {
  .banner {
    grid-template-rows: 1fr auto;
    .example {
      .small {
        display: block;
      }
      .large {
        display: none;
      }
    }
  }
}

/* smaller than lg */
@include media-breakpoint-down(lg) {
  .banner {
    grid-template-columns: auto;
    grid-template-areas:
      "slogan"
      "example";
    .download {
      display: none;
    }
  }
}

.content {
  display: grid;
  grid-template-columns: 1fr;
    grid-template-areas:
      "what-is-erlang"
      "what-is-otp"
      "participate"
      "news";
  .news,
  .participate,
  .what-is-erlang,
  .what-is-otp {
    @include px(4);
    @include pt(2);
  }
  .news {
    grid-area: news;
  }
  .participate {
    grid-area: participate;
  }

  .what-is-erlang {
    grid-area: what-is-erlang;
  }
  .what-is-otp {
    grid-area: what-is-otp;
  }
}

@include media-breakpoint-up(md) {
  .content {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "news what-is-erlang"
      "news what-is-otp"
      "news participate";
  }
}
