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
50
51
52
53
54
55
56
|
@include namespace('post-list') {
@include store((
--colors: (
--cat: (
--fg: prop(--colors --fg-lo, $global: true),
),
--post: (
--bg: prop(--colors --bg-lo, $global: true),
--border: prop(--colors --obj-hi, $global: true),
),
--meta: (
--fg: prop(--colors --fg-hi, $global: true),
)
),
--dims: (
--pad-x: 1em,
--pad-y: .6em,
)
));
@include component(namespace()) {
@include element('category-header') {
color: prop(--colors --cat --fg);
font-size: 1 / 16 * 14em;
letter-spacing: 1px;
text-transform: uppercase;
@include next-element('post') {
margin-top: $line-height * .5rem;
}
}
@include element('post') {
display: flex;
align-items: baseline;
padding: prop(--dims --pad-y) prop(--dims --pad-x);
background-color: prop(--colors --post --bg);
@include next-twin-element {
border-top: 1px solid prop(--colors --post --border);
}
}
@include element('post-title') {
margin-right: 1em;
font-size: 1 / 16 * 17em;
}
@include element('post-date') {
flex: 0 0 auto;
margin-left: auto;
color: prop(--colors --meta --fg);
font-size: 1 / 16 * 14em;
}
}
}
|
