welcomePage.scss

TLDR

The welcomePage.scss file contains styles for the welcome page of the application. It sets up the layout and styles for various elements on the page.

Classes

.WelcomePage

This class represents the main container for the welcome page. It sets up the layout and positioning properties such as centering the content vertically and horizontally. It also defines padding and text alignment properties. Additionally, it includes media queries for different screen heights to adjust the layout accordingly.

.WelcomePage__content

This class represents the container for the main content on the welcome page. It sets up the layout properties for the content, such as flex-direction, alignment and gap between child elements. It also includes a media query to reverse the flex-direction for smaller screen heights and adjust the margin.

.WelcomePage__buttons

This class represents the container for the buttons on the welcome page. It sets up the layout properties for the buttons, such as flex-direction, alignment, and gap between child elements.

.Wrapper

This class represents a generic wrapper container used within the welcome page. It sets up the layout properties for the wrapper, such as flex-direction, alignment, and gap between child elements.

.skip

This class represents a skip link/button on the welcome page. It defines styling properties such as color and cursor, and includes a hover effect.

.WelcomePage__image

This class represents an image on the welcome page. It sets up the sizing properties for the image, such as width and max-width. It also includes media queries for different screen widths to adjust the image size and margin accordingly.

.WelcomePage__subtitle

This class represents the subtitle text on the welcome page. It defines the font size and line height properties. It includes a media query to adjust the font size for larger screen widths.

.WelcomePage {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 80px 40px;
    text-align: center;

    @media (max-height: 768px) {
        justify-content: flex-start;
        height: auto;
        padding-top: 40px;
    }

    .WelcomePage__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;

        @media (max-height: 800px) {
            flex-direction: column-reverse;
            margin-top: 16px;
        }
    }

    .WelcomePage__buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    > div {
        max-width: 808px;
        width: 100%;
        padding: 0;

        @media (min-width: 2000px) {
            max-width: 1120px;
        }
    }

    .Button {
        display: inline-flex;
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .skip {
        color: rgba(var(--link-color-rgb), 1);
        cursor: pointer;

        &:hover {
            background: none;
        }
    }
}

.WelcomePage__image {
    max-width: 100%;
    width: 808px;
    display: none;

    &--small {
        margin: 24px auto 32px;
        display: block;
    }

    @media (min-width: 2000px) {
        width: 1120px;

        &--small {
            display: none;
        }

        &--large {
            margin: 48px auto;
            display: block;
        }
    }
}

.WelcomePage__subtitle {
    font-size: 16px;
    line-height: 1.6;

    @media (min-width: 2000px) {
        font-size: 20px;
    }
}