doracc/rstack-doc-ui/src/section-style/shared.module.scss

// ---------- responsive layout
// XXL > 1440
// XL 1280 - 1440
// L 835 - 1280
// M 601 - 834
// S < 601

// XL
@media screen and (min-width: 1281px) {
  .container {
    padding: 96px 144px !important;
  }
  .titleAndDesc {
    padding: 0px 144px 28px 144px !important;
  }
}

// L
@media screen and (min-width: 835px) and (max-width: 1280px) {
  .container {
    padding: 80px 80px !important;
  }
  .titleAndDesc {
    padding: 0px 16px 28px !important;
  }
}

// M
@media screen and (min-width: 601px) and (max-width: 834px) {
  .container {
    padding: 64px 32px !important;

    .innerContainer {
      gap: 16px !important;
    }
  }

  .titleAndDesc {
    padding: 0px 16px 28px !important;
    gap: 16px !important;

    .title {
      font-size: 32px !important;
    }

    .desc {
      font-size: 16px !important;
    }
  }
}

// S
@media screen and (max-width: 600px) {
  .container {
    padding: 64px 24px 24px !important;

    .innerContainer {
      gap: 16px !important;
    }
  }

  .titleAndDesc {
    padding: 0px 16px !important;
    gap: 16px !important;

    .title {
      font-size: 24px !important;
    }

    .desc {
      font-size: 15px !important;
    }
  }
}

// 1. container for padding
// 2. innerContainer for max-width
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 32px; //move to mediaQuery

  .innerContainer {
    display: flex;
    gap: 32px;
    flex-direction: column;
    width: 100%;

    max-width: 1296px;
  }
}

.titleAndDesc {
  display: flex;
  padding: 0px 144px 32px 144px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;

  .title {
    margin: 0;

    color: var(--landingpage-title-color, #0b0c0e);
    text-align: center;

    font-size: 48px;
    font-style: normal;
    font-weight: 700;
  }

  .desc {
    margin: 0;

    color: var(--landingpage-desc-color, #6b7075);
    text-align: center;

    /* Style 11 */

    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    max-width: 760px;
  }
}

// ---------- dark mode
:global {
  html:not(.dark) {
    --landingpage-title-color: #0b0c0e;
    --landingpage-desc-color: #6b7075;
  }

  html.dark {
    --landingpage-title-color: white;
    --landingpage-desc-color: #c6cacd;
  }
}