website/assets/scss/home.scss

// general
@import "variables";
@import "main";

// fonts
@import "fonts/playfair";

// shortcodes
@import "shortcodes/verticalposts";

// partials
@import "partials/sidebar";
@import "partials/footer";
@import "partials/helpers/icons";


#introduction {
    background: var(--vriish-gradient);
    font-family: "playfair";
    font-size: 2rem;
    height: 100vh;
    color: var(--vriish-gradient-text);
    mask: var(--vriish-waves);
    @media (max-width: 1040px) {
        height: 90vh;
    }
    h1 {
        letter-spacing: 0.5rem;
        font-size: 7rem;
    }
    p {
        letter-spacing: 0.15rem;
    }
    &::after {
        content: "­☟";
        font-size: 4.8rem;
        position: absolute;
        bottom: 2rem;
        animation: 1s ease-in infinite alternate scrollDown;
        font-family: serif;
    }
    @keyframes scrollDown {
        from { transform: translateY(0); }
        to { transform: translateY(1rem); }
    }
}

section {
    position: relative;
    h2 {
        .more{
            font-size: .75em;
            font-weight: normal;
            hyphens: none;
            &::after {
                content: "\27F6";
                margin-left: .25em;
                transition: margin .5s;
            }
            &:hover::after {
                margin-left: .5em !important;
            }
        }
        &:hover .more::after {
            margin-left: .35em;
        }
    }
}