assets/css/components/_hero.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

.c-hero {
    margin-bottom: $line-height * 2em;
    margin-left: -1 * $page--item-prefix--width;
    padding-left: $page--item-prefix--width;
    overflow: hidden;

    &::after {
        content: str-repeat('░', 120);
        display: block;
        position: relative;
        z-index: -10;
        height: $line-height;
        margin-top: px-to-em(2px);
        margin-left: -1 * $page--item-prefix--width;
        padding-top: px-to-em(2px);
        border-top: 1px solid var(--fg-hi);
        color: var(--fg-hi);
        line-height: $code-block--line-height;
    }

    &__pre {
        margin-top: 0;
        overflow: hidden;
    }

    @media (max-width: map-get($breakpoints, 'sm')) {
        margin-left: 0;
        padding-left: 0;

        &::after {
            margin-left: 0;
        }
    }
}