]>
Commit | Line | Data |
---|---|---|
8f9d1d4d DC |
1 | .resource { |
2 | display: flex; | |
3 | border-radius: var(--border-radius); | |
4 | border: 1px solid var(--divider-color); | |
5 | background-color: var(--lightest-background-color); | |
6 | align-items: stretch; | |
7 | overflow: hidden; | |
8 | margin-bottom: .5rem; | |
9 | margin-block-end: .5rem; | |
8f9d1d4d DC |
10 | position: relative; |
11 | transition: all .2s linear; | |
12 | ||
13 | &:hover { | |
14 | background-color: var(--lighter-background-color); | |
15 | } | |
8f9d1d4d DC |
16 | } |
17 | ||
18 | .resource__image { | |
19 | flex: 1 0 5.5rem; | |
20 | max-width: 5.5rem; | |
21 | overflow: hidden; | |
22 | padding: .25rem; | |
23 | ||
24 | img { | |
25 | display: block; | |
26 | height: 100%; | |
27 | width: 100%; | |
8f9d1d4d DC |
28 | object-fit: contain; |
29 | } | |
30 | } | |
31 | ||
32 | .resource__content { | |
33 | flex: 4; | |
34 | padding: .75rem; | |
35 | align-self: center; | |
36 | } | |
37 | ||
8f9d1d4d DC |
38 | .resource__title { // a |
39 | text-decoration: none; | |
40 | color: var(--headings-color); | |
41 | font-weight: 500; | |
42 | margin-bottom: .125rem; | |
43 | ||
44 | &::after { | |
45 | content: ""; | |
46 | position: absolute; | |
47 | left: 0; | |
48 | offset-inline-start: 0; | |
49 | top: 0; | |
f2a92ac6 | 50 | offset-block-start: 0; |
8f9d1d4d DC |
51 | width: 100%; |
52 | height: 100%; | |
53 | } | |
54 | } | |
55 | ||
56 | .resource__domain, | |
57 | .resource__domain a { | |
58 | text-decoration: none; | |
59 | color: var(--body-text-color); | |
60 | font-size: .875rem; | |
61 | } | |
62 | ||
63 | .resource__icon { | |
64 | color: var(--headings-color); | |
65 | margin: 1rem; | |
66 | align-self: center; | |
67 | } |