studioromeo.github.com/src/scss/component.article.scss at 2d96eee5d591cddbad5a85078f4a0386cf97cd66 · studioromeo/studioromeo.github.com · GitHub

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
48
49
.c-article {
    --article-gutter: calc(var(--size-gutter) / 2);

    background: var(--color-bg-surface);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-xl) var(--article-gutter) var(--spacing-lg);

    h1 {
        margin-top: var(--spacing-md);
        margin-bottom: 2.25rem;
    }

    &__footer {
        text-align: right;
        margin-top: var(--spacing-xl);
    }

    a:not(.u-link-default) {
        background: var(--color-bg-accent-subtle);
        color: var(--color-text-accent);
        font-size: 0.8em;
        font-weight: bold;
        padding: 2px 4px;

        &:hover,
        &:focus {
            box-shadow: var(--shadow-accent);
            color: var(--color-bg-accent);
        }
    }

    picture {
        display: flex;
        justify-content: center;
        background: var(--color-bg-page);

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
    }

    @container (min-width:  #{$container-width}) {
        --article-gutter: var(--size-gutter);

        border-radius: var(--radius-md);
    }
}