_homepage.scss

.site-app {
  &--input {
    @include grid-column((xxsmall: 1 of 1, large: 2 of 5));
  }

  &--output {
    @include grid-column((xxsmall: 1 of 1, large: 3 of 5));
    .output-frame {
      border-radius: 0px 0px 0.3em 0.3em;
      overflow: hidden;
      box-shadow: 1px 1px 1px #747474;
      > div {
        color: $color-text-dark;
        &.preview {
          font-size: 0;
          line-height: 0;
          position: relative;
          background: #fff;
        }
        &.markdown {
          background: #fff;
          margin-top: 2px;
          > pre {
            margin: 0;
            > code {
              border-radius: unset;
              border: none;
            }
          }
        }
      }
    }

    @media screen and (max-width: map-get($breakpoints, "large") - 0.05em) {
      .output-frame {
        width: 100vw;
        margin: 0 -1.5em -2.5em;
        border-radius: unset;
      }
    }
  }
}

form {

  position: relative;
  top: 50%;
  transform: translateY(-50%);

  label {
    position: relative;
    color: $color-white;
    font-weight: bold;
    display: block;
    margin-top: 15px;
    width: 100%;
    letter-spacing: 1px;

    .input {
      color: initial;
      width: 100%;
      margin: 0 0 15px;
      height: 40px;

      &[name="url"] {
        padding-right: 40px;

        ~ img {
          position: absolute;
          bottom: 15px;
          right: 0px;
          width: 40px;
          height: 40px;
          padding: 9px;
          border-left: 1px solid $header-background-color;
        }
      }
    }
  }
}

.buttons {
  text-align: center;

  .button {
    margin: 30px 0;
  }
}

.providers {
  @include grid-row();
  .provider {
    @include grid-column((xxsmall: 1 of 1, small: 1 of 2, large: 1 of 3, xlarge: 1 of 4));
    cursor: default;
    display: block;
    .fa-check {
      color: #8bc34a;
    }
    span {
      padding-left: 8px;
    }
  }
}

.progress {
  background: #efefef;
  height: 12px;
  border-radius: 20px;
  overflow: hidden;

  > div {
    --percentage: 0;
    width: calc(var(--percentage) * 1%);
    height: 100%;
    background-color: hsl(calc(120 - var(--percentage) / 100 * 120), 38%, 62%);
    border-radius: 4px;
    transition: width 1.2s, background-color 1.2s;
  }

  ~ small {
    text-align: right;
    display: block;;
  }
}

.details {
  > section {
    padding-bottom: 3em;
    padding-top: 2em;
    border-top: 1px solid #dcdcdc;
    &:first-child {
      border-top: none;
    }

    > section {
      margin-top: 2em;
      padding: 0 .5em;
      &.bordered {
        border-bottom: 2px solid #ededed;
      }
    }
  }
}