assets/css/components/_landing-banner.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

@include namespace('landing-banner') {
    @include store((
        --colors: (
            --emph-fg: prop(--colors --accent --color, $global: true),
            --emph-bg: prop(--colors --bg-hi, $global: true)
        )
    ));

    @include component(namespace()) {
        @include element('title') {
            max-width:      7em;
            margin-top:     0;
            transform:      translateX(-.06em);
            font-family:    $font-fam--large;
            font-weight:    350;
            line-height:    1.2;
            text-transform: none;
        }

        @include element('title-inner') {
            background-image: linear-gradient(
                to top,
                transparent .15em,
                #{prop(--colors --emph-bg)} .15em,
                #{prop(--colors --emph-bg)} .6em,
                transparent .6em
            );
        }

        @include element('emph') {
            color:       prop(--colors --emph-fg);
            font-weight: 550;
        }

        @include media('<=md') {
            @include element('title') {
                max-width: none;
            }
        }

        @include iro-responsive-env(('md', 'lg')) {
            @include element('title') {
                font-size: iro-responsive-set((2.6rem, 3.4rem));
            }
        }
    }
}