noydb/oworms-ui

View on GitHub
src/app/component/word/random/random-top.component.scss

Summary

Maintainability
Test Coverage
@use '../../../style/colour' as colour;
@use '../../../style/font' as font;
@use '../../../style/mixin' as mxn;

article {
    text-align: center;
    color: #ffffff;

    // styling it exactly the same as an h1
    a {
        font-family: 'roboto-mono-medium', font.$default-font;
        letter-spacing: 3.6px;
        font-weight: 500;
        font-size: 3.75rem; // 60px
        font-style: normal;
        color: #ffffff;
        @include mxn.transition;
        cursor: pointer;
        word-wrap: anywhere;

        &:hover {
            color: colour.$primary;
        }
    }

    p {
        font-size: .75rem;
        padding-bottom: 1rem;
        padding-top: .5rem;
    }

    span {
        color: #ffffff;

        &:last-of-type {
            color: colour.$secondary;
        }
    }
}

@media screen and (max-width: 600px) {
    article > a {
        font-size: 2rem;
    }
}